现在的位置: 首页 > 综合 > 正文

CSS3尝鲜(三):利用CSS3的新功能实现(椭)圆角边框和图片边框

2013年08月22日 ⁄ 综合 ⁄ 共 3665字 ⁄ 字号 评论关闭

网上现在有很多使用CSS实现的圆角边框,但这些方法都是比较复杂的,现在,CSS3标准提供实现圆角边框、椭圆角边框和图片边框的简单方法。CSS3关于边框的定义中新加入了border-radius和border-image属性实现这些功能。CSS3的边框模块定义的属性有:

属性名 属性值
border border-width | border-style | border-color
border-top border-top-width | border-top-style | border-top-color
border-top-width number | thin | medium | thick
border-top-style none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
border-top-color color
border-right border-right-width | border-right-style | border-right-color
border-right-width number | thin | medium | thick
border-right-style none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
border-right-color color
border-bottom border-bottom-width | border-bottom-style | border-bottom-color
border-bottom-width number | thin | medium | thick
border-bottom-style none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
border-bottom-color color
border-left border-left-width | border-left-style | border-left-color
border-left-width number | thin | medium | thick
border-left-style none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
border-left-color color
border-radius number | %{1,4} [/number | %{1,4}]?

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

border-top-left-radius number | %
border-top-right-radius number | %
border-bottom-right-radius number | %
border-right-left-radius number | %
border-image border-image-source border-image-slice border-image-width border-image-outset border-image-repeat
border-image-source none | url
border-image-slice [% | number]{1,4} && fill?
border-image-width [length | % | number | auto]{1,4}
border-image-outset [length | number]{1,4}
border-image-repeat [stretch | repeat | round | space | none]{1,2}
border-collapse collapse | separate
box-break continuous | each-box
box-shadow inset | [length,length,length,length | color] | none

 border-radius 在元素四角的位置形成四分之一大小的椭圆圆角。如果没有边框,即边框宽度为0,则背景的圆角依然存在。这个属性采用值 a/b 的形式表示,其中a代表水平方向半径,b代表垂直方向的半径。这2个值可以是一个长度值,也可以是百分比,百分比是对于元素宽度的大小来计算的。 border-radius是一个简写的形式,它同时代表四角的椭圆角的大小,按照 top-left, top-right, bottom-right, bottom-left 的顺序进行设置。注意:Firefox中的写法是这样的:-moz-border-radius-topleft、-moz-border-radius-topright、-moz-border-radius-bottomright 、 -moz-border-radius-bottomleft。

例如:border-radius:10px 等同于 border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-right-radius: 10px;border-bottom-left-radius:10px;。

下面我们就例子讲解这些用法。

关于圆角边框、椭圆角边框:

如果设置一个值,则四角的水平和垂直半径就是10px,如果没有边框,则背景依然是圆角。本例子的样式:

-moz-border-radius:10px;border-radius:10px;border-width:2px 2px 0 0;background-color: rgb(255, 239, 217);

如果设置两个个值,则第一个值代表top-left和bottom-right,第二个值代表top-right 和 bottom-left,也就是对角的相同。本样式的代码是:

-moz-border-radius:10px 20px;border-radius:10px 20px;

如果设置3个值,则第二个值代表的是 top-right和bottom-left。本样式的代码是:

-moz-border-radius:10px 20px 40px;border-radius:10px 20px 40px;

如果是四个值,则按 top-left, top-right, bottom-right, bottom-left的顺序设置。 另外需要注意:采用Webkit引擎的浏览器如 Chrome、Safari和搜狗浏览器(具体没测试),这些写法没有完全支持,-webkit-border-radius 只支持一个值或者设置2个值,代表椭圆的两个半径。

采用Webkit引擎的浏览器的样式与 Fireofx 不同,这个相同的效果采用的样式则是这样的:

-webkit-border-radius:10px 20px;-moz-border-radius:10px / 20px

单独设置一个圆角的写法:

-webkit-border-top-right-radius: 20px;-moz-border-radius-topright: 20px;border-top-right-radius: 20px;

关于图片边框:

border-image

:是 border-image-source border-image-slice border-image-width border-image-outset border-image-repeat的简写形式;
border-image-source

:设置图片的地址。如果设置none,则不显示边框图片,将显示其他样式设置;
border-image-slice

:设置从图片的top, right, bottom, left四个边缘向内的偏移量。如果设置为百分比,则是指向对于图片尺寸的大小的。水平方向向对于图片的宽度,垂直发现向对于图片的高度。如果设置为数字,则是只图片坐标的大小。fill指最中间一部分被保留。
border-image-width

:设置边框的宽度 border-image-repeat:设置缩放和平铺方式

下面就是一个简单的例子:

使用边框图片的例子,不过,这个样式3个浏览器看到的效果个不相同,看来这些属性浏览器支持的还不是很好。本样式代码:

-moz-border-image:url(http://dotnet.aspx.cc/Images/copyright.gif) 16 16 round stretch;-webkit-border-image:url(http://dotnet.aspx.cc/Images/copyright.gif) 16 16 round stretch;border-width:16px

以上所有例子的效果如下:

孟宪会

抱歉!评论已关闭.