css3做圓角右邊是圓角左邊是直角
2 回答
holdtom
TA貢獻1805條經(jīng)驗 獲得超10個贊
問題：css3做圓角右邊是圓角左邊是直角
解答：注意css改動這里，nav ul li{ float:left; margin:0 20px; background-color:#999;border-radius:10px 0 0 10px; -moz-border-radius:10px 0 0 10px; font-size:30px;}
理解：border-radius屬性
1）border-radius:10px;等價于：border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-right-radius:10px;border-bottom-left-radius:10px;
2）border-radius:1px 2px 3px 4px; 等價于：border-top-left-radius:1px;border-top-right-radius:2px;border-bottom-right-radius:3px;border-bottom-left-radius:4px;
糾錯：您的html代碼不全，我補全并修改后的代碼如下，請查看~
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Apple</title>
<style>
body{ background-color: #F2F2F2;}
header {background-color:#333;border-radius:10px;}
nav{ display:block; background-color:#333; width:840px ;margin:0 50px 0 0; padding:0 10px 20px 5px;}
nav ul { list-style:none; background-color:#999;}
nav ul li{ float:left; margin:0 20px; background-color:#999;border-radius:10px 0 0 10px; -moz-border-radius:10px 0 0 10px; font-size:30px;}
nav ul li a{ color:#FFF; text-decoration:none; font-size:20px; }
nav ul li a:hover{color:#000 ;text-decoration:none; border-bottom:1px solid #ff5400; padding-bottom:2px;}
</style>
</head>
<body>
<header>
<nav>
<div>
<ul>
<li><a>Apple</a></li>
<li><a>在線商店</a></li>
<li><a>Mac</a></li>
<li><a>ipod</a></li>
<li><a>iphone</a></li>
<li><a>ipad</a></li>
<li><a>iTunes</a></li>
<li><a>技術支持</a></li>
</ul>
</div>
</nav>
</header>
</body>
</html>
智慧大石
TA貢獻1946條經(jīng)驗 獲得超3個贊
-webkit-border-top-right-radius 右上角為圓角
-webkit-border-bottom-right-radius 右下角為圓角
同理可設置左上左下的圓角屬性
- 2 回答
- 0 關注
- 2436 瀏覽
添加回答
舉報
0/150
提交
取消