radial-gradient径向渐变尺寸控制下的波纹效果实例页面

回到相关文章 »

效果:

代码:

CSS代码:
.radial-gradient {
    width: 200px; height: 100px;
    background: red;
    position: relative;
}
.radial-gradient:after {
    content: '';
    position: absolute;
    height: 10px;
    left:0 ; right: 0;
    bottom: -10px;
    background: radial-gradient(20px 15px ellipse at top, red 10px, transparent 11px);
    background-size: 20px 10px;
}
                
HTML代码:
<div class="radial-gradient"></div>