你知道怎么利用css实现内凹圆角么(2)-木庄网络博客

当前第2页返回上一页

/* 左上 */
.raidal1 {
    height: 100px;
    width: 100px;
    background:radial-gradient(200px at left top,transparent 50%,blue 50%);
}
 
/* 右上 */
.raidal2 {
    height: 100px;
    width: 100px;
    background:radial-gradient(200px at right top,transparent 50%,blue 50%);
}
 
/* 右下 */
.raidal3 {
    height: 100px;
    width: 100px;
    background:radial-gradient(200px at right bottom,transparent 50%,blue 50%);
}
 
/* 左下 */
.raidal4 {
    height: 100px;
    width: 100px;
    background:radial-gradient(200px at left bottom,transparent 50%,blue 50%);
}
 
<div class='raidal1'></div>
<div class='raidal2'></div>
<div class='raidal3'></div>
<div class='raidal4'></div>

同样，不想这么圆角，也是可以椭圆的，半径设两个参数, 就是椭圆。

径向渐变有很多参数大家可以自己再尝试调整，可以出现各种奇怪的形状，这里就不演示了。相对来说，内凹圆角就够用了

/* 左上 */
.ellipse {
    height: 100px;
    width: 100px;
    background:radial-gradient(200px 300px at left top,transparent 50%,blue 50%);
}
 
<div class='ellipse'></div>