在 CSS 3 中创建模糊边框

Creating a Fuzzy Border in CSS 3

提问by Kirk Ouimet

Here's my source image:

这是我的源图片：

And my source image zoomed in:

我的源图像放大了：

Any thoughts on how to accomplish this with only CSS3? Notice the slight bleed upwards into the element.

关于如何仅使用 CSS3 实现这一点的任何想法？注意向上进入元素的轻微出血。

回答by James Kyle

Update:I've removed the vendor prefixes, since almost every browser that supports these properties do not need them. Dropping them is considered a best practice at this point.

See Caniuse page for border-radiusand box-shadow.

更新：我删除了供应商前缀，因为几乎每个支持这些属性的浏览器都不需要它们。此时删除它们被认为是最佳实践。

为见Caniuse页border-radius和box-shadow。

the best (and only) way to do this is to use multiple box-shadows:

最好的（也是唯一的）方法是使用多个 box-shadows：

element {
    box-shadow: rgba(0,0,0,0.2) 0px 2px 3px, inset rgba(0,0,0,0.2) 0px -1px 2px;
    border-radius: 20px;
}

box-shadowworks like this:

box-shadow像这样工作：

box-shadow: [direction (inset)] [color] [Horizontal Distance] [Vertical Distance] [size]; 

border-radiusworks like this:

border-radius像这样工作：

border-radius: [size];

/*or*/

border-radius: [topleft/bottomright size] [topright/bottomleft size];

/*or*/

border-radius: [topleft] [topright] [bottomright] [bottomleft];

you can specify the Height an length of the curve like this:

您可以像这样指定曲线的高度和长度：

border-radius: [tl-width] [tr-width] [br-width] [bl-width] / [tl-height] [tr-height] [br-height] [bl-height];

回答by Kyle

This is actually done with two CSS3 box-shadows.

这实际上是用两个 CSS3 完成box-shadow的。

CSS:

CSS：

#fuzz
{
    height: 100px;
    width: 100px;
    border-radius: 5px;
    border: 1px solid #333;
    box-shadow: 0px 0px 5px #333, inset 0px 0px 2px #333;
}

You can see it in action when i get back to real computer to edit the fiddle :-) (using my tablet now)

当我回到真正的电脑上编辑小提琴时，你可以看到它的作用:-)（现在使用我的平板电脑）

Obviously change the colors to your taste :)

显然可以根据您的口味更改颜色:)

回答by methodofaction

It's just using two box shadows, one inset and the other outset, i.e:

它只是使用两个框阴影，一个插入，另一个开始，即：

.box {
  width: 100px;
  height: 100px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.3), inset 0 -3px 3px rgba(0,0,0,0.1);
  border: solid #ccc 1px;
  border-radius: 10px;
  margin: 50px 0 0 50px;
}

See it here: http://jsfiddle.net/WYLJv/

在这里看到它：http: //jsfiddle.net/WYLJv/

回答by Justin Thomas

Look at css3 property border-radius. It has options for x and y offset color and the blur radius. In your case a greyish color no offset and blur if 4px ought to work.

看看css3属性border-radius。它有 x 和 y 偏移颜色和模糊半径的选项。在您的情况下，如果 4px 应该工作，则灰色没有偏移和模糊。

回答by JayC

I'm a bit late but, yes, use border radius and box-shadow(s) and you should be good to go.

我有点晚了，但是，是的，使用边框半径和框阴影，你应该很高兴。

.block {
  border-radius:6px;
  box-shadow: inset 0px 0px 2px 2px #aaa, 3px 3px 5px 0px #eee;
}

回答by user3817794

Try adding a border-radius and a text-shadow in your css.

尝试在您的 css 中添加一个边框半径和一个文本阴影。

.box {
    border-radius:20px;
    text-shadow:2px 2px black;
}

Hope this helps.

希望这可以帮助。

回答by ClarkeyBoy

You can probably just get away with setting the border to a light colour and outline to a darker colour, then just set the border-radius. Note I haven't tested this, and if memory serves the outline does not curve with border-radius. Also note that border-radius requires several attributes to be set to become cross-browser compatible. Refer to http://perishablepress.com/press/2008/11/24/perfect-rounded-corners-with-css/for more info.

您可能只需将边框设置为浅色并将轮廓设置为深色，然后设置边框半径即可。请注意，我尚未对此进行测试，如果内存可用，则轮廓不会随边界半径弯曲。另请注意，border-radius 需要设置多个属性才能跨浏览器兼容。有关更多信息，请参阅http://perishablepress.com/press/2008/11/24/perfect-rounded-corners-with-css/。

If this fails, you could always use an inner-div, which you set to position absolute, left 0, right 0, top 0 and bottom 0 and then use that as either the inner or outer border. Setting the border-radius will definitely work then.

如果失败，您可以始终使用内部 div，将其设置为绝对位置、左 0、右 0、顶部 0 和底部 0，然后将其用作内部或外部边框。然后设置边界半径肯定会起作用。

Regards, Richard

问候， 理查德