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%;}