border-radius是向元素添加圆角边框的方法
导读:收集整理的这篇文章主要介绍了border-radius是向元素添加圆角边框的方法,觉得挺不错的,现在分享给大家,也给大家做个参考。 border-radius:10px; /* 所有角都使用半径为10px的圆角 */border-...
收集整理的这篇文章主要介绍了border-radius是向元素添加圆角边框的方法,觉得挺不错的,现在分享给大家,也给大家做个参考。 border-radius:10px; /* 所有角都使用半径为10px的圆角 */
border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角,顺时针 */
不要以为border-radius的值只能用px单位,你还可以用百分比或者em,但兼容性目前还不太好。
实心上半圆:
方法:把高度(height)设为宽度(width)的一半,并且只设置左上角和右上角的半径与元素的高度一致(大于也是可以的)。
XML/HTML Code复制内容到剪贴板- div{
- height:50px; /*是width的一半*/
- width:100px;
- background:#9da;
- border-radius:50px 50px 0 0; /*半径至少设置为height的值*/
- }
实心圆:
方法:把宽度(width)与高度(height)值设置为一致(也就是正方形),并且四个圆角值都设置为它们值的一半。
如下代码:
CSS Code复制内容到剪贴板- div{
- height:100px; /*与width设置一致*/
- width:100px;
- background:#9da;
- border-radius:50px; /*四个圆角值都设置为宽度或高度值的一半*/
- }
- !doctyPE html>
- html>
- head>
- meta charset="utf-8">
- tITle> border-radius/www.dztcsd.COM/title>
- style type="text/css">
- div.circle{
- height:100px; /*与width设置一致*/
- width:100px;
- background:#9da;
- border-radius:50px; /*四个圆角值都设置为宽度或高度值的一半*/
- }
- /*任务部分*/
- div.SEMi-circle{
- height:100px;
- width:50px;
- background:#9da;
- border-radius:?;
- }
- /style>
- /head>
- body>
- div class="circle">
- /div>
- br/>
- !--任务部分-->
- div class="semi-circle">
- /div>
- /body>
- /html>
以上就是小编为大家带来的border-radius是向元素添加圆角边框的方法的全部内容了,希望对大家有所帮助,多多支持~
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: border-radius是向元素添加圆角边框的方法
本文地址: https://pptw.com/jishu/588338.html