首页 > 代码库 > CSS-论css如何纯代码实现内凹圆角
CSS-论css如何纯代码实现内凹圆角
进行中。。。今天没时间了，明天继续研究。挂上来，怕自己忘了这个问题。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内凹圆角</title>
<style type="text/css">
.radius {
width: 100px;
height: 50px;
line-height: 50px;
display: block;
/*background-color: #f90;*/
border: 1px solid #4169E1;
/*color: white;*/
text-align: center;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
/*border-radius的兼容就不写了*/
background: -moz-radial-gradient();
background: -webkit-radial-gradient();
background: radial-gradient(at 50px 25px, red, red, blue, blue);
}
.egg {
display: block;
margin-top: 30px;
width: 100px;
height: 100px;
border-radius: 50px;
background: radial-gradient(at 35px 35px, #FFF, #CCC, #FFF);
background: -webkit-radial-gradient(35px 35px, #FFF, #CCC, #FFF);
}
.something-meaningful {
background: #655;
padding: .8em;
}
.something-meaningful> div {
background: tan;
border-radius: .8em;
padding: 1em;
}
</style>
</head>
<body>
<span class="radius">内凹</span>
<span class="egg"><a href="http://blog.csdn.net/playboyanta123/article/details/9303857">出处</a></span>
<div class="something-meaningful">
<div>
<a href="http://www.w3cplus.com/css3/css-secrets/inner-rounding.html">出处</a>
</div>
</div>
<a href="http://blog.csdn.net/playboyanta123/article/details/9303857">radial-gradient CSS3的蛋疼的径向渐变</a>
</body>
</html>
CSS-论css如何纯代码实现内凹圆角