在 CSS 中添加模糊边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26853514/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding a blurred border in CSS
提问by OneSolitaryNoob
Using CSS, how can I add a border of 100px to all sides of an image that is made up of the perimeter pixels stretched out and blurred? e.g. the border to the left of the image is just columns 1-3 stretched horizontally and blurred together?
使用 CSS，如何向由拉伸和模糊的周边像素组成的图像的所有边添加 100 像素的边框？例如，图像左侧的边框只是水平拉伸并模糊在一起的第 1-3 列？
I see other posts explaining how to keep the edges sharp but blur the center.
我看到其他帖子解释了如何保持边缘清晰但中心模糊。
回答by Wavemaster
If you want to blur an image to the edges andif you have one single background-colorthen you could use the box-shadowwith insetto archive your desired behavior:
如果您想将图像模糊到边缘，并且您有一个图像，background-color那么您可以使用box-shadowwithinset来存档您想要的行为：
box-shadow: inset 0px 0px 40px 40px #DBA632;
where #DBA632is your background-color.
#DBA632你的背景颜色在哪里。
See this snippet:
看到这个片段：
body {
background: #DBA632;
}
div {
background: url('https://placekitten.com/500/300');
width: 500px;
height: 300px;
margin: 50px;
box-shadow: inset 0px 0px 40px 40px #DBA632; /* change to alter the effect*/
}<div></div>Old answer:
旧答案：
Are you looking for something like this?
你在寻找这样的东西吗？
box-shadow: 0px 0px 40px 40px #000000;
The first two values set the offset of the shadow, the third value is the amount of blur and the last value is the spread of the shadow.
前两个值设置阴影的偏移量，第三个值是模糊量，最后一个值是阴影的扩散。
You can play with those values to see how they change the effect: DEMO
您可以使用这些值来查看它们如何改变效果：DEMO
回答by Michael
box-shadowis what you want. I put some links below that will teach you everything you need to know about it:
box-shadow是你想要的。我在下面放了一些链接，这些链接会教您有关它的所有信息：
http://www.css3.info/preview/box-shadow/
http://www.css3.info/preview/box-shadow/
