边框与圆角
border的三要素
border: 1px solid red;
- border-width（线型） dotted-点状线 dashed-虚线 solid-实线
- border-style（线宽度） 如：1px
- border-color（线颜色） 如：red
四个方向的边框
- border-top:
- border-right:
- border-bottom:
- border-left:
也可以使用：
border-top: 1px solid red;
则只改变上边框的值
同理：
border-top-width: 1px;
注意：一般不使用 border-style这钟小属性，层叠时使用较多。
圆角
单位通常为px单位，表示R角的半径。
border-radius: 10px;
百分比为单位，如 50%为圆形或者椭圆形。
border-radius: 50%;
border-radius: 10px 20px 30px 40px (上，右，下，左)
用来层叠大属性。
盒子阴影
box-shadow: 10px 20px 30px rgba(0,0,0,.6);
10px 为 x方向的偏移量。
20px 为 y方向的偏移量。
30px 为模糊量。
rgba(0,0,0,.6) 为阴影颜色。
box-shadow: 10px 20px 30px 40px rgba(0,0,0,.6);
40px 为阴影延展 阴影会向四个方向进行延展。
inset 可以将阴影该为内阴影：
box-shadow: inset 10px 20px 30px rgba(0,0,0,.6)
多阴影
box-shadow: 2px 2px 10px red, 4px 4px 50px blue;
加逗号即可