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{
			 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{
			 100px;
			height: 100px;
			margin: 50px;
			box-shadow: 0 0 0 10px #ff0, 0 0 0 15px #f00;
		}
		.div2{
			 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{
             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>

喜欢请推荐，个人原创，转载标明出处。