当前位置:知识问问>生活百科>css3做圆角右边是圆角左边是直角

css3做圆角右边是圆角左边是直角

2024-01-06 16:38:42 编辑:join 浏览量:631

css3做圆角右边是圆角左边是直角

问题: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>

标签:圆角

版权声明:文章由 知识问问 整理收集,来源于互联网或者用户投稿,如有侵权,请联系我们,我们会立即处理。如转载请保留本文链接:https://www.zhshwenwen.com/life/335591.html
热门文章