在CSS中创建模糊边框3

Question

这是我的源图片：

我的源图片放大了：

有关如何仅使用CSS3实现此目的的任何想法？注意元素向上轻微流血。

Answer 1

  

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

     

请参阅border-radius和box-shadow的Caniuse页面。

最好（也是唯一）这样做的方法是使用多个框阴影：

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-shadow的工作原理如下：

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

border-radius的工作原理如下：

border-radius: [size];

/*or*/

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

/*or*/

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

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

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

Answer 2

这实际上是用两个CSS3 box-shadow s。

完成的

CSS：

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

当我回到真正的计算机来编辑小提琴时，你可以看到它的运行情况:-)（现在使用我的平板电脑）

显然根据您的口味改变颜色：）

Answer 3

它只使用两个方框阴影，一个插图和另一个插图，即：

.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;
}

请在此处查看：http://jsfiddle.net/WYLJv/

Answer 4

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

Answer 5

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

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

Answer 6

尝试在css中添加border-radius和text-shadow。

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

希望这有帮助。

Answer 7

你可能只是将边框设置为浅色并勾画为较暗的颜色，然后只需设置边框半径即可。注意我没有对此进行测试，如果内存服务，则轮廓不会与border-radius一起弯曲。另请注意，border-radius需要设置多个属性才能与浏览器兼容。有关详细信息，请参阅http://perishablepress.com/press/2008/11/24/perfect-rounded-corners-with-css/。

如果失败，你总是可以使用一个inner-div，你设置为绝对，左0，右0，上0和下0，然后将其用作内边框或外边框。设置border-radius肯定会起作用。

此致 理查德