背景样式
边框的三要素
border属性需要三个要素:
border: 1px solid red;
线宽,线型,线颜色
线形
实线:solid
虚线:dashed
点状线:dotted
border属性可以写成三个小属性:
border-width:线宽
border-color:线颜色
border-sytle:线形
四个方向上的边框
border-top:上边框
border-right:右边框
border-bottom:下边框
border-left:左边框
四个方向上的边框的小属性
border-top-width:上边框线宽
border-top-color:上边框线颜色
border-top-style:上边框线形
border-right-width:右边框线宽
border-right-color:右边框线颜色
border-tright-style:右边框线形
border-bottom-width:下边框线宽
border-bottom-color:下边框线颜色
border-bottom-style:下边框线形
border-left-width:左边框线宽
border-left-color:左边框线颜色
border-left-style:左边框线形
去掉某个边框
border-left: none 属性即可去掉左边框,以此类推。
利用边框制造三角形
示例:
.box3 {
width: 0;
height: 0;
border: 20px solid transparent;
border-top-color: red;
margin-bottom: 10px;
}
.box4 {
width: 0;
height: 0;
border: 20px solid transparent;
border-bottom-color: red;
margin-bottom: 10px;
}
效果:
盒子阴影
box-shadow属性
举例:
box-shadow: 10px 20px 30px rgba(0,0,0,.4);
第一个属性值 10px表示x偏移量
第二个属性值 20px表示y偏移量
第三个属性值 30px表示模糊量
第四个属性值 rgba(0,0,0,.4)表示颜色
当属性值有五个时,多出来的属性值表示延展
举例:
box-shadow: 10px 20px 30px 20px rgba(0,0,0,.4);
第四个属性值表示延展
效果:
内阴影:
box-shadow: inset 10px 10px 20px red;
在box-shadow的属性值前加 inset 表示内阴影
效果:
多阴影叠加
多个阴影可以叠加,用逗号隔开。
示例:
box-shadow: 10px 10px 20px red, 10px 10px 20px blue, 10px 10px 20px green, inset 10px 10px 20px yellow;
效果:
背景基础知识
background-color属性
background-color属性表示背景颜色,可以使用十六进制,rgb(),argb()格式表示。
注意:padding区域是含有背景颜色的。
background-image属性
background-image属性用来设置背景图片,图片路径要写在url()圆括号中,可以是相对路径,也可以是http://开头的绝对路径。图片默认是平铺的。
如果样式表采用外链式,那么采用相对路径引用图片时是从css目录开始的,而不是html目录。
background-repeat属性
background-repeat属性使用来设置背景的重复模式。
属性值 | 意义 |
---|---|
repeat; | x,y均平铺(默认) |
repeat-x; | 只有x平铺 |
repeat-y; | 只有y平铺 |
no-repeat; | 没有平铺 |
示例:
.box1 {
width: 1000px;
height: 1000px;
border: 1px solid #000;
background-image: url(./images/wx/0.jpg);
margin-bottom: 20px;
}
.box2 {
width: 1000px;
height: 1000px;
border: 1px solid #000;
background-image: url(./images/wx/0.jpg);
background-repeat: repeat-x;
margin-bottom: 20px;
}
.box3 {
width: 1000px;
height: 1000px;
border: 1px solid #000;
background-image: url(./images/wx/0.jpg);
background-repeat: repeat-y;
margin-bottom: 20px;
}
.box4 {
width: 1000px;
height: 1000px;
border: 1px solid #000;
background-image: url(./images/wx/0.jpg);
background-repeat: no-repeat;
margin-bottom: 20px;
}
效果:
背景尺寸
background-size属性用来设置背景图片的尺寸,兼容到 IE
9,属性值可以用百分数表示。需要等比例设置时,可以使用auto。
示例:background-size: 100px 200px;
第一个参数表示图片宽
第二个参数表示图片高
background-size的两个特殊值
contaion:表示将背景图片智能改变尺寸以容纳到盒子里。
cover:表示将背景图片智能改变尺寸以撑满盒子。
背景裁切
background-clip属性用来设置元素的背景裁切到哪个盒子。兼容到IE9。
属性值 | 意义 |
---|---|
border-box | 背景延伸至边框(默认) |
padding-box | 背景延伸至内边(padding),不会绘制到边框处 |
content-box | 背景被裁剪至内容区 |
举例:
.box1 {
width: 300px;
height: 300px;
border: 10px dotted #000;
padding: 60px;
background-image: url(images/bj/0.jpg);
margin-bottom: 10px;
}
.box2 {
width: 300px;
height: 300px;
border: 10px dotted #000;
padding: 60px;
background-image: url(images/bj/0.jpg);
background-clip: padding-box;
margin-bottom: 10px;
}
.box3 {
width: 300px;
height: 300px;
border: 10px dotted #000;
padding: 60px;
background-image: url(images/bj/0.jpg);
background-clip: content-box;
margin-bottom: 10px;
}
效果:
背景起源
background-o’rigin属性,当属性值为content-box时,显示的图片是从真实的图片左上开始渲染
举例:
.box4 {
width: 300px;
height: 300px;
border: 10px dotted #000;
padding: 60px;
background-image: url(images/bj/0.jpg);
background-clip: content-box;
background-origin: content-box;
margin-bottom: 10px;
}
效果:
背景固定
background-attachment属性决定背景图片位置是在视口内固定,或者随着包含它的区块滚动。
值 | 意义 |
---|---|
fixed | 自己的滚动条滚动图不动,外部滚动条滚动图也不动 |
local | 自己的滚动条滚动图动,外部滚动条滚动图也动 |
scroll | 自己的滚动条滚动图不动,外部滚动条滚动图动(默认) |
.box1 {
width: 300px;
height: 300px;
border: 1px solid #000;
overflow-y: scroll;
background-image: url(./images/bj/0.jpg);
background-attachment: fixed;
}
.box2 {
width: 300px;
height: 300px;
border: 1px solid #000;
overflow-y: scroll;
background-image: url(./images/bj/0.jpg);
background-attachment: local;
}
.box3 {
width: 300px;
height: 300px;
border: 1px solid #000;
overflow-y: scroll;
background-image: url(./images/bj/0.jpg);
background-attachment: scroll;
}
背景图片位置
background-position属性可以设置背景图片出现在盒子的什么位置。
可以使用top、bottom、center、left、right描述图片出现的位置。
示例:background-position: 100px 200px;
第一个属性值表示x轴方向的位置
第二个属性值表示y轴方向的位置
举例:
.box1 {
width: 1000px;
height: 1000px;
border: 1px solid #000;
padding: 30px;
background-image: url(./images/bj/0.jpg);
background-size: 50%;
background-repeat: no-repeat;
background-clip: content-box;
background-position: center bottom;
}
效果:
css精灵
将多个图标合并制作到一张图片上,使用background-position属性单独显示其中一个,这样的技术叫做css精灵技术,也叫做css雪碧图
css精灵可以减少http请求数,加速网页显示速度。缺点也很明显:不方便测量,后期改动麻烦。
background综合属性
一些常见的背景相关的小属性,可以和写在一条background属性内。
示例:
background white url(images/0.png) no-repeat center center;
第一个属性:背景颜色
第二个属性:背景图片
第三个属性:背景重复
第四个属性:背景位置
线性渐变
盒子的background-image属性可以用linear-gradient()形式常见线性渐变背景。
第一个属性为渐变方向,第二个属性为开始的渐变颜色,第三个属性为结束的渐变颜色。
示例:
background-image: linear-gradient(to right, blue, red);
渐变方向也可以写成度数/。
示例:
background-image: linear-gradient(45deg, blue, red);
可以有多个颜色值,并且可以用百分数定义它们出现的位置。
示例:
background-image: linear-gradient(to bottom, blue, yellow 20%, red);
举例:
.box1 {
width: 300px;
height: 300px;
border: 1px solid #000;
background-image: linear-gradient(to right, blue, red);
}
.box2 {
width: 300px;
height: 300px;
border: 1px solid #000;
background-image: linear-gradient(45deg, blue, red);
}
.box3 {
width: 300px;
height: 300px;
border: 1px solid #000;
background-image: linear-gradient(to right, red, orange, yellow, green, cyan, blue, purple);
}
.box3 {
width: 300px;
height: 300px;
border: 1px solid #000;
background-image: linear-gradient(to right, red, yellow 50%, blue);
}
效果:
浏览器私有前缀
不同的浏览器有不同的私有前缀,用来对试验性质的css属性加以标识。
浏览器 | 前缀 |
---|---|
Chrome | -webkit- |
Firefox | -moz- |
IE、Edge | -ms- |
open | -o- |
径向渐变
盒子的background-image属性可以用radial-gradient()形式创建径向渐变背景。
第一个和第二个属性值表示圆心坐标,第三个元素表示渐变开始的颜色,第四个元素表示结束的颜色。
示例:
background-image: radial-gradient(50% 50%, red, blue);
举例:
.box1 {
width: 300px;
height: 300px;
border: 1px solid #000;
background-image: radial-gradient(50% 50%, red, yellow, blue);
}
效果: