一、其他样式

1、圆角边框

在 CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。

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

语法：

border-radius:length;

• 参数值可以是数值或百分比的形式
• 如果是正方形，想要设置一个圆，直接写为50%
• 简写属性，分别代表左上角、右上角、右下角、左下角
• 分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和border-bottom-left-radius

2、盒子阴影

CSS3 中新增了盒子阴影，我们可以使用 box-shadow 属性为盒子添加阴影。 语法：

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

注释：text-shadow 属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表，每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0。

h1
{
text-shadow: 5px 5px 5px #FF0000;
}

效果图： 

向阴影添加模糊效果：

div {
  box-shadow: 10px 10px 5px grey;
}

 效果图： 

 属性创建纸质卡片效果：

div.card {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

  效果图：

 

box-shadow 属性应用单个或者多个阴影于元素。