怎么做出透明边缘的照片?


box-shadow: 阴影填充

box-shadow: 10px 10px 5px #888888;

怎么做出透明边缘的照片?_第1张图片
image.png

box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow与v-shadow分别对应阴影相对原型的水平与垂直方向的偏移
blur 模糊距离
spread 阴影的尺寸
inset 内阴影


示例:
30px对应:透明晕由外向内的渗透程度(半径???)
10px对应惨白的边缘到圆的外边距:

怎么做出透明边缘的照片?_第2张图片
image.png
.cover {
            border-radius: 50%;
            margin:10px;
            width: 180px;
            height: 180px;
            overflow: hidden;
            box-shadow:0 0 30px 10px rgba(255,255,255,.7) inset;
        }


再加个边框:


怎么做出透明边缘的照片?_第3张图片
image.png
< img src="图片地址" style="border:2px;padding:10px;border-style:dotted;border-color:brown;">

你可能感兴趣的:(怎么做出透明边缘的照片?)