照片的處理一直是網頁設計中必不可少的一環,而CSS3引入的圓角內凹效果讓我們的圖片處理更加出色。下面介紹一下如何使用CSS3實現照片圓角內凹效果。
首先,我們需要在HTML中引入CSS樣式表:
<head> <link rel="stylesheet" type="text/css" href="style.css"> </head>
然后在CSS樣式表中定義類名為.rounded-img
的樣式:
.rounded-img { border-radius: 10px; box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5); }
其中border-radius
屬性定義的是圖片的圓角半徑,這里設定為 10px。box-shadow
屬性中的inset
值表示內部陰影,而后面的數值則分別對應陰影的偏移、模糊度和顏色。
最后,我們在HTML中使用剛才定義的類名來給圖片添加樣式:
<img src="photo1.jpg" class="rounded-img">
至此,我們搞定了照片圓角內凹效果的代碼編寫。如需調整效果,可以通過調整border-radius
和box-shadow
屬性的值來達到所需的效果。
上一篇照片墻重疊css
下一篇然后在 css移動圖像