CSS3是前端開發中不可或缺的一項技術,它的出現極大地豐富了我們的設計效果。長形燈泡是其中一個熱門的設計元素,可以用來裝飾網頁的頭部、頁腳、背景等。
/* 長形燈泡的基本樣式 */ .long-bulb { position: relative; width: 60px; height: 120px; background-color: #e7f5fe; border-radius: 60px; box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.25); } /* 燈泡頭的樣式 */ .long-bulb::before { content: ""; position: absolute; top: -20px; left: 0; width: 0; height: 0; border-style: solid; border-width: 0 30px 20px 30px; border-color: transparent transparent #e7f5fe transparent; } /* 燈泡的線條樣式 */ .long-bulb::after { content: ""; position: absolute; top: 40px; left: 0; width: 60px; height: 40px; background-color: #fdfbfb; border-radius: 10px; }
以上是長形燈泡的基本樣式實現,可以通過調整樣式來改變燈泡的顏色、大小等效果。希望這篇文章能對你理解和使用CSS3有所幫助。
上一篇css3 難嗎