资源下载 - 从此开始!

下载我_精品源码软件教程资源网

您的位置:主页 > 网页制作 > 正文

代码中的 border-radius: 10px是什么意思

2020-01-16 12:48 来源:互联网 编辑:admin

border-radius是CSS3中诞生的新样式,它可以使边框的边角变成弧形和圆角。以往制作按钮、弧形边框时需要使用背景切图的方式实现;不但臃肿,而且还容易产生布局BUG,不适于自适应框架的书写。
 
1.首先介绍一下语法:
 
border-radius:[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?
 
<length>:用长度值设置对象的圆角半径长度;不允许负值。
 
<percentage>:用百分比设置对象的圆角半径长度;不允许负值。
 
 
 
2.说明一下:
 
第一个值是水平半径。
 
如果第二个值省略,则它等于第一个值,这时这个角就是一个四分之一圆角。
 
如果第二个值为任意值,则会改变圆角的弧度,具体效果下面会举例进行演示
 
如果任意一个值为0,则这个角是矩形,不会是圆的。
 
当然,此值不允许是负值。
 
 
 
3.CSS3适用的浏览器:
 
IE9.0、Firefox、Safari、Chrome、Opera
 
 
 
4.CSS3测试实例:
 
水平与垂直半径相同时:
 
 
 
提供1个参数
border-radius:10px;
提供2个参数
border-radius:10px 20px;
提供3个参数
border-radius:10px 20px 30px;
提供4个参数
border-radius:10px 20px 30px 40px;
 
 
 
 
水平与垂直半径不同时:
 
 
 
提供1个参数
border-radius:10px/5px;
提供2个参数
border-radius:10px 20px/5px 10px;
提供3个参数
border-radius:10px 20px 30px/5px 10px 15px;
提供4个参数
border-radius:10px 20px 30px 40px/5px 10px 15px 20px
 
 
 
 
除了以上的几种表达方式以外,还可以指定某个角生成弧形样式。

边框10个像素的圆角border-radius:10px;
 
左上角圆角:border-radius-topleft : 10px
 
右上角圆角:border-radius-topright: 10px
 
左下角圆角:border-radius-bottomleft : 10px
 
右下角圆角:border-radius-bottomright : 10px
————————————————

上一篇:embed 视频网页不显示怎么解决

下一篇:没有了

打赏一下,我们会为大家提供更多优质资源!

相关文章,95%的人会看!{有内幕、有真相...}

看过本文的人还看过

微信扫一扫

站长微信账号