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