CSS3新增选择器与背景图片的设置
CSS3新增选择器与背景图片的设置
1.选择器
1.1基本选择器
1.2（层次）关系选择器
1.3动态伪类选择器
1.4目标伪类选择器
例：
#html:target h3{color:#f00;}
//点击a时，#html下的h3字体颜色改变
<a href="#html">点击a标签时，修改#html的样式</a>
<div id="html">
<h3>html是什么</h3>
<p>html是xxx</p>
</div>
1.5 UI元素状态伪类选择器
1.6 结构选择器
1.7 否定选择器
1.8 属性选择器
Input[value]{background:red;}
Input[value=”abc”]{background:green;} 匹配属性值一样的元素
Input[value^=”abc”]{background:#ff0;} 匹配起始位置
Input[value$=”abc”]{background:#00f;} 匹配结束位置
Input[value*=”abc”]{background:#00f;} 无论任何位置都可以匹配到
<input type=”text”>
<input type=”text” value=”abc”>
<input type=”text” value=”def”>
<input type=”text” value=”abc_123”>
<input type=”text” value=”def_abc”>
1.9伪元素选择器
：after 指定元素之后
：before 指定元素之前
：first-letter 对第一个字符的操作
P : first-letter{color:#f00}
：first-line 对第一行的操作
P : first-line{color:#ff0}
p：：selection 选中元素的一个操作（火狐不支持需要加前缀-moz-）
p：：selection{color:#f00}
2.新增属性
2.1文本的阴影text-shadow
Eg：text-shadow:5px 5px 5px #f66，.....;//多个用逗号隔开
Eg：（参数形式为：X坐标 Y坐标 阴影模糊度 颜色）
2.2文本溢出text-overflow
值：clip 无省略号 ellipsis省略号
配合width和overflow:hidden和white-space:nowrap一块使用
2.3文本换行word-wrap（默认一行显示）
在长单词或URL地址内部进行换行
2.4 字体图标
@font-face{//字体导入
font-family: name;//
src:url(设置路径);
}
P{
font-family: name;
font-size: 100px;
}
2.5 背景属性设置
2.5.1背景尺寸
Background-size:数值(水平)数值(垂直）;等比缩放（水平垂直）；
Background-size: cover ; 等比缩放到背景完全覆盖（背景图显示不完全）；
例：配合/*background-position:center;*/使用；重要内容居中显示
Background-size: contain ; 背景图被包裹，可能会有区域留白；
2.5.2 背景图片定位区域
Background-origin:border-box，padding-box，center-box;
（默认是以padding-box区域开始摆放）
2.5.3 背景最终显示区域
Background-clip:border-box，padding-box，center-box;
(默认是以padding-box区域显示)
2.5.4 多张背景图设置
注意：多张背景图是以逗号隔开
例：
background:url(路径) no-repeat，
url(路径) no-repeat，
url(路径) no-repeat，
........;
2.6 边框圆角 border-radius
例：
border-radius: 10px;
一个值表示上下左右
border-radius: 10px 20px;
第一个值表示左上角、右下角；第二个值表示右上角、左下角
border-radius: 10px 20px 30px;
第一个值表示左上角；第二个值表示右上角、左下角；第三个值表示右下角。
border-radius:10px 20px 30px 40px;
左上角 右上角 右下角 左下角
2.7 边框图片border-image
2.7.1 图片导入 border-image
border-image:url("url") A B C D/border-width；border-image中必须至少指定5个参数，
第一个参数作为边框使用图像的路径，
后4个参数表示图像进行分隔时的上边距，右边距，下边距，左边距
border-width:表示边框的宽度
border-image: url(borderimage.png) 25 25 25 25/5px ；连写
2.7.2 图片路径border-image-source:url();使用绝对或相对地址指定图像。
2.7.3 图片剪裁border-image-slice:位置,其有1~4个参数.
2.7.4边框图片的平铺 border-image-repeat:
repeat（重复）/round（平铺）/stretch（拉伸）;重复性border-image-outset:边框扩展
2.7.5 向外延伸 border-image-outset:数值；
2.8 边框阴影 box-shadow
水平 垂直 模糊 延伸 颜色 [inset盒子内部](默认为外部)
例：
Box-shadow:0px 0px 0px 0px red [inset];//红字可以为负值
2.9 渐进增强和优雅降级
2.9.1 渐进增强
针对低版本浏览器进行构建页面，保证最基本的功能
2.9.2 优雅降级
一开始就构建完整的功能，然后再针对低版本浏览器进行兼容
2.9.3 区别
*优雅降级是从复杂的现状开始
*渐进增强则是从一个非常基础的，最低版本开始，不断扩充，以适应未来环境的需要。
例：
.transition { /*渐进增强写法*/
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.transition { /*优雅降级写法*/
transition: all .5s;
-o-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
}