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

2025-05-12 15:58:25
推荐回答(4个)
回答(1):

问题: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代码不全,我补全并修改后的代码如下,请查看~

Apple

回答(2):

-webkit-border-top-right-radius 右上角为圆角
-webkit-border-bottom-right-radius 右下角为圆角

同理可设置左上左下的圆角属性

回答(3):

nav{background-color:#333;}
nav背景覆盖了它的父元素
把nav的background-color:#333;去掉

回答(4):

在nav里面加一个样式border-radius:10px;
nav{ display:block; background-color:#333; width:840px ;margin:0 50px 0 0; padding:0 10px 20px 5px;border-radius:10px;}