在HTML中,img是用來嵌入圖片的標簽。但是,如果我們想讓圖片實現更多的效果,就可以使用CSS來控制標簽的樣式,并在預備松中添加特定的屬性。
img{ width: 50%; /*設置圖片寬度為父容器的一半*/ height: auto; /*自動調整圖片高度*/ border-radius: 50%; /*將圖片設置成圓形*/ box-shadow: 2px 2px 5px grey; /*給圖片添加邊框陰影*/ margin: 20px; /*在圖片周圍添加空白*/ }
通過上面的代碼可以看到,我們使用了如下屬性:
- width:控制元素寬度,這個屬性可以是固定值(例如500px)也可以是百分百的(例如50%)。
- height:控制元素的高度,這個屬性也可以是固定值也可以是百分百的。
- border-radius:控制元素的圓角程度,其中值的范圍為0到50%
- box-shadow:將元素添加一個陰影效果,用于提升圖片質感。
- margin:控制元素周圍的空白,可以實現與其他元素的空隙效果。
以上就是對于CSS中img屬性的簡單的介紹,通過了解img標簽的屬性與CSS的樣式,相信你的網頁設計將會得到更出眾的效果。