首页 > 网页制作 > CSS

CSS3 border-radius圆角的实现方法及用法详解

admin CSS 2022-02-05 17:07:24 CSS3   border-radius   圆角"

以前想实现一个圆角是比较麻烦的,不过现在CSS3来了,实现圆角变的那么的简单只需要一句话:border-radius即可。下面青岛星网跟大家分享下:border-radius的具体用法。

CSS3圆角只需设置一个属性:border-radius(含义是"边框半径")。你为这个属性提供一个值,就能同时设置四个圆角的半径。所有合法的CSS度量值都可以使用:em、ex、pt、px、百分比等等。

border-radius的浏览器支持

IE 9、Opera 10.5、Safari 5、Chrome 4和Firefox 4,都支持上述的border-radius属性。

早期版本的Safari和Chrome,支持-webkit-border-radius属性。

早期版本的Firefox支持-moz-border-radius属性。

目前来看,为了保证兼容性,只需同时设置-moz-border-radius和border-radius即可。

-moz-border-radius: 15px;
border-radius: 15px;

(注意:border-radius必须放在最后声明,否则可能会失效。)

另外,早期版本Firefox的单个圆角的语句,与标准语法略有不同。

-moz-border-radius-topleft(标准语法:border-top-left-radius)
-moz-border-radius-topright(标准语法:border-top-right-radius)
-moz-border-radius-bottomleft(标准语法:border-bottom-left-radius)
-moz-border-radius-bottomright(标准语法:border-bottom-right-radius)

border-radius的实例制作

#rcorners1 {
    border-radius: 25px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}
 
#rcorners2 {
    border-radius: 25px;
    border: 2px solid #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}
 
#rcorners3 {
    border-radius: 25px;
    background: url(paper.gif);
    background-position: left top;
    background-repeat: repeat;
    padding: 20px;
    width: 200px;
    height: 150px;
}

CSS3 border-radius - 指定每个圆角

如果你在 border-radius 属性中只指定一个值,那么将生成 4 个 圆角。

但是,如果你要在四个角上一一指定,可以使用以下规则:

四个值: 第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角。

三个值: 第一个值为左上角, 第二个值为右上角和左下角,第三个值为右下角

两个值: 第一个值为左上角与右下角,第二个值为右上角与左下角

一个值: 四个圆角值相同

CSS3 border-radius单个圆角的设置

单个圆角的设置除了同时设置四个圆角以外,还可以单独对每个角进行设置。对应四个角,CSS3提供四个单独的属性:

border-top-left-radius

border-top-right-radius

border-bottom-right-radius

border-bottom-left-radius

到此这篇关于CSS3 border-radius圆角的实现方法及用法详解的文章就介绍到这了,更多相关CSS3 border-radius圆角内容请搜索潘少俊衡以前的文章或继续浏览下面的相关文章,希望大家以后多多支持潘少俊衡!

版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。
本文地址:/web/CSS/73341.html

留言与评论(共有 0 条评论)
   
验证码:

潘少俊衡

| 桂ICP备2023010378号-4

Powered By EmpireCMS

爱享小站

中德益农

谷姐神农

环亚肥料

使用手机软件扫描微信二维码

关注我们可获取更多热点资讯

感谢潘少俊衡友情技术支持