一.要达到的效果
半透明边框效果
二.效果图
三.相关知识点
背景图片从什么地方开始裁切:
background-clip
content-box: 只显示内容区部分的背景图片
padding-box:显示内容区和内边距部分的背景图片
border-box: 显示内容区、内边距和边框部分的图
四.源码
------------------------------------------------------我是分割线--------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background: url('http://csssecrets.io/images/stone-art.jpg');
}
div.box1 {
border: 10px solid hsla(0, 0%, 100%, .5);
background: white;
background-clip: padding-box;
width: 400px;
height: 80px;
max-width: 20em;
padding: 10px;
margin: 2em auto 0;
}
div.box2 {
border: 10px solid hsla(0, 0%, 100%, .5);
background: white;
background-clip: content-box;
width: 400px;
height: 80px;
max-width: 20em;
padding: 10px;
margin: 2em auto 0;
}
div.box3 {
border: 10px solid hsla(0, 0%, 100%, .5);
background: white;
background-clip: border-box;
width: 400px;
height: 80px;
max-width: 20em;
padding: 10px;
margin: 2em auto 0;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
------------------------------------------------------我是分割线--------------------------------------------------------------------