css3笔记——边框border

一,border-color

css1中便有border-color属性,css3中增强了其功能,其值为支持多个颜色设置,如果设置n个颜色值,且边框宽度为n像素,那么每个颜色占1个像素,依次显示在边框上。若边框宽度像素数量大于颜色个数,则除最后一个颜色外,其余颜色占1个像素的宽度,其余宽度被最后一个颜色占有

  • border-color派生的子属性:
  • border-top-color
  • border-right-color
  • border-bottom-color
  • border-left-color

而对于边框的宽度不同情况如下图示

borderborder

此种情况各个边框在分界处的角度与边框宽度的比例成正比。

还需要注意的是,在同时写了border-color和其派生的属性的情况下,对于支持css3的浏览器,派生属性的优先级高,不支持其css3属性的浏览器忽略派生属性,但是若同时有单一颜色的border-color(为了优雅降级)和多个颜色的border-color,浏览器只会解析单一颜色的border-color。因此推荐的写法是,降级的色使用border-color,多色的使用派生属性

*二,border-image *

在css3中新增了border-image属性,可以在边框中使用图片,此属性safafi和chrome支持,FireFox3.5、Opera10.5才开始支持ie9及其一下不支持。

其语法为border-image:none |  [  |  ] {1,4} [ /  {1,4}]

  • none 默认值,表示边框无图像
  •   使用绝对或者相对地址指定边框背景图
  •  设置边框宽度或者边框背景图像大小,使用固定像素值表示。
  •  设置边框背景图像的大小,使用百分比表示

注:当table的border-collapse设置为collapse时候,border-image和下文的border-radius属性无效。

其派生的属性有

  • border-top-image
  • border-right-image
  • border-bottom-image
  • border-left-image
  • border-top-left-image
  • border-top-right-image
  • border-bottom-left-image
  • border-bottom-right-image
  • border-image-source:设置边框背景图像地址。
  • border-image-slice:定义如何裁切背景图像,与背景图像的定位功能不同。
  • border-image-repeat:定义边框背景图像的重复性。
  • border-image-width:定义边框背景图像的显示大小(即边框显示大小)。浏览器还是使用border-width实现相同的功能。
  • border-image-outset:定义边框背景图像的偏移位置(留待以后实例验证)。

此属性算是css中比较复杂的属性了,特别是图片裁切的有点复杂,可以到另一篇博文查看介绍和实例。

三,border-radius

可以设置边框的圆角样式,其语法为border-radius: none [  {1,4} ]

  • none 默认值
  •  由数字和单位组成,不可为负值。

其派生的子属性有(以下属性的顺序也表示了若border-radius值为四个时候的解析顺序,其它个数属性值的解析和margin等的解析原则一样):

  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius

border-radius属性的值可以为两个值,第一个表示水平半径,第二个表示垂直半径,当只有一个值的时候,表示水平半径和垂直半径相同。

因为radius属性的半径值a和border的宽度值b的不同会产生不同的效果,对此我的理解便是:

首先浏览器依据圆角的位置(左上,右上····)和radius的半径形成各自的扇形区域,扇形的曲线内切与边框的最外边线,再根据边框的宽度进行圆角化

若a>b 则在扇形的范围内边框以a为外边半径,a-b为内边半径变形成圆环(如下图示)。

borderborder

若a<=b 则是边框在扇形曲线以外的部分被切切,边框的内边仍是直角(如下图示)。

borderborder

总体来说浏览器是以边框的宽度保持不变,使之尽量平滑的原则来处理圆角。

borderborder

最后有兴趣可以查看实例demo

xiaodao

0

Subscribe to cc log

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!
comments powered by Disqus