CSS布局是一块非常重要的内容,这里单独介绍非布局样式。非布局样式有下面几种分类(还有其它分类看系列文章):
背景
跟盒子相关的样式。
渐变色背景 和 多背景叠加
旧的写法是:background: -webkit-linear-gradient(left, red, green);
新的写法(也是标准写法)是:background: linear-gradient(to right, red, green);
可以加上角度值,就是渐变的方向:background: linear-gradient(45deg, red, green);
加上角度值效果:
可以加上多种颜色:background: linear-gradient(135deg, red 0, green 10%, yellow 50%, blue 100%);
其中 n% 是控制位置的。
多种颜色效果:
也可以指定 不透明颜色 或 半透明颜色,这样就 一部分有背景 一部分没背景,如果有背景的部分设置足够窄就变成一条线了:background: linear-gradient(135deg, transparent 0, transparent 49.5%, green 49.5%, green 50.5%, transparent 50.5%, transparent 100%);
不透明颜色效果:
如果设置背景大小,有很多人会认为背景大小只能设置背景图片的大小,实际上对渐变也是适用的,设置大小后默认是平铺的。
background: linear-gradient(135deg, transparent 0, transparent 49.5%, green 49.5%, green 50.5%, transparent 50.5%, transparent 100%);
background-size: 30px 30px;
渐变设置大小效果:
如果在反方向再来一条斜线:
background: linear-gradient(135deg, transparent 0, transparent 49.5%, green 49.5%, green 50.5%, transparent 50.5%, transparent 100%),
linear-gradient(45deg, transparent 0, transparent 49.5%, red 49.5%, red 50.5%, transparent 50.5%, transparent 100%);
background-size: 30px 30px;
多个渐变背景叠加效果:会变成一个网格,神奇吧 ~
多个背景的叠加可以使眼色,也可以是图片,都可以叠加。
除了 线性渐变,还有放射渐变,多动手可以做出很多漂亮的背景。
背景图片和属性
背景图可以去设置多个属性,什么位置开始显示(background-position
),显示多大(background-size
),要不要重复(background-repeat
),尺寸大小(background-size)。
雪碧图
雪碧图就是把多个图片素材集中在一张图片中,这样做可以减少http请求,比如100个图标如果不做成雪碧图那就要有100次http请求,但是把这100个图标集中在一张图上就只需要一次http请求,这对性能提升是很有帮助的。
background-position
是相对容器而不是相对图片。
在用雪碧图需要注意 图标的坐标(相对图片)跟图片需要偏移的距离是反的。比如:下面两个图标在页面上显示
<body>
<div class="c2">
</div>
<div class="blank"></div>
<div class="c3">
</div>
</body>
<style>
.c2{
width:20px;
height:20px;
background:url(./test_bg.png) no-repeat;
background-position: -17px -5px;
background-size: 261px 113px;
}
.c3{
width:20px;
height:20px;
background:url(./test_bg.png) no-repeat;
background-position: -169px -23px;
background-size: 261px 113px;
}
.blank{
height: 20px;
}
</style>
图标显示效果:
background-size
的作用可以把背景缩小。
缩小背景可以在我们需要缩小背景图标的时候缩小(注意:如果背景图标在雪碧图中可能需要重新调整图标相对图片的位置,也就是需要重新调整图片相对容器的距离)。
在适配移动端的时候,移动端的分辨率现在都比较高。本来一个像素在电脑上显示就很清晰了,在移动端则可能对应移动设备屏幕多个像素,可能四个像素,也可能九个像素。一个像素在移动设备中覆盖多个像素时就会看起来模糊,此时我们需要用多个像素去做,简单的说就是把一张大的图片缩小,这样在移动端就会清晰很多。这就是高清屏,retina屏等等,如果碰到两倍图仍然不够清晰,比如在iPhone6以上,它们可能是三倍屏,如果是三倍屏就需要三倍尺寸的图然后大小是除以三后的值就好了。
base64
base64实际上是一种文本格式的图,使用很简单:background:url(很长一段文本);
,这个文本实际上就是图片本身。在图片转base64位过程中图片的体积会增大三分之一(也就是体积会变成原来的三分之四)。使用base64位图的好处是可以不用进行http请求,缺点是文件的体积会增大,不仅会增大图片本身的体积,而且文本放在css文件中也会使css文件变大,另外也会增大浏览器解码的开销,所以base64位图一般只用在小的图标上。
边框
除了平时用border:1px solid red;
这种简写方式外,还可以用下面的属性分别指定边框属性(在控制台中查看边框的属性可以有以下):
边框背景图
border.png原图是:
<div class="c2">
</div>
边框的颜色设置成transparent
透明:
.c2{
width:400px;
height: 200px;
/* border-width: 30px; */
border:30px solid transparent;
border-image:url(./border.png) 30 round;
}
效果是:
把边框的宽度变小并不会影响我们的效果:
但上面的效果并不是我们想要的,我们想要四个角的图片不变,边框中间部分平铺:
border-image:url(./border.png) 30 repeat;
此时黄色的方块就不断地重复把边框填充了:
但发现边框有些方块并没有按照整个计算去填充(部分方块显示不完整),css也为我们提供了解决方法:
border-image:url(./border.png) 30 repeat round;
这就是我们想要的效果:
边框衔接(三角形)
给一个盒子设置30px
的底边,其它的边是没有的:
.c3{
width:400px;
height: 200px;
border-bottom:30px solid red;
}
效果:
接着增加其它的边:
.c3{
width:400px;
height: 200px;
border-bottom:30px solid red;
border-right:30px solid blue;
}
效果变成:有一个斜切的形状,可以猜测四条边交界的地方是斜切的
尝试把右边变成transparent
透明色:
.c3{
width:400px;
height: 200px;
border-bottom:30px solid red;
border-right:30px solid transparent;
}
变成一个梯形:
把左边(left-border)也变成transparent
透明:
.c3{
width:400px;
height: 200px;
border-bottom:30px solid red;
border-right:30px solid transparent;
border-left:30px solid transparent;
}
变成等腰梯形:
接着把等腰梯形的上边(盒子的宽度)去掉:
.c3{
width:0;
height: 200px;
border-bottom:30px solid red;
border-right:30px solid transparent;
border-left:30px solid transparent;
}
就变成了一个三角形:
给边框加个圆角border-radius: 50px;
会变成一个扇形: