欣赏大作！为您点赞！
195400 发表于 2021-9-12 15:02
看看哪种效果与您的期望接近些？
<div id="blkxt" style="position:relative;width:1000px;height:720px; overflow:hidden; border-radius:50%;margin: 0px; -webkit-mask-image: radial-gradient(black , transparent 70%);-webkit-mask-size: cover;"></div>
<script type="text/javascript">
var doctxt = "%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20version%3D%221.1%22%20viewBox%3D%220%200%201000%20720%22%20width%3D%221000%22%20height%3D%22720%22%20x%3D%220%22%20y%3D%220%22%3E%0A%0A%3Cg%20transform%3D%22rotate%28-90%29%22%3E%0A%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//ss2.meipian.me/users/60902957/ae0e61d0-12ed-11ec-9b31-c77aebeb6ad4.jpg%22%20%0Awidth%3D%22720%22%20height%3D%2210871%22%20opacity%3D%270%27%20x%3D%22-720px%22%20y%3D%22-9871px%22%20preserveAspectRatio%3D%22none%22%3E%0A%3Cset%20attributename%3D%22opacity%22%20to%3D%221%22%20begin%3D%22p0.begin%22%20%3E%3C/set%3E%0A%3Canimate%20id%3D%27p0%27%20attributename%3D%22y%22%20from%3D%22-9871%22%20to%3D%221000%22%20begin%3D%220%3B%20p4.end%22%20dur%3D%22108.71s%22%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3Cset%20attributename%3D%22opacity%22%20to%3D%220%22%20begin%3D%22p0.begin+108.71%22%3E%3C/set%3E%0A%3C/image%3E%0A%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//ss2.meipian.me/users/60902957/7d655ee0-12ec-11ec-9b31-c77aebeb6ad4.jpg%22%0Awidth%3D%22720%22%20height%3D%2217271%22%20opacity%3D%270%27%20x%3D%22-720px%22%20y%3D%22-17271px%22%20preserveAspectRatio%3D%22none%22%3E%0A%3Cset%20attributename%3D%22opacity%22%20to%3D%221%22%20begin%3D%22p0.end-9.97%22%20%3E%3C/set%3E%0A%3Canimate%20id%3D%27p1%27%20attributename%3D%22y%22%20from%3D%22-17271%22%20to%3D%221000%22%20begin%3D%22p0.end-9.97%22%20dur%3D%22182.71%22%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3Cset%20attributename%3D%22opacity%22%20to%3D%220%22%20begin%3D%22p1.begin+182.71%22%3E%3C/set%3E%0A%3C/image%3E%0A%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//ss2.meipian.me/users/60902957/7d361180-12ec-11ec-9b31-c77aebeb6ad4.jpg%22%0Awidth%3D%22720%22%20height%3D%2212490%22%20opacity%3D%270%27%20x%3D%22-720px%22%20y%3D%22-12490px%22%20preserveAspectRatio%3D%22none%22%3E%0A%3Cset%20attributename%3D%22opacity%22%20to%3D%221%22%20begin%3D%22p1.end-9.97%22%20%3E%3C/set%3E%0A%3Canimate%20id%3D%27p2%27%20attributename%3D%22y%22%20from%3D%22-12490%22%20to%3D%221000%22%20begin%3D%22p1.end-9.97%22%20dur%3D%22134.9s%22%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3Cset%20attributename%3D%22opacity%22%20to%3D%220%22%20begin%3D%22p2.begin+134.9%22%3E%3C/set%3E%0A%3C/image%3E%0A%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//ss2.meipian.me/users/60902957/7d3eeb20-12ec-11ec-9b31-c77aebeb6ad4.jpg%22%0A%20width%3D%22720%22%20height%3D%2210694%22%20opacity%3D%270%27%20x%3D%22-720px%22%20y%3D%22-10694px%22%20preserveAspectRatio%3D%22none%22%3E%0A%3Cset%20attributename%3D%22opacity%22%20to%3D%221%22%20begin%3D%22p2.end-9.97%22%3E%3C/set%3E%0A%3Canimate%20id%3D%27p3%27%20attributename%3D%22y%22%20from%3D%22-10694%22%20to%3D%221000%22%20begin%3D%22p2.end-9.97%22%20dur%3D%22116.94s%22%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3Cset%20attributename%3D%22opacity%22%20to%3D%220%22%20begin%3D%22p3.begin+116.94%22%3E%3C/set%3E%0A%3C/image%3E%0A%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//ss2.meipian.me/users/60902957/ae0e61d0-12ed-11ec-9b31-c77aebeb6ad4.jpg%22%20%0Awidth%3D%22720%22%20height%3D%2210871%22%20opacity%3D%270%27%20x%3D%22-720px%22%20y%3D%22-10871px%22%20preserveAspectRatio%3D%22none%22%3E%0A%3Cset%20attributename%3D%22opacity%22%20to%3D%221%22%20begin%3D%22p3.end-9.97%22%3E%3C/set%3E%0A%3Canimate%20id%3D%27p4%27%20attributename%3D%22y%22%20from%3D%22-10871%22%20to%3D%22-9871%22%20begin%3D%22p3.end-9.97%22%20dur%3D%2210%22%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3Cset%20attributename%3D%22opacity%22%20to%3D%220%22%20begin%3D%22p4.begin+10%22%3E%3C/set%3E%0A%3C/image%3E%0A%0A%3C/g%3E%0A%0A%3Ctext%20x%3D%22360%22%20y%3D%22640%22%20style%3D%22fill%3Atransparent%3Bstroke%3Awhite%3Bopacity%3A0%3Bfont-size%3A66px%3B%22%3E%u897F%u5317%u7701%u533A%u98CE%u5149%u957F%u5377%0A%3Canimate%20attributename%3D%22opacity%22%20from%3D%220%22%20to%3D%221%22%20begin%3D%220%22%20dur%3D%221s%22%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3Canimate%20attributename%3D%22stroke%22%20from%3D%22white%22%20%20to%3D%22red%22%20begin%3D%22p0.begin+5%22%20dur%3D%275%27%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3Canimate%20attributename%3D%22stroke%22%20from%3D%22red%22%20%20%20%20to%3D%22green%22%20begin%3D%22p1.begin+5%22%20dur%3D%275%27%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3Canimate%20attributename%3D%22stroke%22%20from%3D%22green%22%20%20to%3D%22yellow%22%20begin%3D%22p2.begin+5%22%20dur%3D%275%27%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3Canimate%20attributename%3D%22stroke%22%20from%3D%22yellow%22%20to%3D%22blue%22%20begin%3D%22p3.begin+5%22%20dur%3D%275%27%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3Canimate%20attributename%3D%22stroke%22%20from%3D%22blue%22%20%20%20to%3D%22white%22%20begin%3D%22p4.begin+5%22%20dur%3D%275%27%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3Canimate%20attributename%3D%22opacity%22%20from%3D%221%22%20to%3D%220%22%20begin%3D%22p4.end%22%20dur%3D%222s%22%20fill%3D%22freeze%22%3E%3C/animate%3E%3C/text%3E%0A%0A%3Ctext%20x%3D%22100%22%20y%3D%22100%22%20style%3D%22fill%3A%23ffffff%3Bopacity%3A0%3Bfont-size%3A36px%3Bline-height%3A80px%3B%22%3E%u9655%u897F%0A%3Canimate%20attributename%3D%22opacity%22%20from%3D%220%22%20to%3D%221%22%20begin%3D%22p0.begin+5%22%20dur%3D%222s%22%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3Canimate%20attributename%3D%22opacity%22%20from%3D%221%22%20to%3D%220%22%20begin%3D%22p0.end-15%22%20dur%3D%222s%22%20fill%3D%22freeze%22%3E%3C/animate%3E%3C/text%3E%0A%0A%3Ctext%20x%3D%22100%22%20y%3D%22100%22%20style%3D%22fill%3A%23ffffff%3Bopacity%3A0%3Bfont-size%3A36px%3Bline-height%3A80px%3B%22%3E%u7518%u8083%0A%3Canimate%20attributename%3D%22opacity%22%20from%3D%220%22%20to%3D%221%22%20begin%3D%22p1.begin+5%22%20dur%3D%222s%22%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3Canimate%20attributename%3D%22opacity%22%20from%3D%221%22%20to%3D%220%22%20begin%3D%22p1.end-15%22%20dur%3D%222s%22%20fill%3D%22freeze%22%3E%3C/animate%3E%3C/text%3E%0A%0A%3Ctext%20x%3D%22100%22%20y%3D%22100%22%20style%3D%22fill%3A%23ffffff%3Bopacity%3A0%3Bfont-size%3A36px%3Bline-height%3A80px%3B%22%3E%u9752%u6D77%0A%3Canimate%20attributename%3D%22opacity%22%20from%3D%220%22%20to%3D%221%22%20begin%3D%22p2.begin+5%22%20dur%3D%222s%22%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3Canimate%20attributename%3D%22opacity%22%20from%3D%221%22%20to%3D%220%22%20begin%3D%22p2.end-15%22%20dur%3D%222s%22%20fill%3D%22freeze%22%3E%3C/animate%3E%3C/text%3E%0A%0A%3Ctext%20x%3D%22100%22%20y%3D%22100%22%20style%3D%22fill%3A%23ffffff%3Bopacity%3A0%3Bfont-size%3A36px%3Bline-height%3A80px%3B%22%3E%u65B0%u7586%0A%3Canimate%20attributename%3D%22opacity%22%20from%3D%220%22%20to%3D%221%22%20begin%3D%22p3.begin+5%22%20dur%3D%222s%22%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3Canimate%20attributename%3D%22opacity%22%20from%3D%221%22%20to%3D%220%22%20begin%3D%22p3.end-15%22%20dur%3D%222s%22%20fill%3D%22freeze%22%3E%3C/animate%3E%3C/text%3E%0A%0A%3C/svg%3E%0A";
var blk = document.querySelector('#blkxt');
blk.innerHTML = unescape(doctxt);
</script>
我喜欢这样的。:lol这样感觉有点似仙境:lol
寒冬残荷 发表于 2021-9-12 15:32
我喜欢这样的。这样感觉有点似仙境
:lol:lol:lol
195400 发表于 2021-9-12 15:02
看看哪种效果与您的期望接近些？
这样的效果似乎要好些（其实就是边框阴影效果），但能将阴影内陷，也许就能起到边缘羽化效果了。（我用 inset 似乎没效果）。
<br><br><br><br>
<style>
#eye {
border-radius: 50%;
width: 800px;
height: 500px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
overflow: hidden;
position: relative;
display: inline-block;
box-shadow: -0px -0px 16px 16px rgba(103, 80 ,80, 1);
}
</style>
<div id="eye">
<imgsrc="https://z3.ax1x.com/2021/08/17/f4XT0O.png"></div>
红枫 发表于 2021-9-12 16:00
这样的效果似乎要好些（其实就是边框阴影效果），但能将阴影内陷，也许就能起到边缘羽化效果了。（我用 ...
嗯， inset好像都跑到图片后面去了。用box-shadow过渡不太自然。
<img src="https://z3.ax1x.com/2021/08/17/f4XT0O.png" style="-webkit-mask-image: radial-gradient(black 35%, transparent 75%);-webkit-mask-size: cover;margin:24px auto;">
195400 发表于 2021-9-12 16:04
嗯， inset好像都跑到图片后面去了。用box-shadow过渡不太自然。
原来可以这样，是要调节的！
<br><br><br><br>
<div style="border-radius:50%;margin:12px auto;">
<img src="https://z3.ax1x.com/2021/08/17/f4XT0O.png" style="-webkit-mask-image: radial-gradient(black 55%, transparent 60%);-webkit-mask-size: cover;"></div>
红枫 发表于 2021-9-12 18:08
原来可以这样，是要调节的！
调节下得到满意的效果。
寒冬残荷 发表于 2021-9-12 15:32
我喜欢这样的。这样感觉有点似仙境
<div id="blkxl" style="position:relative;width:1000px;height:720px; overflow:hidden; border-radius:50%;margin: 0px; -webkit-mask-image: radial-gradient(black 65%, transparent 70%);-webkit-mask-size: cover;">
</div>
<script type="text/javascript">
var doctxt = "%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20version%3D%221.1%22%20viewBox%3D%220%200%201000%20720%22%20width%3D%221000%22%20height%3D%22720%22%20x%3D%220%22%20y%3D%220%22%3E%0A%0A%3Cg%20transform%3D%22rotate%28-90%29%22%3E%0A%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//ss2.meipian.me/users/60902957/ae0e61d0-12ed-11ec-9b31-c77aebeb6ad4.jpg%22%20%0Awidth%3D%22720%22%20height%3D%2210871%22%20opacity%3D%270%27%20x%3D%22-720px%22%20y%3D%22-9871px%22%20preserveAspectRatio%3D%22none%22%3E%0A%3Cset%20attributename%3D%22opacity%22%20to%3D%221%22%20begin%3D%22p0.begin%22%20%3E%3C/set%3E%0A%3Canimate%20id%3D%27p0%27%20attributename%3D%22y%22%20from%3D%22-9871%22%20to%3D%221000%22%20begin%3D%220%3B%20p4.end%22%20dur%3D%22108.71s%22%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3Cset%20attributename%3D%22opacity%22%20to%3D%220%22%20begin%3D%22p0.begin+108.71%22%3E%3C/set%3E%0A%3C/image%3E%0A%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//ss2.meipian.me/users/60902957/7d655ee0-12ec-11ec-9b31-c77aebeb6ad4.jpg%22%0Awidth%3D%22720%22%20height%3D%2217271%22%20opacity%3D%270%27%20x%3D%22-720px%22%20y%3D%22-17271px%22%20preserveAspectRatio%3D%22none%22%3E%0A%3Cset%20attributename%3D%22opacity%22%20to%3D%221%22%20begin%3D%22p0.end-9.97%22%20%3E%3C/set%3E%0A%3Canimate%20id%3D%27p1%27%20attributename%3D%22y%22%20from%3D%22-17271%22%20to%3D%221000%22%20begin%3D%22p0.end-9.97%22%20dur%3D%22182.71%22%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3Cset%20attributename%3D%22opacity%22%20to%3D%220%22%20begin%3D%22p1.begin+182.71%22%3E%3C/set%3E%0A%3C/image%3E%0A%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//ss2.meipian.me/users/60902957/7d361180-12ec-11ec-9b31-c77aebeb6ad4.jpg%22%0Awidth%3D%22720%22%20height%3D%2212490%22%20opacity%3D%270%27%20x%3D%22-720px%22%20y%3D%22-12490px%22%20preserveAspectRatio%3D%22none%22%3E%0A%3Cset%20attributename%3D%22opacity%22%20to%3D%221%22%20begin%3D%22p1.end-9.97%22%20%3E%3C/set%3E%0A%3Canimate%20id%3D%27p2%27%20attributename%3D%22y%22%20from%3D%22-12490%22%20to%3D%221000%22%20begin%3D%22p1.end-9.97%22%20dur%3D%22134.9s%22%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3Cset%20attributename%3D%22opacity%22%20to%3D%220%22%20begin%3D%22p2.begin+134.9%22%3E%3C/set%3E%0A%3C/image%3E%0A%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//ss2.meipian.me/users/60902957/7d3eeb20-12ec-11ec-9b31-c77aebeb6ad4.jpg%22%0A%20width%3D%22720%22%20height%3D%2210694%22%20opacity%3D%270%27%20x%3D%22-720px%22%20y%3D%22-10694px%22%20preserveAspectRatio%3D%22none%22%3E%0A%3Cset%20attributename%3D%22opacity%22%20to%3D%221%22%20begin%3D%22p2.end-9.97%22%3E%3C/set%3E%0A%3Canimate%20id%3D%27p3%27%20attributename%3D%22y%22%20from%3D%22-10694%22%20to%3D%221000%22%20begin%3D%22p2.end-9.97%22%20dur%3D%22116.94s%22%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3Cset%20attributename%3D%22opacity%22%20to%3D%220%22%20begin%3D%22p3.begin+116.94%22%3E%3C/set%3E%0A%3C/image%3E%0A%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//ss2.meipian.me/users/60902957/ae0e61d0-12ed-11ec-9b31-c77aebeb6ad4.jpg%22%20%0Awidth%3D%22720%22%20height%3D%2210871%22%20opacity%3D%270%27%20x%3D%22-720px%22%20y%3D%22-10871px%22%20preserveAspectRatio%3D%22none%22%3E%0A%3Cset%20attributename%3D%22opacity%22%20to%3D%221%22%20begin%3D%22p3.end-9.97%22%3E%3C/set%3E%0A%3Canimate%20id%3D%27p4%27%20attributename%3D%22y%22%20from%3D%22-10871%22%20to%3D%22-9871%22%20begin%3D%22p3.end-9.97%22%20dur%3D%2210%22%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3Cset%20attributename%3D%22opacity%22%20to%3D%220%22%20begin%3D%22p4.begin+10%22%3E%3C/set%3E%0A%3C/image%3E%0A%0A%3C/g%3E%0A%0A%3Ctext%20x%3D%22250%22%20y%3D%22640%22%20style%3D%22fill%3A%23ffff00%3Bopacity%3A0%3Bfont-size%3A66px%3B%22%3E%u897F%u5317%u7701%u533A%u98CE%u5149%u957F%u5377%0A%3Canimate%20attributename%3D%22opacity%22%20from%3D%220%22%20to%3D%221%22%20begin%3D%220%22%20dur%3D%221s%22%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3Canimate%20attributename%3D%22stroke%22%20from%3D%22white%22%20%20to%3D%22red%22%20begin%3D%22p0.begin+5%22%20dur%3D%275%27%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3Canimate%20attributename%3D%22stroke%22%20from%3D%22red%22%20%20%20%20to%3D%22green%22%20begin%3D%22p1.begin+5%22%20dur%3D%275%27%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3Canimate%20attributename%3D%22stroke%22%20from%3D%22green%22%20%20to%3D%22yellow%22%20begin%3D%22p2.begin+5%22%20dur%3D%275%27%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3Canimate%20attributename%3D%22stroke%22%20from%3D%22yellow%22%20to%3D%22blue%22%20begin%3D%22p3.begin+5%22%20dur%3D%275%27%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3Canimate%20attributename%3D%22stroke%22%20from%3D%22blue%22%20%20%20to%3D%22white%22%20begin%3D%22p4.begin+5%22%20dur%3D%275%27%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3Canimate%20attributename%3D%22opacity%22%20from%3D%221%22%20to%3D%220%22%20begin%3D%22p4.end%22%20dur%3D%222s%22%20fill%3D%22freeze%22%3E%3C/animate%3E%3C/text%3E%0A%0A%3Ctext%20x%3D%22460%22%20y%3D%2280%22%20style%3D%22fill%3A%23ffffff%3Bopacity%3A0%3Bfont-size%3A36px%3Bline-height%3A80px%3B%22%3E%u9655%u897F%0A%3Canimate%20attributename%3D%22opacity%22%20from%3D%220%22%20to%3D%221%22%20begin%3D%22p0.begin+5%22%20dur%3D%222s%22%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3Canimate%20attributename%3D%22opacity%22%20from%3D%221%22%20to%3D%220%22%20begin%3D%22p0.end-15%22%20dur%3D%222s%22%20fill%3D%22freeze%22%3E%3C/animate%3E%3C/text%3E%0A%0A%3Ctext%20x%3D%22460%22%20y%3D%2280%22%20style%3D%22fill%3A%23ffffff%3Bopacity%3A0%3Bfont-size%3A36px%3Bline-height%3A80px%3B%22%3E%u7518%u8083%0A%3Canimate%20attributename%3D%22opacity%22%20from%3D%220%22%20to%3D%221%22%20begin%3D%22p1.begin+5%22%20dur%3D%222s%22%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3Canimate%20attributename%3D%22opacity%22%20from%3D%221%22%20to%3D%220%22%20begin%3D%22p1.end-15%22%20dur%3D%222s%22%20fill%3D%22freeze%22%3E%3C/animate%3E%3C/text%3E%0A%0A%3Ctext%20x%3D%22460%22%20y%3D%2280%22%20style%3D%22fill%3A%23ffffff%3Bopacity%3A0%3Bfont-size%3A36px%3Bline-height%3A80px%3B%22%3E%u9752%u6D77%0A%3Canimate%20attributename%3D%22opacity%22%20from%3D%220%22%20to%3D%221%22%20begin%3D%22p2.begin+5%22%20dur%3D%222s%22%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3Canimate%20attributename%3D%22opacity%22%20from%3D%221%22%20to%3D%220%22%20begin%3D%22p2.end-15%22%20dur%3D%222s%22%20fill%3D%22freeze%22%3E%3C/animate%3E%3C/text%3E%0A%0A%3Ctext%20x%3D%22460%22%20y%3D%2280%22%20style%3D%22fill%3A%23ffffff%3Bopacity%3A0%3Bfont-size%3A36px%3Bline-height%3A80px%3B%22%3E%u65B0%u7586%0A%3Canimate%20attributename%3D%22opacity%22%20from%3D%220%22%20to%3D%221%22%20begin%3D%22p3.begin+5%22%20dur%3D%222s%22%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3Canimate%20attributename%3D%22opacity%22%20from%3D%221%22%20to%3D%220%22%20begin%3D%22p3.end-15%22%20dur%3D%222s%22%20fill%3D%22freeze%22%3E%3C/animate%3E%3C/text%3E%0A%0A%3C/svg%3E";
var blk = document.querySelector('#blkxl');
blk.innerHTML = unescape(doctxt);
</script>
第一个是：-webkit-mask-image: radial-gradient(black, transparent 70%);
第二个是：-webkit-mask-image: radial-gradient(black 65%, transparent 70%);
加了个65%，就没有云里雾里的仙境感觉了:lol