Home > Developer > Web Develop
In progress ... There is no time today, continue to study tomorrow. Hang up, afraid I forget this problem.
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> Inner concave fillet </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 compatibility will not write * *
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>
<body>
<span class= "radius" > Inner recess </span>
<span class= "egg" ><a href= "http://blog.csdn.net/playboyanta123/article/details/9303857" > Provenance </a> </span>
<div class= "Something-meaningful" >
<div>
<a href= "http://www.w3cplus.com/css3/css-secrets/inner-rounding.html" > Provenance </a>
</div>
</div>
<a href= "http://blog.csdn.net/playboyanta123/article/details/9303857" >radial-gradient CSS3 's egg-ache radial gradient </a >
</body>
css-on CSS How to achieve inner concave fillet with pure code
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
