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圆角边框内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！
最新文章
热门文章
猜你喜欢
