CSS 圆角边框、盒子阴影、文字阴影

圆角边框

圆角边框的语法格式如下：
border-radius:length;

定义：border-radius属性用于设置元素的外边框圆角，是CSS3新增的属性。
注意：
1、参数值可以是数值或百分比的形式；
2、如果是正方形，想要设置为一个圆，则可以把数值设置为高度或宽度的一半，或者直接写为50%；
3、如果是矩形，想要设置为一个圆角矩形，则可以把数值设置为高度的一半；
4、该属性也可以分开写：border-top-left-radius、border-top-right-radius、
   boeder-bottom-left-radius、border-bottom-right-radius

盒子阴影

盒子阴影的语法格式如下：
box-shadow:h-shadow v-shadow blur spread color inset;

分别对盒子每一条边单独设置阴影的语法格式如下：
<div  style="box-shadow:-10px 0px 10px red,   /*左边阴影*/ 
        				0px -10px 10px #000,  /*上边阴影*/ 
                        10px 0px 10px green,  /*右边阴影*/ 
                        0px 10px 10px blue;" /*下边阴影*/ >
</div>

注意：
1、具体参数值的说明见下表：
2、默认的是外阴影，但是不可以写这个单词，否则会导致阴影无效；
3、盒子阴影不占用空间，不会影响其他盒子的排列；
4、"box-shadow:10px 10px 10px;"表示水平、垂直位移和模糊度

参数值	说明
h-shadow	必需。水平阴影的位置，允许负值。
v-shadow	必需。垂直阴影的位置，允许负值。
blur	可选。模糊距离，简单说就是阴影的虚实，值越大，阴影越虚。
spread	可选。阴影的尺寸大小。
color	可选。阴影的颜色。
Inset	可选。将外部阴影改为内部阴影。

文字阴影

文字阴影的语法格式如下：
text-shadow:h-shadow v-shadow blur color;

注意：
1、具体参数值的说明见下表：

属性值	说明
h-shadow	必需。水平阴影的位置，允许负值。
v-shadow	必需。垂直阴影的位置，允许负值。
blur	可选。模糊距离，简单说就是阴影的虚实，值越大，阴影越虚。
color	可选。阴影的颜色。

---

微信公众号也会定期更新，觉得文章写得还可以的，可以加个关注！点个赞！谢谢！