问题：css3做圆角右边是圆角左边是直角
解答：注意css改动这里，nav ul li{ float:left margin:0 20px background-color:#999border-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:10pxborder-top-right-radius:10pxborder-bottom-right-radius:10pxborder-bottom-left-radius:10px
2）border-radius:1px 2px 3px 4px 等价于：border-top-left-radius:1pxborder-top-right-radius:2pxborder-bottom-right-radius:3pxborder-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:#333border-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:#999border-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>
Pixel像素，相对长度单位。像素是相对于显示器分辨率而言。
相对长度单位，相对于 当前对象 内文本的字体尺寸，如当前对行内文本的字体尺寸未被设置，则相对于浏览器的默认字体尺寸。 任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合：1em = 16px。
由上可见，em的值并不是固定的，它的值跟其父级元素的字体大小紧密相关。
示例：
rem是CSS3新增的一个相对单位（root em，根em），这个单位与em有什么区别呢？
目前除IE8及更早版本外，所有浏览器均已支持rem。对于不支持的浏览器，可以多写一个绝对单位的声明。如此浏览器会忽略rem设定的字体大小。如下：
注意：
px、em、rem在线转换工具： http://pxtoem.com/
参考自： https://blog.csdn.net/qq_41893551/article/details/81258600
代码如下：
<h1>CSS3滑入/滑出效果</h1>
<div id="volet_clos">
<div id="volet">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima quisquam tempora quaerat dolores molestias reiciendis .</p>
<p>vero labore voluptates necessitatibus ut? Et</p>
<p>vero labore voluptates necessitatibus ut? Et</p>
<p>vero labore voluptates necessitatibus ut? Et</p>
<p>vero labore voluptates necessitatibus ut? Et</p>
<a href="#volet" aria-hidden="true" class="ouvrir">滑出</a>
<a href="#volet_clos" aria-hidden="true" class="fermer">滑入</a>
</div>
</div>
扩展资料
web网页设计的重要注意事项：
1、网页版面设计合理性
网页设计过程中，一定要留意网页版式的合理性，通过合理的网页布局让用户浏览起来比较顺畅舒适，注意网页版式的设计，不要块块之间过于冗繁，显示拥挤，要有主次分明，注意简练大方。
2、运用舒缓的色彩设计
在网页色彩搭配上，采用淡色系进行页面设计，特别要注意颜色的分配，总体颜色不宜超过三种颜色，可以确定一个主颜色再加上辅助颜色进行点缀搭配，这样整体设计展现出来比较调和、舒缓，用户浏览页面也不会导致眼花缭乱，眼睛疲劳。
3、丰富的页面内容
丰富的内容赋予网页生命力，用户都是喜欢有新鲜、丰富内容的网页，一个受欢迎的网页设计一定是有丰富多彩的内容吸引用户的。
丰富内容的网页对于搜索引擎也是受欢迎的，当搜索引擎每次来到我们网站进行抓取内容的时候，如果我们的网页内容保持新鲜、原创，将会很快进行收录，这对于网站整体优化排名都是有好处的。
