[英]How to keep curved borders using css 3
边框半径样式不适用于以下代码
的HTML
<ul id="menu" class="menu">
<li class="active"><a href="#description">Limerick One</a></li>
<li><a href="#usage">Limerick Two</a></li>
<li><a href="#download">Limerick Three</a></li>
</ul>
CSS:
.menu { padding: 0; clear: both; border-radius:10px; }
.menu li { display: inline; }
.menu li a {
padding: 6px; float:left;font-family:Gill, Helvetica, sans-serif; border-right: 1px solid #000; border-bottom: none;
text-decoration: none; color: #fff; font-weight: bold;
background-image: linear-gradient(bottom, rgb(68,68,68) 0%, rgb(34,34,34) 54%, rgb(68,68,68) 100%);
background-image: -o-linear-gradient(bottom, rgb(68,68,68) 0%, rgb(34,34,34) 54%, rgb(68,68,68) 100%);
background-image: -moz-linear-gradient(bottom, rgb(68,68,68) 0%, rgb(34,34,34) 54%, rgb(68,68,68) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(68,68,68) 0%, rgb(34,34,34) 54%, rgb(68,68,68) 100%);
background-image: -ms-linear-gradient(bottom, rgb(68,68,68) 0%, rgb(34,34,34) 54%, rgb(68,68,68) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(68,68,68)),
color-stop(0.54, rgb(34,34,34)),
color-stop(1, rgb(68,68,68))
);
}
.menu li.active a {
background-image: linear-gradient(bottom, rgb(138,25,25) 0%, rgb(186,52,52) 54%, rgb(138,25,25) 100%);
background-image: -o-linear-gradient(bottom, rgb(138,25,25) 0%, rgb(186,52,52) 54%, rgb(138,25,25) 100%);
background-image: -moz-linear-gradient(bottom, rgb(138,25,25) 0%, rgb(186,52,52) 54%, rgb(138,25,25) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(138,25,25) 0%, rgb(186,52,52) 54%, rgb(138,25,25) 100%);
background-image: -ms-linear-gradient(bottom, rgb(138,25,25) 0%, rgb(186,52,52) 54%, rgb(138,25,25) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(138,25,25)),
color-stop(0.54, rgb(186,52,52)),
color-stop(1, rgb(138,25,25))
);
}
.content {
float: left; clear: both;
background: #fff; padding: 10px 20px 20px; width: 400px;
}
这是小提琴: http : //jsfiddle.net/avkKL/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
添加webkit和moz前缀。 并非所有版本的Chrome / Firefox / Safari都支持非前缀属性。
您没有为.menu设置边框,并且由于内容而没有高度。 半径设置边界的半径,但是必须存在边界才能使其起作用。
例如,添加border:1px solid; height:24px
border:1px solid; height:24px
24像素到.menu。
具有border-radius
的元素的子元素总是会流离其父元素 。
您必须直接在要四舍五入的元素上设置border-radius
:
.menu li:first-child a { border-radius: 10px 0 0 10px }
.menu li:last-child a { border-radius: 0 10px 10px 0 }
这是小提琴: http : //jsfiddle.net/avkKL/1/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.