Heim > Artikel > Web-Frontend > css3 模拟圆角outline_html/css_WEB-ITnose
css3 模拟圆角outline_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:44:471159Durchsuche
今天网上看到张鑫旭大神的一篇模拟圆角outline的文章，觉得很强大，很神奇，很流弊，所以赶紧记录下来，供大家分享，学习！
outline有个特性就是它不会占据空间，这是个很强大的属性，但是一般的outline都是方形的，那怎么才能实现绚丽的圆角outline效果了？我们都知道css3中有border-radius属性可以设置圆角，但是如果配合border和border-radius是会增加盒子的大小的！
这时我们就需要用到box-shadow和border-radius组合来模拟圆角的outline效果了！废话不多说，先上代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style type="text/css"> 5 div{margin:0;padding:0;} 6 div.outlineRadius{width:250px;height:250px;line-height:250px;text-align:center;} 7 .outlineRadius{border-radius:1px;box-shadow:0 0 0 25px #00438a;} 8 </style> 9 </head>10 <body>11 <div class="outlineRadius">圆角的outline效果盒子</div> 12 </body>13 </html>
运行效果如下：
大家可以在chrome的调试工具中看此盒子的大小还是height:250px;
为什么能达到这效果？因为盒子有1px的圆角，而盒子的阴影水平便宜为0，垂直便宜为0，阴影模糊距离为0，想象下这盒子其实看起来是没有阴影的，因为盒子的阴影刚好是盒子的大小，然而第四个参数根据w3c官方解释为阴影的尺寸，所以第四个
参数扩展了盒子的阴影，又因为盒子有1px的圆角所以就达到了模拟圆角outline的效果啦！是不是很棒啊！
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：【CSS3】-块级元素、内联元素_html/css_WEB-ITnoseNächster Artikel：CSS3动画中的位置设定问题_html/css_WEB-ITnose