CSS是HTML的重要组成部分,它允许我们控制网页的外观和样式。在这篇文章中,我们将讨论如何使用CSS画水滴形。
.drop { width: 100px; height: 100px; background: #428bca; border-radius: 50%; position: relative; } .drop:before { content: ""; display: block; width: 80px; height: 80px; background: #fff; border-radius: 50%; position: absolute; top: 10px; left: 10px; } .drop:after { content: ""; display: block; width: 60px; height: 60px; background: #428bca; border-radius: 50%; position: absolute; top: 20px; left: 20px; }
我们首先创建了一个class为drop的元素,然后设置它的宽度和高度为100px,并且使用border-radius属性将其变为一个圆形。接下来我们使用:before伪类,画出了水滴形上面的白色圆形,并且给定了相应的样式来定位它。最后我们再使用:after伪类,画出了水滴形下面的蓝色圆形,同样给定了相应的样式来定位它。
通过组合这些元素,我们最终得到了一个漂亮的水滴形。当然,你还可以通过调整样式来改变水滴的颜色和大小,以满足你的需求。