Css 如何使用框阴影部分圆化给定块的角,并使用未圆框阴影保留未圆角(webkit和gecko)?

Css 如何使用框阴影部分圆化给定块的角,并使用未圆框阴影保留未圆角(webkit和gecko)?,css,Css,我有一个具有多个边框的div,对于一个边框,我使用的是框阴影。我希望这个div有几个圆角和一个直角。但是,只要一个角添加了边框半径(除0),则框阴影的其他角也会变圆(半径与边框半径的任何指定值不同)。是否有办法为某些角点(而不是所有角点)设置边框半径,并让框阴影为所有角点使用与边框相同的半径 这种行为在Chrome 19、Firefox 13和Safari 5中都存在,但在Internet Explorer 9或Opera 12中却不存在,这两种浏览器都会像预期的那样显示框影,当边框的角也为方形

我有一个具有多个边框的
div
,对于一个边框,我使用的是
框阴影
。我希望这个
div
有几个圆角和一个直角。但是,只要一个角添加了
边框半径
(除
0
),则
框阴影
的其他角也会变圆(半径与
边框半径
的任何指定值不同)。是否有办法为某些角点(而不是所有角点)设置
边框半径
,并让
框阴影
为所有角点使用与
边框
相同的半径

这种行为在Chrome 19、Firefox 13和Safari 5中都存在,但在Internet Explorer 9或Opera 12中却不存在,这两种浏览器都会像预期的那样显示
框影
,当
边框
的角也为方形时,框影

代码(): CSS
.block1{
填充:18px 14px;
保证金:5px;
背景:#fff;
边框:1px纯红;
-webkit盒阴影:0 5pxRGBA(0,57,47,32);
-莫兹盒阴影:0.5pxRGBA(0,57,47,32);
盒影:0.5pxRGBA(0,57,47,32);
-webkit边界半径:10px 0 10px 10px;
-moz边界半径:10px 0 10px 10px;
边界半径:10px 0 10px 10px;
}
.区块2{
填充:18px 14px;
保证金:5px;
背景:#fff;
边框:1px纯红;
-webkit盒阴影:0 5pxRGBA(0,57,47,32);
-莫兹盒阴影:0.5pxRGBA(0,57,47,32);
盒影:0.5pxRGBA(0,57,47,32);
}
.外部{
边框:1px纯绿色;
}
HTML
块的右上角不是圆角,但框阴影是:

福 无边框半径的块上的长方体阴影:

酒吧
在外分区上使用
插图
阴影。镀铬看起来不错

小提琴更新:

已更新:如果您想要实心阴影,则不希望在外部div上插入阴影,并且必须使用红色边框,这应该适用于您:

诀窍是使用边框作为阴影,阴影作为边框。

使用此CSS代替(,):

。块已修复{
背景:#fff;
/*对于插入框阴影,必须将填充增加1px*/
填充:19px 15px;
/*使用边框作为外部边框*/
边框:5px实心rgba(0,57,47,32);
/*使用框阴影作为内边框*/
-webkit盒阴影:插入0 1px红色;
-moz盒阴影:插入0 1px红色;
方框阴影:插入0 1px红色;
/*由于切换阴影/边框,必须调整边框半径*/
-webkit边界半径:15px 0 15px 15px;
-moz边界半径:15px 0 15px 15px;
边界半径:15px 0 15px 15px;
}

在您的示例中,阴影不会褪色,因此厚边框是否是合理的解决方案?不确定红色边框是用于演示还是在实际代码中:我必须在一个元素上有多个边框-红色边框是必需的,而且我还需要多个边框。我可以用伪元素解决这个问题,但问题本身仍然存在。虽然我认为这个问题更合适的地方是webkit和mozilla bugtrackers…有趣的测试用例。我打算建议轮廓线来获得第二个边框,但边框半径似乎根本不适用于此(至少在chrome中是这样)。@只是,是的,这看起来确实像一个bug。如果这不是引擎的bug,我会说这是规范(imo)的bug。只是,你能在提交bug报告并发布报告链接时ping我吗?(或者,如果你不打算报告错误,请告诉我。)你比我快,使用OP的代码,只需切换边框和框阴影即可。outer div仅用于演示,我不能在其上放置任何阴影,所有样式都应应用于一个元素-。block1@stephenmurdoch,没错!这差不多了,但我们现在在Opera中有bug,IE9中有可怕的渲染问题,Chrome中也有小问题。在Chrome中,解决方案中的“比较”和“边框”比初始块上的外部阴影更圆一点(看起来像1px的差异)。仍在努力,但似乎这将是很难的,如果甚至有可能使这个解决方案看起来像最初的块交叉。。。另外,如果外部阴影有模糊,这种解决方案是不可接受的。@stephenmurdoch,还有一件事。若块背景和主体背景不同-事情会出错,因为块背景散布在半透明的边界上…检查前面答案中的所有注释-太多问题无法接受此解决方案。这个解决方案有点像黑客,一个只有在有限数量的用例中才有用的变通方法。我认为不可能回答这个问题,因为它只是一个bug。或者答案是-修复浏览器中的错误。