banner

[学习笔记]怎么制作纯CSS圆角

这篇文章主要是用于留作笔记,以及给一些没接触过的朋友做一个了解。笔记的内容主要是讲解规范写法,以及我们容易误解的地方。

CSS做圆角,主要利用的就是CSS3中的border-radius属性来做的。*关于border-radius的标准解释可以去w3school看看


【笔记1】border-radius是标准的CSS3圆角属性,但WebKit内核的浏览器最好是用-webkit-border-radius专有属性,Gecko内核的浏览器最好是用-moz-border-radius专有属性。*相关说明:部分使用WebKit内核的浏览器同样会支持border-radius,但为了保证兼容,建议添加-webkit-。

看一下标准代码

.radius {
-webkit-border-radius:16px;
-moz-border-radius:16px;
border-radius:16px;
}
/*16px是半径大小*/

 [注意喔]此处的国际通用标准写法是将特有属性放前面,CSS3标准属性放后面


【笔记2】针对四个角做单独的半径大小,首先我们要了解:

1、CSS3标准属性:border-top-left-radius左上角、border-top-right-radius右上角、border-bottom-left-radius左下角、border-bottom-right-radius右下角;

2、WebKit内核特有属性:-webkit-border-top-left-radius左上角、-webkit-border-top-right-radius右上角、-webkit-border-bottom-left-radius左下角、-webkit-border-bottom-right-radius右下角;

3、Gecko内核特有属性:-moz-border-radius-topleft左上角、-moz-border-radius-topright右上角、-moz-border-radius-bottomleft左下角、-moz-border-radius-bottomright右下角;

每个角的半径大小自己设置就行了,如果不做某个角的半径,不用那一条属性就可以了。

看一下标准代码

.radius2 {
-webkit-border-top-left-radius:16px;
-webkit-border-top-right-radius:15px;
-webkit-border-bottom-left-radius:14px;
-webkit-border-bottom-right-radius:13px;
-moz-border-radius-topleft:16px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:14px;
-moz-border-radius-bottomright:13px;
border-top-left-radius:16px;
border-top-right-radius:15px;
border-bottom-left-radius:14px;
border-bottom-right-radius:13px;
}

[注意喔]Gecko内核的特有属性有点不同,需要把指明角名的单词放在后面的啦,别搞错了。


当然,如果你怕写错了,可以用不知道是谁做的圆角属性公益的在线生成辅助网站,border-radius.com


【笔记3】如果你层容器内,需要添加图片,所以要添加一个溢出隐藏的属性,overflow:hidden;

一般在做圆形头像的时候,必须要加overflow属性,将其溢出部分隐藏好。


注意:CSS3圆角属性未处理的话,在IE中仅支持IE9+,如果需要IE6+的支持,需要用PIE做兼容。

阅读: 2726
在同意共创许可协议(CC BY-NC-SA-4.0)的前提下,您可以转载本文。
橙色阳光
https://oss.so/article/22

相关阅读

留言评论

8条留言
暴博客
换友链吗??橙色阳光
橙色阳光
转载都不带出处的,你说呢?
暴博客
你不换也可以,但我必须要对你说一声对不起,原文链接已经加上
暴博客
我是新手,只知道弄个关键字,也没说需要写原文来源啊
暴博客
对不起!!!!!!!!!
nobird
纯css有点累,我主题用了一个jq的插件----(当然最终效果也是css的),不过很方便。
橙色阳光
大鸟哥有没有兼容ie8的插件捏?除了PIE
nobird
我的页面四个角的圆角就是js实现的... IE8没条件,IE11模拟似乎是支持的。