半透明边框

CSS3_MAGIC

这是关于学习《CSS揭秘》这本书的一些所获，特此记录，今天是本系列的第一讲半透明边框

一个场景，在一个大的div（以下简称big）中，包含着一个小的div（以下简称small），big有一个10px的边框，而这两个div都自己的背景，这时有一个场景，你希望让big的背景透过small的边框突显出来如下:

;
这里small周围那圈白白的就是smal的边框：
代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
	<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">

	<style type="text/css" media="screen">
		/*
			
		 默认值：
			background-size：auto;
			box-sizeing:content-box;
			background-origin:padding-box

		*/


		.outter{
			width:300px;
			height:300px;
			background:url('./imgs/3.jpeg') no-repeat center;
			background-size:cover;
			margin:30px auto;
			display:flex;

		}

		.inner{
			
			border:10px solid hsla(0,0%,100%,1);
			background:lime url(./imgs/6.jpg) no-repeat center;
			background-size:cover;
			margin:auto;
			padding:50px;
			max-width:80px;
			background-origin:border-box;    /*修改背景图片的定位原点，使之到border的外边缘,默认背景图片的定位原点是在padding的外边缘，下面会有所简介*/
		}
	</style>
</head>
<body>
	<div class="outter">
		<div class="inner">啦啦啦啦啦啦啦啦啦啦啦</div>
	</div>
</body>
</html>

但是现实是以上的代码并不能做到上图的效果：
;
这是因为背景图片会延伸到所在整个border框区域，将上面的inner的css改为如下：

1
2
3
4
5
6
7
8
.inner{
		
		border:10px dashed hsla(0,0%,100%,1);
		background:lime url(./imgs/6.jpg) no-repeat;
		margin:auto;
		padding:50px;
		max-width:80px;
	}

;

上图说明了背景色和背景图片会延伸到整个border框,也可以所说明了background-color的定位原点在border外边缘，background-image的定位原点是在padding的外边缘

那我们要如何是好?
好在css3中为我们提供了一个属性：background-clip;
他有三个值：

1、border-box:默认值，背景从border区域向外裁剪，也就是超出部分将被裁剪掉；

2、padding-box：背景从padding区域向外裁剪，超过padding区域的背景将被裁剪掉；

3、content-box：背景从content区域向外裁剪，超过context区域的背景将被裁剪掉；

好我们使用上这个属性来看看：

1
2
3
4
5
6
7
8
9
10
.inner{
			border:10px solid hsla(0,0%,100%,0.5);
			background:lime url(./imgs/6.jpg) no-repeat;
			background-size:cover;
			margin:auto;
			padding:50px;
			max-width:80px;
			background-origin:border-box;    
			background-clip:padding-box;
		}

ok,实现与第一幅图一样的效果。啦啦啦啦啦啦啦啦啦~

下面分别是background-clip:border-box && background-clip:content-box的情况
1） ;

2） ;

下面给出了一些大漠老师有关background相关css属性的好文链接：
background-origin;
background-origin;
box-sizing;

本文标题:半透明边框

文章作者:弦冰

发布时间:2016年08月04日 - 22时27分

最后更新:2016年08月11日 - 21时48分

原始链接:http://baidu.com/2016/08/04/半透明边框/

许可协议: "署名-非商用-相同方式共享 3.0" 转载请保留原文链接及作者。

文章目录