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

圆角边框

border-radius属性用于设置元素的外边框圆角。

语法：

box-radius: length;

 例如：

border-radius: 10px;
border-radius: 50%;

• 参数值可以为数值或百分比的形式
• 如果是正方形，想要设置一个圆，把数值改为边长的一半即可，或者直接写为50%
• 如果是矩形，想要将左右两边设置为半圆，将数值设置为高度的一半 
• 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角
• 分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius

盒子阴影

box-shadow属性为盒子添加阴影。

语法：

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

例如： 

div {
    width: 200px;
    height: 200px;
    background-color: pink;
    margin: 100px auto;
    box-shadow: 10px 10px 10px -4px rgba(0,0,0,.3);
}

值	描述
h-shadow	必填。阴影的水平位置。可为负数。
v-shadow	必填。阴影的垂直位置。可为负数。
blur	可选。阴影模糊的
spread	可选。阴影的尺寸。
color	可选。阴影的颜色。
inset	可选。将外部阴影（outset）改为内部阴影。

注意：

• 默认为外阴影（outset），但是不能写这个单词，否则阴影设置无效 。
• 盒子阴影不占用空间，不会影响其他盒子排列。

文字阴影

text-shadow属性用于设置文本阴影。

语法：

text-shadow: h-shadow v-shadow blur color;

值	描述
h-shadow	必填。阴影的水平位置。可为负数。
v-shadow	必填。阴影的垂直位置。可为负数。
blur	可选。阴影模糊的
color	可选。阴影的颜色。