communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > tutoriel HTML > css3 模拟圆角outline_html/css_WEB-ITnose

css3 模拟圆角outline_html/css_WEB-ITnose

WBOY
Libérer： 2016-06-24 11:44:47
original
1195 Les gens l'ont consulté

　　今天网上看到张鑫旭大神的一篇模拟圆角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>
Copier après la connexion

 

运行效果如下：

　　大家可以在chrome的调试工具中看此盒子的大小还是height:250px;

　　为什么能达到这效果？因为盒子有1px的圆角，而盒子的阴影水平便宜为0，垂直便宜为0，阴影模糊距离为0，想象下这盒子其实看起来是没有阴影的，因为盒子的阴影刚好是盒子的大小，然而第四个参数根据w3c官方解释为阴影的尺寸，所以第四个

参数扩展了盒子的阴影，又因为盒子有1px的圆角所以就达到了模拟圆角outline的效果啦！是不是很棒啊！

Étiquettes associées：
css3 模拟圆角outline
source：php.cn
Article précédent：【CSS3】-块级元素、内联元素_html/css_WEB-ITnose Article suivant：CSS3动画中的位置设定问题_html/css_WEB-ITnose
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...
Depuis 2024-04-29 11:01:01
0
3
2038
Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?
Depuis 2024-04-23 00:22:19
0
11
2197
La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...
Depuis 2024-04-19 15:37:47
0
1
1851
Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...
Depuis 2024-04-18 23:52:34
0
1
1744
Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel
Depuis 2024-04-16 10:10:18
0
0
1763
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal