CSS技巧之——如何设置葫芦的样式

/* 猫头鹰 */
.owl {
width: 100px;
height: 120px;
border: 5px solid #000;
border-radius: 50% 50% 50% 0;
position: relative;
background: #d1c7ac;
}
.owl:before,
.owl:after {
content: "";
position: absolute;
background: #000;
}
.owl:before {
width: 25px;
height: 35px;
border-radius: 50% 0 0 0;
top: -20px;
left: 15px;
}
.owl:after {
width: 15px;
height: 20px;
border-radius: 50% 0 0 50%;
top: 10px;
left: 25px;
transform: rotate(-45deg);
}
/* 葫芦 */
.gourd {
width: 160px;
height: 180px;
border: 5px solid #000;
border-radius: 50% 50% 0 0;
position: relative;
margin-top: 50px;
margin-left: 50px;
background: #ffa500;
}
.gourd:before {
content: "";
width: 150px;
height: 150px;
border: 5px solid #000;
border-radius: 50%;
position: absolute;
background: #fff;
top: -120px;
left: -50px;
}

以上是一个基本的葫芦样式，其中包括了猫头鹰的绘制，具体可以根据自己的需求进行修改。

代码中使用了border-radius属性，主要是为了实现圆角效果，可以这样来记忆：

border-radius: 上左 下左 下右 上右;

这样设置的话，上左和上右就是上方两个点的圆角，下左和下右就是下方两个点的圆角，这样就能实现葫芦的形状了。