box-shadow: h-shadow v-shadow blur spread color;

五个参数含义：

h-shadow	必需的。水平阴影的位置。允许负值
v-shadow	必需的。垂直阴影的位置。允许负值
blur	可选。模糊距离，实际是模糊程度
spread	可选。阴影的大小
color	可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表

代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>盒子阴影</title><style>div {width: 200px;height: 200px;background-color: pink;margin: 100px auto;/* box-shadow: 10px 10px; */}div {box-shadow: 10px 10px 5px -4px rgba(170, 0, 0, 0.8);}/* 原先盒子没有影子,当我们鼠标经过盒子就添加阴影效果 */</style>
</head><body><div></div>
</body></html>

效果：

div添加阴影（盒子阴影）box-shadow各参数含义相关推荐

【css3文字阴影+盒子阴影+过渡+2d转换+3d转换】
文字阴影text-shadow text-shadow 后面的值有4个: 第一个:X轴,水平阴影位置允许负值. 第二个:y轴,垂直阴影位置,允许负值. 第三个:blur, 模糊的距离第 ...
CSS阴影属性-文字阴影盒子阴影
文字阴影在css3中通过text-shadow属性实现对页面中的文字添加阴影效果语法格式 text-shadow:水平距离垂直距离阴影的模糊半径阴影的颜色其中水平距离和垂直距离为必填选项, ...
html弹性盒子布局,div+css3弹性盒子(flex box)布局
一.CSS3 弹性盒子(Flex Box) 弹性盒子是CSS3的一种新布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确 ...
html盒子阴影效果,CSS3给div或者文字添加阴影（盒子阴影、文本阴影的使用）
添加阴影效果以前只能使用图片来实现了,现在的css3功能非常的强大了,今天我们就一起来看关于CSS3给div或者文字添加阴影(盒子阴影.文本阴影的使用)的方法,具体的例子如下所示． CSS3定义了两种 ...
css如何给盒子底部加阴影,CSS3 --添加阴影（盒子阴影、文本阴影的使用）
CSS3 - 给div或者文字添加阴影(盒子阴影.文本阴影的使用) CSS3定义了两种阴影:盒子阴影和文本阴影.其中盒子阴影需要IE9及其更新版本,而文本阴影需要IE10及其更新版本.下面分别介绍两种 ...
Box Shadow阴影和圆角
一.盒子写Box Shadow阴影:如 box-shadow:2px 2px 5px #120F0B; //支持Opera浏览器 -moz-box-shadow:2px 2px 5px #120F0B ...
CSS 盒子阴影和文字阴影
目录盒子阴影文字阴影盒子阴影 CSS3中新增了盒子阴影,我们可以使用box-shadow属性为盒子添加阴影语法: box-shadow:h-shadow v-shadow blur sprea ...
3D变形：平移、旋转、缩放、立方体、盒子阴影
3D变形:平移.旋转.缩放什么是3d转换定义元素在三维空间移动.缩放.旋转 3d坐标轴(图示) 3D立体空间的3根轴线 x轴:水平,向右为正,向左为负 y轴:垂直,向下为正,向上为负 z轴:垂直于 ...
用css3做出好看的盒子阴影
<div class='docs-card'>盒子阴影</div> .docs-card {height: 194px;width: 30%;background-color: ...
unity3D 添加天空盒子
Unity添加天空盒子Sky box 对于3D游戏来说必不可缺的就是天空的颜色那我们该如何给游戏加上天空嘞首先点击Main Camera主相机你会发现右边出现Inspector的面板点击最下 ...

div添加阴影（盒子阴影）box-shadow各参数含义

代码：

效果：

div添加阴影（盒子阴影）box-shadow各参数含义相关推荐

最新文章

热门文章