返回首页
当前位置: 主页 > 网络编程 > Asp实例教程 >

利用CSS3实现(椭)圆角边框和图片边框代码

时间:2011-06-02 20:51来源:知行网www.zhixing123.cn 编辑:麦田守望者

网上现在有很多使用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引擎的浏览器的样式与 Firefox 不同,这个相同的效果采用的样式则是这样的:
-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:设置缩放和平铺方式

------分隔线----------------------------
标签(Tag):css
------分隔线----------------------------
推荐内容
猜你感兴趣