CSS技巧之——如何設(shè)置葫蘆的樣式

/* 貓頭鷹 */
.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;
}

以上是一個基本的葫蘆樣式，其中包括了貓頭鷹的繪制，具體可以根據(jù)自己的需求進行修改。

代碼中使用了border-radius屬性，主要是為了實現(xiàn)圓角效果，可以這樣來記憶：

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

這樣設(shè)置的話，上左和上右就是上方兩個點的圓角，下左和下右就是下方兩個點的圓角，這樣就能實現(xiàn)葫蘆的形狀了。