border在css3中新增了
- border-radius
- border-*-radius (*代表方向,如top-left)
- border-shadow
- border-image
- border-image-source
- border-image-slice
- border-image-width
- border-image-outset
- border-image-repeat
border-radius
- 4个参数依次表示左上角，右上角，右下角，左下角（从左上角开始顺时针）。
- 省略的角与对角角度相同(如右下角=左上角)
p.class1{
border-radius:10px 54px 20px;
}
p.class2{
border-top-left-radius: 50%;
}
box-shadow
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow 必需的。水平阴影的位置。允许负值v-shadow 必需的。垂直阴影的位置。允许负值blur 可选。模糊距离spread 可选。阴影的大小 (阴影扩大)color 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表inset 可选。从外层的阴影（开始时）改变阴影内侧阴影
p.class1{
box-shadow: -10px -20px 3px 30px #888888 ;
}
p.class2{
box-shadow: 10px 10px 5px #888888;
}
p.inset{
box-shadow: 10px 10px 5px #888888 inset;
}
p.class1
p.class2
p.inset
border-image
| name | des |
|---|
| border-image/border-corner-image | border-image 指定四边的图像，border-corner-image 指定四个角的图像，注意这里分开指定四条边和四个角的图片即需要使用8个图像 |
| border-fit/border-corner-fit | 平铺方式 |
| border-transform/border-corner-transform | 指定 border-image/border-corner-image 的变换方式 |
比较生僻 。 具体用法见auto实验室总结的比较全。