border-radius给元素添加圆角边框的方法

时间：2021-05-08

border-radius:10px;

border-radius: 5px 4px 3px 2px;

不要以为border-radius的值只能用px单位，你还可以用百分比或者em，但兼容性目前还不太好。

实心上半圆：

方法：把高度(height)设为宽度(width)的一半，并且只设置左上角和右上角的半径与元素的高度一致(大于也是可以的)。

div{ 　　height:50px; 　　width:100px; 　　background:#9da; 　　border-radius:50px50px00; 　　}

实心圆：

方法：把宽度(width)与高度(height)值设置为一致(也就是正方形)，并且四个圆角值都设置为它们值的一半。

如下代码：

div{ 　　height:100px;　　width:100px; 　background:#9da; 　border-radius:50px;　　}

完整代码

<!doctypehtml><html><head><metacharset="utf-8"><title>border-radius</www.dztcsd.com/title><styletype="text/css">div.circle{ height:100px; width:100px; background:#9da; border-radius:50px; } div.semi-circle{ height:100px; width:50px; background:#9da; border-radius:?; } </style></head><body><divclass="circle"></div><br/><!--任务部分--><divclass="semi-circle"></div></body></html>

到此这篇关于border-radius给元素添加圆角边框的方法的文章就介绍到这了,更多相关border-radius圆角边框内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章