設(shè)置圖片CSS圓角和遮罩

在CSS中，我們可以使用border-radius屬性來設(shè)置圖片的圓角，這個(gè)屬性可以接收一個(gè)值，該值可以是像素、百分比或者em單位，如果我們想要將圖片的四個(gè)角都設(shè)置為20像素的圓角，我們可以這樣寫：

img {
  border-radius: 20px;
}

如果想要設(shè)置不同大小的圓角，我們可以分別指定四個(gè)角的半徑，

img {
  border-radius: 20px 40px 30px 50px;
}

這樣，圖片的上右角半徑為20像素，下右角半徑為40像素，上左角半徑為30像素，下左角半徑為50像素。

***于遮罩，CSS中并沒有直接的遮罩屬性，我們可以通過使用偽元素或者背景圖像來實(shí)現(xiàn)遮罩效果，我們可以使用偽元素來創(chuàng)建一個(gè)覆蓋在圖片上的遮罩層：

img::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}

這樣，圖片上就會(huì)有一個(gè)半透明的黑色遮罩層，我們可以改變r(jià)gba的顏色值來調(diào)整遮罩的顏色和透明度，也可以通過改變z-index來調(diào)整遮罩層的堆疊順序。