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%;
}

p.class1

p.class2

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实验室总结的比较全。