三、outline的圆角效果
茫茫CSS海，乍一看去，貌似没有能让outline圆角的东西。注意措辞，“貌似”，我们如果有双犀利的眼睛，还是会发现某处藏可以让outline圆角的东西。
在FireFox浏览器中，就有和outline匹对的圆角夫妻outline-radius,
其关系，就和border和border-radius的关系一样。
由于目前还只是FireFox浏览器私有的属性，因此，目前的使用需要加-moz-前缀，也就是-moz-outline-radius.
闻名不如见面，若是火狐，您可以狠狠地点击这里：FireFox下outline radius圆角效果Demo
效果如下截图：
相关CSS代码如下：
CSS Code复制内容到剪贴板
img {
outline: 30px solid #cd0000;
-moz-outline-radius: 30px;
}
是不是很松松啊！如果你观察足够仔细，会发现，outline-radius和border-radius还是有区别的？看出来没，区别在哪里？答对有奖……哈，没错，你们都答错了！没有任何区别，outline-radius的圆角规则、语法之类跟border-radius就是一样的。
唯一的区别，也就是兼容性问题，不是看出来的，是试出来的。告诉大家一个不幸的消息，目前，除了FireFox浏览器支持outline-radius，其他浏览器都是空大屁！
如果是仅webkit/blink浏览器支持还好说，至少移动端还可以用用，搞了个仅仅FireFox支持，玩毛线啊！不对，连毛线都没得玩！
亲，不要绝望啊，车到山前必有路，此路进去……
四、box-shadow模拟outline的圆角效果
outline-radius虽然没戏了，但是，我们可以使用其他属性，可以实现类似的效果，比方说，图形构建大神之一的box-shadow.
我们平时使用box-shadow最多的是前面3个参数，水平/垂直偏移以及模糊大小，可能有一些小伙伴并不清楚其第4个可选参数值究竟有何用？box-shadow第4个参数值，名外扩展，可以把投影范围扩大，当然，扩大的区域是实色区域。我们就可以利用这一特性，模拟实现不影响元素占据尺寸的outline实色边框效果啦！
实例先行，您可以狠狠地点击这里：CSS3 box-shadow模拟outline radius圆角Demo
CSS代码如下：
CSS Code复制内容到剪贴板
img {
border-radius: 1px;
box-shadow: 0 0 0 30px #cd0000;
}
CSS3用的多的小伙伴应该知道，box-shadow的投影形状与border-radius一脉相承，也就是border-radius是圆角的，box-shadow的投影也是圆弧形的。于是，我们这里最终的效果就如下图所示：
