现在我们要实现边框圆角的效果。这个想法可能是这样的div{outline:.6emsolidgreen;最大宽度:10em;边界半径:.8em;填充:1em;保证金:1em;背景:红色;字体:100%/1.5无衬线字体;}然后运行看看效果是这样的:因为outline没有沿着stroke的border-radius走,所以可以达到直角的效果,但是显示上还是少了点去掉突兀的效果白色的圆角。这里需要明白两点:1、box-shadow可以跟随描边效果2、b??ox-shadow扩展半径公式是这样的最后我们的代码是:div{outline:.6emsolidgreen;盒子阴影:000.4em绿色;/*todo计算这个的最大值*/max-width:10em;边界半径:.8em;填充:1em;保证金:1em;背景:红色;字体:100%/1.5无衬线字体;}具体效果见链接
