背景颜色
简写属性只是将其他的值设置为了默认，并且会覆盖之前定义的其他属性
颜色值与不透明度
- 16进制表示法
- rgb()表示法/rgba()
- hsl()表示法/hsla()
//使用rgba或者hsla表示法与设置opacity表示法不同的是，rgba表示法只是让背景色透明了，而opacity是让整个元素透明了
背景图片
背景图片与内容图片
如果网页失掉图片对其本身并没有太大影响那么就可以使用背景图片
背景图示例
- 在添加背景的图的时候最好再设置下背景色，以防止背景图加载不出来
加载图片
ps：background-image:url(/img/…) 如果图片路径是以“/”开头 那么浏览器会在相对于此css文件所在文件的顶级目录下寻找img子目录 没有“/”表示相对路径
背景图路径也支持base 64位格式的图片路径，不过会增加样式表体积，可以减少htpp请求
图片格式
svg 是一种矢量图 无论放大缩小都不会丢失细节 png格式支持透明度设置
背景图片语法
background-position //主要控制图片位置 属性值既可以是关键字也可以是像素em或者百分比 当为像素或者百分比时 图片会相对于元素的左上角进行定位
css3新增了可以使背景图定位距离左右或者上下的位置background-position:right 1em top 50%; 表示背景图距离元素右边1em 上边50%的位置 ie8及更早版本不支持此种设置
calc() 函数
这个函数可以计算元素、字体大小等 可以+-*/都可以 可以传入多个值
ps:使用时需要注意的是需要在“+”号和“-”号两侧加空格 ie8及其更早版本不支持
背景裁剪与原点
如果将边框设置为半透明1
2
3
4
5border: 10px solid rgba(220,220,160,0.5);
padding: 10px;
background-clip: padding-box; //背景在内边距以内，超出部分被裁掉
background-clip:content-box; //背景图在边框以内，超出部分被裁掉
background-clip:border-box; //背景图在边框下面。超出部分在边框下 默认值
1 | background-origin://此属性是开始定位背景图的参照点 |
PS:以上2种属性ie8还没有支持
背景附着
background-attachment:fixed/local/scroll;默认值是scroll 移动端不支持fixed 不过这个效果确实很酷
背景大小
background-size://此属性可以重新设置图片大小，或者跟随元素盒子缩放1
2
3background-size:100% auto;//此属性是保持宽度比例，而高度自适应或者使用另外个值 contain 保证图片尽可能大，并且不会被切掉
background-size:cover;//此属性值是保证图片不会被切，且铺满整个元素 且不变形
背景属性简写
最好还是不简写了，可以明确代码方便后期修改
多重背景
css3 提供了设置多张图片作为背景
使用多张背景图以逗号为分割，其他设置也是逗号分隔
浏览器对此支持度不高
边框与圆角
ps：除了明确指定box-sizing 属性，否则边框宽度会影响盒子的尺寸
边框半径：圆角
ps:只要ie8及其以下的版本和欧鹏mini版本不持支圆角属性，但是这个属性并不影响使用
边框半径简写
border-top-left-radius:1em;//此设置的为上左
创建正圆和胶囊形状
创建半圆圆角时，可故意创建一个比所需半径大的任意圆角值
边框图片
盒阴影
box-shadow与text-shadow的语法一致，分别是偏移x，y轴的距离 第三个值表示模糊半径，最后是颜色
扩展半径：调整阴影大小
可以在模糊半径后面继续增加一个值，表示扩展半径，用于扩展阴影的大小，默认是0，即跟所属元素一般大，增大这个值阴影增大，负值即缩小阴影
内阴影
inset关键字，可以设置内阴影。即把元素当成投影表面，创造背景被镂空的感觉。
box-shadow:inset 0 -.5em .5em rgba(0,0,0,0.3)
多阴影
跟多背景设置一样，可以通过把模糊半径设置为0，可以不影响布局设置边框