用css3做出氣球圖片樣式

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

氣球：

html:

<p class="ballon"></p>

css:

.balloon{         width: 160px;         height: 160px;         background: #faf9f9;          /*css3 圓角屬性*/          border-radius: 50% 50% 25% 50%;           /*順時針旋轉45度*/           transform: rotate(45deg);           /*盒子陰影 x位移 y位移 羽化 半徑 顏色 */           box-shadow: -8px -8px 80px -8px #873940 inset;}/*after  before 虛擬元素*/.balloon::after{           position: absolute;            bottom: 5px;            right: 5px;            content:"";             display: block;             /*width: 18px;             height: 18px;*/             /*background: #873940;*/            /*transform: rotate(45deg);*/             border: 8px solid transparent;             border-right-color: #873940;             transform: rotate(45deg);             border-radius: 50%;}

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

虛擬元素::before與::after使用詳解

css3的pointer-events使用詳解