CSS3是一種用于提高網(wǎng)頁樣式的技術(shù),它可以制作出卷角菜單來增加網(wǎng)頁的美觀程度。下面是使用CSS3制作卷角菜單的示例代碼:
<style> .menu { position: relative; width: 200px; height: 50px; background-color: #4CAF50; padding: 20px; color: white; border-top-right-radius: 50px; border-bottom-right-radius: 50px; } .menu:before { content: ''; display: block; position: absolute; top: 0px; right: -40px; width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 40px solid #4CAF50; } </style> <div class="menu"> <p>這是卷角菜單</p> </div>
代碼解釋:
首先,我們創(chuàng)建一個(gè)class為menu的div元素,然后設(shè)置它的屬性。我們?cè)O(shè)置div元素的position為relative,這樣我們便可設(shè)置偽元素的絕對(duì)位置。width和height分別是div元素的寬和高,background-color設(shè)為#4CAF50,padding設(shè)為20px并設(shè)置文字顏色為白色。
接下來,我們使偽元素:before顯現(xiàn),用于制作右下角的卷角效果。我們?cè)O(shè)置偽元素的display為block,這樣它就會(huì)成為一個(gè)塊元素。然后,我們用top和right屬性將它放在div元素的右上角。border-top和border-bottom屬性同時(shí)實(shí)現(xiàn)了三角形的上下部分,然后我們創(chuàng)建了一個(gè)綠色的三角形部分,然后把它放在div元素的右側(cè),使它在點(diǎn)擊或者鼠標(biāo)懸停時(shí)自然顯現(xiàn)。
這是一個(gè)非常簡(jiǎn)單的CSS3卷角菜單的示例。通過這個(gè)示例,您可以了解如何創(chuàng)建一個(gè)簡(jiǎn)單但功能強(qiáng)大的菜單。
上一篇html 主頁代碼放在哪
下一篇css3列表橫向排列