《css揭秘》读书笔记（1）-背景与边框

这个笔记只是我读了《css揭秘》后的一些摘要，实现原理并不会讲的很清楚，只是加上了我认为容易记住的部分，当想要实现某一个样式而忘记时，可以参考一下。

1.半透明边框

达到效果

利用rgba的透明化，使边框的颜色变成半透明，但是普通方法设置边框颜色并没有效果，此时可以利用css3的 background-clip属性 调整。这个属性的初始值是 border-box ，说明页面背景会被元素的border box（边框的外延框）裁剪掉，此时只需要设置为 padding-box，这样浏览器就会用内边距的外沿把背景裁剪掉。

css代码

body{
	background-color: #BAD4AA;
}
div{
	margin: 20px;
	width: 300px;
	height: 200px;
	background: white;
	border: 10px solid rgba(255,255,255,0.5);
	background-clip: padding-box;
}

2.多重边框

利用box-shadow来创建多重边框，它的好处是支持逗号分隔，可以创建任意数量的投影。要注意的一点是，投影是层层叠加的，所以外面一层一定要大于里面一层，而这个所谓的边框就是两者的差值。

css代码

div{
	margin: 70px auto;
	width: 300px;
	height: 200px;
	background: #eee;
	box-shadow: 0 0 0 10px red,
		    0 0 0 15px pink,
		    0 0 0 20px green;
}

页面

注意：利用投影产生的【边框】并不能触发事件

3.灵活的背景定位

这次用到的属性是css里的background-position：允许我们指定背景图片距离任意角的偏移量，只需要我们在偏移量前制定关键字。

这个属性不是什么新奇的属性，在我自己做项目的时候也用过，但是这里要记录一个有趣的知识点——就是这里的 left top等是什么意思。

每个元素身上都存在三个矩形框：borderbox（边框的外沿框）

                                                paddingbox（内边距的外沿框）

                                                contentbox（内容区的外沿框）

默认情况下，background-position是以paddingbox为准的，这样边框的颜色就不会遮住背景图片。而改变它则用到了

background-origin

用代码和效果展示更容易明白

当padding为10时

div{
	padding: 10px;
	width: 300px;
	height: 200px;
	background:  url(../image/1.png) no-repeat #5FB878;
	background-position: right bottom;
	background-origin: padding-box;
}

可以看出背景图片并没有实现内边距10px

更改后

div{
	padding: 10px;
	width: 300px;
	height: 200px;
	background:  url(../image/1.png) no-repeat #5FB878;
	background-position: right bottom;
	background-origin: content-box;//只更改了这个属性
}

增加了内边距。

4.边框内圆角

实现效果

也就是在一个方形框里有一个圆角框，一般情况下就是2个div就可以实现，这里不贴代码了。

接下来利用outline和box-shadow实现该样式。

首先可以想到outli用于在一个div外面进行描边增加边框，那我们试试，在一个已经是圆角的div里增加outli属性

效果如下

这时候发现由于边框并不按照圆角描边，就好产生空隙，那如果用box-shadow来填补这些空白，不就实现了想要的样式了吗

注意：该方法实现的条件有2个，1.是描边outline不按照圆角走，2.盒阴影box-shashow按照圆角走（我这里没有证明）。有可能随着w3c的规则更新，这2个条件会发生改变，那么该方法就不适用了

贴上代码

div{
	margin: 0 auto;
	width: 60%;
	background: #B3D1C1;
	border-radius:.8em;
	padding: 1em;
	box-shadow: 0 0 0 5px #A79496;
	outline: .6em solid #A79496;
}

效果图

5.条纹背景

利用背景颜色渐变的属性实现条纹背景

div{
	margin: 30px auto;
	width: 60%;
	height: 200px;
	background: linear-gradient(#B3D1C1,#A79496);
}

对于这种普通的渐变，只需要加上范围在颜色后面加上范围  background: linear-gradient(#B3D1C1 50%,#A79496 50%);

就变成了泾渭分明的2个色块，由于是代码产生的图像，可以像背景图像那样对待它。

贴一个w3c的图

三条纹

div{
	margin: 30px auto;
	width: 60%;
	height: 200px;
	background: linear-gradient(#B3D1C1 33.3%,#A79496 0,#A79496 66.6%,#eee 0);
}

垂直条纹

div{
	height: 400px;
	width: 200px;
	background: linear-gradient(to right, #B3D1C1 50%,#A79496 0);
	background-size: 45px;
}