border-radius 八值写法做出水滴形卡片,圆角的新玩法
← 返回 卡片 类特效列表上方为纯 CSS 实时演示,直接将鼠标移上去 / 点击感受效果
.fx .drop{width:210px;height:210px;margin:30px auto;background:linear-gradient(135deg,#4a9eff,#57ab5a);border-radius:28% 72% 64% 36% / 42% 38% 62% 58%;animation:kfx-drop 6s ease-in-out infinite alternate;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}
@keyframes kfx-drop{to{border-radius:64% 36% 28% 72% / 58% 62% 38% 42%}}<div class="fx">
<div class="drop">水滴形</div>
</div>