CSS3是Cascading Style Sheets的縮寫,是一種常用的網(wǎng)頁設計語言。今天我們要介紹的是CSS3中的寬高一樣屬性。
div { width: 100px; height: 100px; background-color: blue; }
以上代碼可以設置一個div元素的寬度和高度都為100像素,并將其背景顏色設置為藍色。
div { width: 100px; height: 100px; background-color: blue; border-radius: 50%; }
再加上border-radius屬性,可以將div元素的邊框設置為圓形。
div { width: 100px; height: 100px; background-color: blue; border-radius: 50%; box-shadow: 5px 5px 5px grey; }
使用box-shadow屬性,可以給div元素添加陰影效果。
div { width: 100px; height: 100px; background-color: blue; border-radius: 50%; box-shadow: 5px 5px 5px grey; transition: all 0.3s ease-in-out; } div:hover { transform: scale(1.2); box-shadow: 10px 10px 10px grey; }
添加transition屬性和:hover偽類,可以使div元素在鼠標懸停時產(chǎn)生放大和陰影擴散的效果。
以上就是CSS3中寬高一樣屬性的介紹,希望對你有所幫助。