一: 效果
二: 代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>使用CSS background-clip属性实现半透明边框</title>
<style type="text/css">
body {
background: url('/assets/images/zebra.jpg') no-repeat;
}
div {
border: 10px solid rgba(255, 255, 255, .5);
background: white;
background-clip: padding-box;
/* 基本样式 */
max-width: 20em;
padding: 2em;
margin: 2em auto 0;
position: absolute;
top: 200px; left: 200px;
}
</style>
</head>
<body>
<div>
设置半透明边框后,能透过边框看到背景图片吗?
</div>
</body>
</html>
三: 实现
设置body元素背景图片
body {
background: url('/assets/images/zebra.jpg') no-repeat;
}
设置半透明边框
div {
border: 10px solid rgba(255,255,255,.5);
background: white;
/* 基本样式 */
max-width: 20em;
padding: 2em;
margin: 2em auto 0;
position: absolute;
top: 200px; left: 200px;
}
设置元素的背景为白色,边框为半透明的白色。效果如下:
此时看不出半透明边框的效果,这是因为元素的背景默认扩展至元素边框的外边界(border),在设置了border宽度后,元素的背景能透过内容区域(content area)、padding区、border区看到(而透过margin区看到的是父元素背景)。
元素本身的白色背景,透过半透明的边框,看到的还是白色。
通过background-clip属性修正
CSS的background-clip属性设置元素背景的扩展范围,值可以为border-box, padding-box, content-box,默认值为border-box。
值为border-box时表示背景扩展至元素边框(border)的外边界, 值为padding-box时表示背景扩展至元素padding的外边界,而值为content-box时表示背景只扩展至内容区域(content)部分。
通过设置background-clip: padding-box;
,使该元素的白色背景只扩展至padding的外边界,不再扩展至边框(border)部分,此时就能透过边框看到父元素的背景。
修改后的CSS如下:
div {
border: 10px solid rgba(255,255,255,.5);
background: white;
background-clip: padding-box;
/* 基本样式 */
max-width: 20em;
padding: 2em;
margin: 2em auto 0;
position: absolute;
top: 200px; left: 200px;
}