css3之border

发表于 |

css3 border attribute

  1. border-radius
  • WIIF: border-radius特性，可以给元素创建圆角效果。
  • WIII: border-radius,是border-top-left-raius,border-top-right-radius,border-bottom-left-radius,border-bottom-right-radius的简写。这四个属性分别控制元素的四个边框radius。
  • 特别注意这四个属性接受两个属性值，x axis& y axis上的值，如果只给了一个值，则第二个值等于第一个值。
  • border-radius的值可以是px或百分比，百分比的值是相对元素的border宽度和高度。
  • 若border-radius设置一个值，则代表元素的四个角都为值，若设置两个值，则第一个值为左上角和右下角的值，第二个值为右上角和左下角的值。若设置三个值，则第一个值为左上角，第二个值为右上角和左下角，第三个值为右小角的值。四个值则分别为左上、右上、右下、左下的值。
  • border-radius不适用于table elements，因为border-collapse is collapse。
  1. box-shadow
  • WIIF: box-shadow用来设置元素的阴影效果
  • WIII: box-shadow可以设置多个阴影效果，多个设置之间用逗号连接。
  • box-shadow特性接受6个值。前两个值为X & Y offsets，X 和 Y方向上的偏移量，正数为向下和向右偏移，负数则相反。第三个值为blur length，控制着阴影的模糊程度，第四个值为spread radii，扩散半径，第五个值为背景颜色，可选值inset，设置之后，阴影在元素内部。
  1. border-image
  • WIIF: 以往给定border的样式是通过设置特性border-style实现的，通过border-image你可实现更加花哨的效果;
  • 这个属性是border-image-source,border-image-slice,border-image-width,border-image-outset,border-image-repeat的简写。