CSS是一種用于網頁布局和樣式設置的語言,可以用來設置網站中的圖片。下面我們來看看如何使用CSS設置網站圖片。
/* 設置圖片樣式 */
img {
max-width: 100%; /* 圖片最大寬度為100% */
display: block; /* 設置為塊級元素,方便居中顯示 */
margin: 0 auto; /* 圖片居中顯示 */
}
/* 設置圖片邊框樣式 */
img.border {
border: 2px solid black; /* 邊框為2像素寬,黑色實線 */
border-radius: 5px; /* 邊框圓角半徑為5像素 */
}
/* 設置圖片陰影樣式 */
img.shadow {
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* 設置陰影為2像素橫向2像素縱向、5像素模糊半徑的黑色半透明陰影 */
}
在網頁中使用元素插入圖片,可以通過為該元素添加class屬性來設置相應的樣式。如下所示:
<img src="image.jpg" class="border shadow">
上面的代碼將插入名為"image.jpg"的圖片,并為其添加class屬性為"border shadow",從而使圖片在顯示時同時擁有邊框和陰影效果。
上一篇ajax如何處理程序設計
下一篇css如何設置邊框橢圓