本文摘自PHP中文网,作者青灯夜游,侵删。
在css中,可以利用border-radius属性来制作圆;border-radius属性可以为元素添加圆角边框,只需要给宽高相同的正方形元素的设置“border-radius: 100%;”样式即可。
本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
p+Css制作四分之一圆主要是使用Css3.0中的border-radius这个圆角隐藏属性.利用这一属性,我们可以画圆,画半圆,四分之三圆,四分之一圆等.以后我会更新……
如何使用border-radius属性,下面是border-radius属性最基本的使用方法:
1 2 3 4 5 6 | .round {
border-radius: 5px ;
-moz-border-radius: 5px ;
-webkit-border-radius: 5px ;
border-radius: 5px 4px 3px 2px ;
}
|
1、用border-radius画圆:
1 2 3 4 5 6 7 | # circle {
width : 200px ;
height : 200px ;
background-color : #a72525 ;
-webkit-border-radius: 100px ;
}
|
仔细想想,一个正方形(200*200),里面最大的圆是的半径是:100.
2.空心圆代码:空心圆其实就是只有边框,空心部分填上其他颜色:
1 2 3 4 5 6 7 | # circle {
width : 200px ;
height : 200px ;
background-color : #efefef ;
border : 3px #a72525 solid ;
-webkit-border-radius: 100px ;
}
|
同理虚线圆代码:
1 2 3 4 5 6 7 | #circle {
width: 200px;
height: 200px;
background-color: #efefef;
border: 3px #a72525 dashed;
-webkit-border-radius: 100px 100px 100px 100px;
}
|
阅读剩余部分
相关阅读 >>
css怎么实现心形
css cursor属性怎么用
怎么外部引入css
如何使用css设置框架内文本的垂直位置
css怎么给文字添加描边
css不让字体倾斜怎么实现
css border-color属性怎么用?
css怎么实现超出范围加滚动条
css中伪类和伪元素有什么区别
css怎么设置行距
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » css如何制作圆