CSS3中的3D圓形提供了更多的樣式選擇和排版方式,使網頁設計更加豐富和生動。使用下面的代碼可以創建一個圓形:
.circle{ width: 150px; height: 150px; border-radius: 50%; background-color: red; }
在這個CSS代碼中,border-radius使用50%的數值,可以將正方形的元素轉變成圓形,并且添加了紅色的背景色。如果想要創建3D圓形,則可以使用以下的代碼:
.circle{ width: 150px; height: 150px; border-radius: 50%; background-color: red; transform: translateZ(-25px); box-shadow: 0 0 15px 5px rgba(0,0,0,0.5); }
在這個CSS代碼中,添加了兩個新的屬性,transform和box-shadow。transform屬性使用translateZ(-25px)使圓形立體化,box-shadow屬性添加了黑色陰影,使圓形更加立體化。
除了圓形,還可以使用CSS3創建其他3D的形狀和樣式,這為網頁設計帶來了更多的創意和表現力。
上一篇css36邊型