网上现在有很多使用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:设置缩放和平铺方式
下面就是一个简单的例子:
使用边框图片的例子,不过,这个样式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
以上例子的效果如下:
分享到:
相关推荐
css3中的边框一般多为矩形,也可以通过设置实现圆角边框的效果,通过border-radius:;通过设置该属性值得大小改变边框的圆角大小,从而达到自己需要的圆角边框效果
css圆角边框css圆角边框css圆角边框css圆角边框css圆角边框
css用图片实现圆角边框的效果 css用图片实现圆角边框的效果
CSS圆角边框CSS圆角边框CSS圆角边框CSS圆角边框CSS圆角边框CSS圆角边框
一个用css实现的圆角边框实例,有兴趣的可以研究研究哦
用div+css实现边框圆角,其实实现div圆角,有三种方法,也可以用圆角片来实现,还有一种技术,现在浏览器还不是很支持。
老外用纯CSS实现的圆角边框.rar老外用纯CSS实现的圆角边框.rar老外用纯CSS实现的圆角边框.rar老外用纯CSS实现的圆角边框.rar老外用纯CSS实现的圆角边框.rar
css图片外边框效果实现 css图片外边框效果实现
老外用css实现圆角边框,纯css,简单易懂,看了就明白
div css圆角代码各种圆角表格_圆角边框css圆角
HTML5 CSS3制作的带图标的不规则按钮,这些不规则的形状其实是有规则的,像圆角、椭圆、梯形等,只不过是印象中比矩形的按钮稍微些,但是这些按钮应用在网页上,感觉很有个性哦,让人眼前一亮的感觉,按钮是带有图标...
css 圆角边框 样式表 css 圆角边框原理及网页实例
CSS3 jQuery圆角边框的垂直图片滚动代码,CSS3图片滚动,响应鼠标动作自动滚动,本特效适合布局在网页的侧边栏中,主要是面向移动设备浏览的图片滚动效果。
圆角CSS3动画线条边框代码特效是一款基于CSS属性animation动画制作,效果流畅弹性十足。
纯css 实现边框圆角实例,不使用图片,时候所有浏览器.
用js实现css3效果的圆角方法,代码简洁方便,效果很不错,跟大家分享一下!!
纯CSS实现的鼠标触及显示边框和描述的图片特效
主要为大家详细介绍了CSS3边框的不同效果实现代码,包括CSS3圆角边框、盒阴影、边界图片的制作方法,感兴趣的小伙伴们可以参考一下
无懈可击的CSS圆角边框 用了一个圆角框来显示用户“已经切换使用”的某个兼容Web标准的浏览器,包括软件名称和图标
CSS3实现的鼠标滑过边框线条动画特效源码是一段实现了鼠标经过或悬停一个选项卡上时,该选项卡周围会出现从一点开始到另一点结束的边框线条动画效果,效果流畅弹性十足,非常干净、时尚,本段代码适应于所有网页使用...