问题
There're border-radius property to round box corners. But how to round corners inside block, like subtracting circle?
Like here: http://malsup.com/jquery/corner/
Curl settings
回答1:
This can be done by adding four circular "gradient" background images on top of the normal background image, each positioned at the appropriate corner. There's an example on Lea Verou's blog. From that I've extracted a JSFiddle; the key code is
.round {
background:
radial-gradient(circle at 0 100%, rgba(204,0,0,0) 14px, #c00 15px),
radial-gradient(circle at 100% 100%, rgba(204,0,0,0) 14px, #c00 15px),
radial-gradient(circle at 100% 0, rgba(204,0,0,0) 14px, #c00 15px),
radial-gradient(circle at 0 0, rgba(204,0,0,0) 14px, #c00 15px);
background-position: bottom left, bottom right, top right, top left;
background-size: 50% 50%;
background-repeat: no-repeat;
padding: 14px;
}
回答2:
No, there isn't a way to do it with pure CSS as far as I know. It's not even simple to do it with JavaScript or jQuery.
As far as I know, the jQuery plugin you linked is the one that works best for you, especially since you want a cross-browser solution, which advanced CSS3 isn't there yet, and it is the one you should use.
回答3:
There is one way to do it with pure CSS:
CSS code:
div {
height: 200px;
background: red;
position: relative;
width:200px;
}
div:after {
content: '';
position: absolute;
top: -20px; right: -20px;
border-top: 50px solid white;
border-left: 50px solid white;
width: 0;
background:#fff;
border-radius:100px;
}
div:before {
content: '';
position: absolute;
top: -20px; left: -20px;
border-top: 50px solid white;
border-left: 50px solid white;
width: 0;
background:#fff;
border-radius:100px;
}
HTML:
<div></div>
Here is an example:
来源：https://stackoverflow.com/questions/18518179/css-how-to-round-box-corners-inside