[分享]css3图片边缘透明

CSS3是当前网页开发必不可少的技术之一，包含很多实用的功能，比如图片边缘透明。

.img {
  border: 10px solid #000;
  border-radius: 50%;
  padding: 30px;
  background-color: #fff;
  opacity: 0.5;
  /* 添加以下两行代码 */
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
} 

上面是一个添加了圆形边框、圆形内边距和背景颜色的圆形图片，现在我们想让它边缘透明，就可以通过添加两行CSS代码来实现。

首先是-webkit-background-clip属性，它指定了一个元素的背景的哪些部分需要被裁剪，这里我们将其值设置为padding-box，表示要将背景裁剪到内边距。

然后是background-clip属性，它具有相同的功能，但不需要添加浏览器前缀。将其值也设置为padding-box，这将确保背景透明度只应用于内边距以内的区域。

现在，我们可以通过修改透明度属性从0到1来调整边缘透明度。

.img:hover {
  opacity: 1;
} 

这样就有一个漂亮的圆形图片了，同时也能在它的边缘创建透明效果。