css 圆凹角_这种凹角用css3如何实现

css

#a {

width: 150px;

height: 300px;

background: radial-gradient(circle at top left,

transparent 15px, #e6e4b7 0) top left,

radial-gradient(circle at top right,

transparent 15px, #e6e4b7 0) top right,

radial-gradient(circle at bottom right,

transparent 15px, #e6e4b7 0) bottom right,

radial-gradient(circle at bottom left,

transparent 15px, #e6e4b7 0) bottom left;

background-size: 50% 50%;

background-repeat: no-repeat;

padding: 20px 24px 22px 20px;

}

#b {

display: block;

background: radial-gradient(circle at top left,

transparent 15px, red 0) top left,

radial-gradient(circle at top right,

transparent 15px, red 0) top right,

radial-gradient(circle at bottom right,

transparent 15px, red 0) bottom right,

radial-gradient(circle at bottom left,

transparent 15px, red 0) bottom left;

background-size: 50% 50%;

background-repeat: no-repeat;

width:100%;

height: 100%;

padding: 2px;

}

#b:before {

content: "";

width: 100%;

height: 100%;

display: block;

background: radial-gradient(circle at top left,

transparent 15px, #e6e4b7 0) top left,

radial-gradient(circle at top right,

transparent 15px, #e6e4b7 0) top right,

radial-gradient(circle at bottom right,

transparent 15px, #e6e4b7 0) bottom right,

radial-gradient(circle at bottom left,

transparent 15px, #e6e4b7 0) bottom left;

background-size: 50% 50%;

background-repeat: no-repeat;

}