一，边框
1，圆角效果 border-radius
语法：border-radius: 5px 4px 3px 2px;
四个半径值分别是左上角、右上角、右下角和左下角，顺时针。
/*一个圆的实现效果*/
div{
height:100px;/*与width设置一致*/
width:100px;
background:#9da;
border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/
}
2，阴影 box-shadow
语法：box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
box-shadow是向盒子添加阴影。支持添加一个或者多个。
3，边框图片 border-image
语法：background:url(xx.jpg) 0 0 0 0 round/repeat/stretch;
顾名思义就是为边框应用背景图片，它和我们常用的background属性比较相似。
url为图片地址，后面设置四个边切割图片的宽度（像素可以省略px），round平铺，repeat重复，stretch拉伸
二，文字和字体
1，文字溢出
语法：text-overflow: ellipsis/clip;
text-overflow用来设置是否使用一个省略标记ellipsis(...)，clip剪切，标示对象内文本的溢出。
但是text-overflow只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，还须定义强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果，代码如下：
.class{
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
2，嵌入字体
语法：@font-face {font-family : 字体名称;src : 字体文件在服务器上的相对或绝对路径;}
@font-face能够加载服务器端的字体文件，让浏览器端可以显示用户电脑里没有安装的字体。
3，文字阴影
语法：text-shadow: X-Offset Y-Offset blur color;
X-Offset：表示阴影的水平偏移距离，其值为正值时阴影向右偏移，反之向左偏移；
Y-Offset：是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移，反之向上偏移；
Blur：是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将Blur值设置为0；
Color：是指阴影的颜色，其可以使用rgba色。
三，背景
1，背景图位置 background-origin
语法：background-origin ： border-box | padding-box | content-box;
参数分别表示背景图片是从边框，还是内边距（默认值），或者是内容区域开始显示。
2，背景图裁剪 background-clip
语法：background-clip ： border-box | padding-box | content-box | no-clip
参数分别表示从边框、或内填充，或者内容区域向外裁剪背景。no-clip表示不裁切。
3，背景图尺寸 background-size
语法：background-size: auto | <长度值> | <百分比> | cover | contain
设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。
auto：默认值，不改变背景图片的原始高度和宽度；
<长度值>：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放；
<百分比>：0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上；
cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器；
contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。
4，背景多图设置
语法：background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...
多重背景，也就是CSS2里background的属性外加origin、clip和size组成的新background的多次叠加，缩写时为用逗号隔开的每组值；用分解写法时，如果有多个背景图片，而其他属性只有一个（例如background-repeat只有一个），表明所有背景图片应用该属性值。
.task {
background: url("test.png") no-repeat,
url("test.png") no-repeat;
background-position: left top,150px 60px;
background-repeat: no-repeat;
}
四，选择器
1，伪类选择器(1)
- 属性选择器
E[attr ^|$|* = "value"]{}：使用^表示以"value"开头属性值；使用$表示以"value"结尾的属性值；使用*表示包含"value"的属性值。 - 根选择器
:root{}匹配元素E所在文档的根元素。在HTML文档中，根元素始终是<html>。 - 否定选择器
:not(condition){}可以选择除某个元素之外的所有元素。 - 空选择器
:empty{}用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。 - 目标选择器
#id:target{}用来匹配文档(页面)的url的某个标志符的目标元素。 - 首元素选择器
:first-child{}选择父元素的第一个子元素的元素E。 - 尾元素选择
:last-child{}选择父元素的最后一个子元素E。 - 子元素选择器
:nth-child(n){}定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even). - 反向子元素选择器
:nth-last-child(n){}从某父元素的最后一个子元素开始计算，来选择特定的元素。 - 类型首子类选择器
:first-of-type{}定位一个父元素下的某个类型的第一个子元素。
.wrapper > p:first-of-type {
background: orange;
}
- 类型尾子类选择器
:last-of-type{}定位一个父元素下的某个类型的最后一个子元素。 - 类型子类选择器
:nth-of-type(n){}定位一个父元素下的某个类型的第n个子元素。选择器中的“n”参数也一样，可以是具体的整数，也可以是表达式，还可以是关键词。 - 类型子类选择器
:nth-last-of-type(n){}反向定位一个父元素下的某个类型的第n个子元素。选择器中的“n”参数也一样，可以是具体的整数，也可以是表达式，还可以是关键词。 - 单子类选择器
:only-child{}选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。 - 子类单类选择器
E:only-of-type{}选择一个元素他有很多个子元素，而其中只有一种类型的子元素是唯一的。
2，伪类选择器(2)
- 禁用选择器
:disabled{}选择表单元素不可用（“:disabled”）状态的元素。 - 可用选择器
:enabled{}选择表单元素可用（“:enabled”）状态的元素。 - 选中选择器
:checked{}选择表单单选按钮和复选按钮都具有选中和未选中状态。 - 鼠标选中选择器
::selection{}选择突出显示的文本(用鼠标选择文本时的文本)。 - 只读选择器
:read-only{}选择用来指定处于只读状态元素的样式。 - 非只读选择器
:read-write{}选择刚好与“:read-only”选择器相反，主要用来指定当元素处于非只读状态时的样式。 - 伪标签选择器
::before{}和::after{}::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常和"content"配合使用，使用的场景最多的就是清除浮动。
.clearfix::before,
.clearfix::after {
content: ".";
display: block;
height: 0;
visibility: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}
