這次帶給大家用css3做出氣球圖片樣式,用css3做出氣球圖片樣式的注意事項有哪些,下面就是實戰案例,一起來看一下。
氣球效果圖:

html:
css:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | .balloon{
width: 160px;
height: 160px;
background: #faf9f9;
border-radius: 50% 50% 25% 50%;
transform: rotate(45deg);
box-shadow: -8px -8px 80px -8px #873940 inset;
}
.balloon::after{
position: absolute;
bottom: 5px;
right: 5px;
content: "" ;
display: block;
border: 8px solid transparent;
border-right-color: #873940;
transform: rotate(45deg);
border-radius: 50%;
}
|
登入後複製
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
偽元素::before與::after使用詳解
css3的pointer-events使用詳解
以上是用css3做出氣球圖片樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章!