css不规则圆 |css3动画抖动效果

/* 实现内凹圆角 */
.border-radius{
border-radius: 50% / 50% 30% 70% 50%;
}
/* 实现波浪圆角 */
.border-radius{
border-radius: 0% 50% 50% 50% / 50% 50% 0% 0%;
transform:rotate(-45deg);
}
/* 实现橄榄球形圆 */
.border-radius{
border-radius: 50%/30% 50%;
}
/* 实现样式圆 */
.style-circle{
background: radial-gradient(circle at top left, white 70%, rgba(255, 255, 255, 0) 70%),
radial-gradient(circle at bottom right, white 70%, rgba(255, 255, 255, 0) 70%);
background-size: 50% 50%;
position: relative;
height: 200px;
width: 200px;
border-radius: 50%;
border: 1px solid #ccc;
}
.style-circle::before{
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 90px;
width: 90px;
background-color: #f00;
border-radius: 50%;
border: 1px solid #fff;
}

除了上述实现方式外，还有许多其他技巧可以用来实现不规则圆形，如对CSS的伪元素进行定位和CSS的transform属性等。大家可以根据实际需求来选择合适的方案。

总而言之，CSS不规则圆形不仅可以提升网页设计的趣味性，还能为网页设计带来更多的灵活性和创造性。相信随着更多优秀的网页设计师的加入，这个领域将会变得越来越创新和有趣。