这个笔记只是我读了《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;
}