box-shadow实现outline圆角

如border有border-radius
outline也有outline-radius
但是目前outline-radius只在火狐上有用
其他浏览器都不支持。

-moz-outline-radius: 30px;

目前可以使用box-shadow来模拟outline圆角效果

border-radius: 30%;
border: 5px solid red;
box-shadow: 0 0 0 5px darkorange;

box-shadow实现outline圆角_第1张图片

加多几层

border-radius: 30%;
border: 5px solid red;
box-shadow: 0 0 0 5px darkorange,
             0 0 0 10px darkmagenta,
              0 0 0 15px darkcyan,
               0 0 0 20px darksalmon;

box-shadow实现outline圆角_第2张图片

你可能感兴趣的:(html5)