CSS是用來美化網頁的重要工具，常被用來控制網頁各種元素的顏色、大小、位置等。今天我們來學習如何使用CSS實現圖片邊緣透明。

/*CSS代碼*/
img{
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
/*設置圓角邊框*/
border: 5px solid rgba(0,0,0,0);
/*設置邊框大小和顏色*/
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
/*設置圖片陰影效果*/
}

代碼中，我們使用了border-radius屬性來設置圓角邊框，同時采用rgba(0,0,0,0)的顏色，這表示邊框不顯示，也就是透明。接著，我們使用box-shadow屬性給圖片添加了陰影效果。這兩個屬性配合起來，就可以實現圖片邊緣透明的效果了。

除了上述方法以外，還有一種方法也可以實現圖片邊緣透明。我們可以給圖片添加一個遮罩層，然后設置遮罩層的透明度。代碼如下：

/*CSS代碼*/
.img-wrapper{
display: inline-block;
position: relative;
overflow: hidden;
}
.img-wrapper img{
display: block;
max-width: 100%;
}
.img-wrapper:after{
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
/*設置漸變*/
pointer-events: none;
/*設置不響應鼠標事件*/
}

使用這種方法，我們必須要將圖片包裹在一個父級元素中，然后給父級元素設置position:relative和overflow:hidden，將圖片設置為block，并設置max-width:100%讓其適應父級元素。最后，在父級元素中添加:before或:after，通過background屬性和漸變效果來設置遮罩層的透明度。這樣就可以實現圖片邊緣透明的效果了。