CSS中如何設(shè)置圖片
在網(wǎng)頁設(shè)計中,圖片是必不可少的元素之一。CSS提供了很多設(shè)置圖片樣式的屬性,其中包括:圖片大小、位置、對齊方式、邊框、陰影等。
設(shè)置圖片大小
設(shè)置圖片大小的屬性是width和height,可以設(shè)置具體的像素值或百分比。例如:
pre{
width: 200px;
height: 300px;
}
可以將圖片的寬度設(shè)置為200像素,高度設(shè)置為300像素。
設(shè)置圖片位置
設(shè)置圖片位置的屬性是float,可以設(shè)置圖片左浮動、右浮動或無浮動。例如:
pre{
float: left;
}
可以將圖片左浮動,文字將會環(huán)繞在圖片周圍。
設(shè)置圖片對齊方式
設(shè)置圖片對齊方式的屬性是text-align,可以設(shè)置圖片水平對齊方式。例如:
pre{
text-align: center;
}
可以將圖片水平居中對齊。
設(shè)置圖片邊框
設(shè)置圖片邊框的屬性包括border-width、border-style、border-color。例如:
pre{
border: 1px solid black;
}
可以給圖片加上1像素的黑色實線邊框。
設(shè)置圖片陰影
設(shè)置圖片陰影的屬性是box-shadow,可以給圖片添加陰影效果。例如:
pre{
box-shadow: 1px 1px 10px #888888;
}
可以給圖片添加一層1像素的偏移量和10像素的模糊效果的陰影。
總體來說,設(shè)置圖片樣式的屬性很多,可以根據(jù)具體的需求來選擇使用。在使用時需要注意圖片文件路徑是否正確,否則無法正確顯示圖片。
上一篇css中怎樣劇終顯示
下一篇index php文件