[css]《css揭秘》学习-多重边框
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[css]《css揭秘》学习-多重边框相关的知识，希望对你有一定的参考价值。
一、box-shadow属性
box-shadow除了生成投影，还可以用来生成边框；它接受第4个值作为扩张半径，0的x轴偏移+0的y轴偏移+0的模糊值+0的扩张半径，得到的显示效果和边框是一样的；但是注意，投影的行为和边框的行为不同，投影不影响布局；“假”边框在元素外面，不影响元素的点击（可以给box-shadow属性加上inset元素，来投影到原色内部）。
1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>多重边框</title> 5 <style type="text/css"> 6 div{ 7 width:100px; 8 height:60px; 9 margin:25px; 10 background: yellowgreen; 11 12 box-shadow: 0 0 0 10px #665, 13 0 0 0 15px deeppink, 14 0 2px 5px 15px rgba(0,0,0,0.6); 15 } 16 </style> 17 </head> 18 <body> 19 <div></div> 20 </body> 21 </html>
二、outline方案
outline属性可以给边框再加上一层边框，相比用box-shadow实现，好处是，可以给边框指定不同的类型，而不只是实线；缺点是，只能指定两层边框。
1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>outline实现双重边框</title> 5 <style type="text/css"> 6 div{ 7 width:100px; 8 height:60px; 9 margin:25px; 10 background: yellowgreen; 11 12 border:10px solid #665; 13 outline:5px solid deeppink; 14 } 15 </style> 16 </head> 17 <body> 18 <div></div> 19 </body> 20 </html>
以上是关于[css]《css揭秘》学习-多重边框的主要内容，如果未能解决你的问题，请参考以下文章