今天我們來學習一下關于如何使用CSS讓圖片更美觀的技巧。下面將分五個方面來介紹代碼實現。
第一種效果是給圖片添加邊框。這里我們使用border屬性,可選的值有邊框的寬度、樣式、顏色,還可以使用border-radius來實現圓角邊框效果。代碼如下:
img { border: 2px solid #ccc; border-radius: 5px; }第二種效果是給圖片添加陰影。這里我們使用box-shadow屬性,可選的值有陰影的水平和垂直位移、模糊程度、顏色。代碼如下:
img{ box-shadow: 10px 10px 5px #ccc; }第三種效果是給圖片添加反色。我們使用filter屬性,對圖片進行反轉色。代碼如下:
img{ filter: invert(1); }第四種效果是圖片變成灰色。同樣使用filter屬性,將圖片轉為灰色,代碼如下:
img{ filter: grayscale(1); }第五種效果是鼠標懸停時的效果??梢詾閳D片設置:hover樣式來實現。代碼如下:
img:hover{ opacity: 0.8; }以上就是五種常見的CSS圖片效果,大家可以將其應用到自己的項目當中,讓圖片更加生動、美觀,提升頁面的視覺效果。
上一篇圖標顏色 漸變 css
下一篇圖片上方半透明文字css