创建在CSS 3

这里模糊边界是我的源图像：创建在CSS 3

enter image description here

在我的源图像缩放：

enter image description here

如何只用CSS3实现这一目标的任何想法？注意到元素上方的轻微流血。

来源

2011-11-27 Kirk Ouimet

你为什么不接受答案？看起来很不错。 – Mick

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

来源

2011-11-27 22:08:49

-2

您可能只需将边框设置为浅色并勾勒出较暗的颜色，然后设置边框半径即可。注我没有测试过，如果内存服务的轮廓不曲线与边界半径。另请注意，border-radius需要设置多个属性才能兼容跨浏览器。有关更多信息，请参阅http://perishablepress.com/press/2008/11/24/perfect-rounded-corners-with-css/。

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

问候，理查德

来源

2011-11-27 22:11:12 ClarkeyBoy

哇从过去那里闪现 –

倒票是怎么回事？我的答案完全有效。投票时应该完全有理由给出一个理由。 – ClarkeyBoy

这实际上是两个CSS3 box-shadow一事无成。

CSS：

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

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

显然改变颜色，以你的口味:)

来源

2011-11-27 22:13:18 Kyle

多框阴影的语法不正确，它们用逗号分隔 – Duopixel

OMG当然是！对不起，我睡了两个小时:-)会正确的。 – Kyle

它只是用两个盒子阴影，一个插图和其他一开始，即：

.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/

来源

2011-11-27 22:15:36 Duopixel

更新：我已经删除了供应商前缀，因为几乎所有的浏览器支持这些特性并不需要它们。放弃它们在这一点上被认为是最佳做法。

看到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];

来源

2011-11-27 22:19:45

不要忘记'border-radius'！ – joshnh

我有点晚了，但是，是的，使用边界半径和箱阴影（S），你应该是好去。

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

来源

2011-11-27 22:19:50 JayC

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

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

希望这会有所帮助。

来源

2014-08-12 17:18:09 user3817794

创建在CSS 3

回答

相关问题