css阴影-爱代码爱编程
文本阴影
- text-shadow css阴影设置,一共有四个值,使用格式如下:
div{
text-shadow: 10px 10px 10px red;
}
- 四个值的意义
- (1)水平方向位移,可以为负
- (2)垂直方向位移,可以为负
- (3)模糊程度
- (4)颜色
- 若要设置两个阴影,则text-shadow的值设置两个用逗号隔开。
盒子阴影
- box-shadow 盒子阴影标签
.box{
width: 100px;
height: 100px;
background-color: aquamarine;
margin: 0 auto;
box-shadow: 10px 10px 5px red;
}
- 四个值的意义和文本阴影基本一样。
- 多出来的两个值:
- 模糊的后边颜色前边,阴影的大小,是阴影的大小和原盒子的大小差。
- 外阴影和内阴影:在颜色之后加一个inset则表示为内阴影。
box-shadow: 10px 10px 5px 10px red inset;