CSS3实现原腾讯视频透明边框，多重边框等（关于边框那些不为人知的事情）
1.hsla或rgba实现半透明边框。
rgba在rgb的基础上增加了透明通道，就不详细说了，下面重点说下hsla：
说明：
HSLA(H,S,L,A)
取值：
- H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
- S：Saturation(饱和度)。取值为：0.0% - 100.0%
- L：Lightness(亮度)。取值为：0.0% - 100.0%
- A：Alpha透明度。取值0~1之间。
- 两种方式实现透明边框的代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css" media="screen">
body{
height: 1000px;
background: #f00;
}
.div1{
width: 100%;
height: 100px;
background: #fff;
box-sizing: border-box;
/*rgba*/
border:10px solid rgba(255,255,255,0.5);
/*hsla*/
border:10px solid hsla(0,0%,100%,0.5);
/*background-clip为背景截取，默认为border-box,此处要改为padding-box*/
background-clip: padding-box; } </style> </head> <body> <div class="div1"> </div> </body> </html>
2.box-shadow实现多重边框
box-shadow:x偏移量，y偏移量，模糊值，扩展半径，内/外阴影。 须注意的是，box-shadow并不影响布局效果。在制作样式时会经常用到这点。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css" media="screen">
.div1{
width: 100px;
height: 100px;
margin: 50px;
box-shadow: 0 0 0 10px #ff0, 0 0 0 15px #f00;
}
.div2{
width: 100px;
height: 100px;
margin: 50px;
box-shadow: 0 0 0 10px #ff0 inset, 0 0 0 15px #f00 inset;
}
</style>
</head>
<body>
<div class="div1">
</div>
<div class="div2"></div>
</body>
</html>
3. outline实现双边框（伪div嵌套效果），与box-shadow相同的是，outline同样不会影响布局。还可利用outline-offset控制outline与border之间的距离。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .div1{ width: 100px; height: 100px; outline: 10px solid #ff0; border:10px solid #f00; outline-offset: 10px; border-radius: 50%; margin: 50px; } </style> </head> <body> <div class="div1"></div> </body> </html>
喜欢请推荐，个人原创，转载标明出处。
