box-shadow实现outline圆角

来源:互联网 发布:淘宝上卖高仿鞋 编辑:程序博客网 时间:2024/06/02 00:28

如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;

单层

加多几层

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;

多层

原创粉丝点击