嗨!大家好
今天我们来分享——盒子阴影、文本阴影
先来看下案例
1> box-shadow:none (无阴影) | shadow (阴影)
使用方法 shadow:X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜⾊] [投影⽅式]
例:Box-shadow: 3px 3px 3px 5px 颜色 Inset
*注释
inset :置对象的阴影类型为内阴影。该值为空时,则对象的阴影类型为外阴影 (inset可以写在参数的第⼀个或者最后⼀个,其他位置⽆效;
<length>①: 第1个长度值⽤来设置对象的阴影⽔平偏移值。⽔平偏移量 正值向右 负值向左;
<length>②: 第2个长度值⽤来设置对象的阴影垂直偏移值。垂直偏移量 正值向下 负值向上;
<length>③: 如果提供了第3个长度值则⽤来设置对象的阴影模糊值。模糊度是不能为负值;
<length>④: 如果提供了第4个长度值则⽤来设置对象的阴影外延值。不允许负值
<color>: 设置对象的阴影的
注意哦:设置边框阴影不会改变盒⼦的⼤⼩,即不会影响其兄弟元素的布局。可以设置多重边框阴影,实现更好的效果,增强⽴体感,符合渐进
增强,实际开发中可以⼤胆
2> text-shadow:none | shadow
使用方法 shadow:X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜⾊] [投影⽅式]
例:Box-shadow: 3px 3px 5px 颜色
<length>①: 第1个长度值⽤来设置对象的阴影⽔平偏移值。⽔平偏移量 正值向右 负值向左;
<length>②: 第2个长度值⽤来设置对象的阴影垂直偏移值。垂直偏移量 正值向下 负值向上;
<length>③: 如果提供了第3个长度值则⽤来设置对象的阴影模糊值。模糊度是不能为负值;
<color>: 设置对象的阴影的