在css中当你对一个空的div设置背景色和边框颜色，其实背景色也渗透到了边框色的下面，我们可以通过设置边框线为虚线来验证这一点，请看下面例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
width: 500px;
height: 500px;
background-color: black;
border: 10px dotted red;
}
</style>
</head>
<body>
<div id="box">
</div>
</body>
</html>如果我们不想让背景色渗入到边框的下面，我们可以设置属性background-clip: padding-box;让它在内边距时截断。
下面我们讨论透明边框：
首先我们简单介绍一下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>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
background-color: black;
}
#box{
width: 500px;
height: 500px;
background-color: hsla(240,10%,100%,.5);
border: 10px solid hsla(240,70%,70%,.7);
}
</style>
</head>
<body>
<div id="box">
</div>
</body>
</html>我们可以通过调整hsla的值，设置边框的颜色透明度等。建议自己动手试试。
网友评论文明上网理性发言 已有0人参与
发表评论: