Beautify the border and shadow box
A non-rectangular frame (CSS3)
radius radius (distance)
Syntax:
border-radius: 50%; 只有一个正方形 变成圆
Borders can look good /
Second, the shadow box (CSS3)
Syntax:
box-shadow:水平阴影 垂直阴影 模糊距离(虚实) 阴影尺寸(影子大小) 阴影颜色 内/外阴影;
- The first two properties are to be written. The rest may be omitted.
- Outer shadow (outset) but do not want to write default within the shadow inset
div {
width: 200px;
height: 200px;
border: 10px solid red;
/* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4); */
/* box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸(影子大小) 阴影颜色 内/外阴影; */
box-shadow: 0 15px 30px rgba(0, 0, 0, .4); /*rgba就是颜色的透明度*/
}