线性渐变

linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet)

linear-gradient(指定渐变方向, 颜色的起点，颜色的结束)

文本溢出于省略标记

text-overflow:ellipsis; （溢出文本显示省略号）

overflow:hidden; （溢出内容为隐藏）white-space:nowrap; （强制文本在一行内显示）

文字与字体之嵌入字体

@font-face {

font-family : 字体名称;src : 字体文件在服务器上的相对或绝对路径;

}

文字与字体之文本阴影

text-shadow: 水平偏移距离 垂直偏移距离 模糊程度 颜色

背景图片裁剪

background-clip ： border-box | padding-box | content-box | no-clipbackground-clip ： 边框 | 内填充 | 内容 | 不裁剪

属性选择器通配符

a[属性^="value"] 以value开头

a[属性$="value"] 以value结尾 a[属性*="value"] 任意位置

结构性伪类选择器

子选择器 例如#a>p 选择#a的所有子类(直接子类)

• 相邻选择器 选择紧接在另一个元素后的元素，有相同的父元素。只选择第一个相邻的匹配元素

~ 匹配选择器 例如#b~p匹配所有在#b元素之后的所有p元素

:root 选择当前匹配元素根元素 :root === html:not 选择除某个元素之外的所有元素 input:not([属性="value"]):empty 用来选择没有任何内容的元素:first-child 选择父元素的第一个子元素:last-child 选择父元素的最后一个子元素:nth-child(n) 定位某个父元素的一个或多个特定的子元素 ,其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5):nth-last-child(n) 从某父元素的最后一个子元素开始计算，来选择特定的元素。:first-of-type 定位一个父元素下的某个类型的第一个子元素:nth-of-type(n) 定位于父元素中某种类型的子元素:last-of-type 选择是父元素下的某个类型的最后一个子元素:enabled 对可用状态表单元素设置样式:disabled 对不可用状态表单元素设置样式:checked 对选中状态元素设置样式 ::selection 突出显示的文本:read-only 指定处于只读状态元素的样式 元素中设置了“readonly=’readonly’”:read-write 指定当元素处于非只读状态时的样式。::before和::after 用来给元素的前面或后面插入内容

CSS3变形

旋转rote()

扭曲 skew()缩放 scale()位移 translate()

css3动画过渡属性

transition-property:指定过渡或动态模拟的CSS属性

transition-duration:指定完成过渡所需的时间transition-timing-function:指定过渡函数transition-delay:指定开始出现的延迟时间transition ：简写属性设置四个过渡属性 transition(transition-property,transition-duration,transition-timing-function,transition-delay)transition(css属性，过渡时间，过渡函数，延迟时间)transition(all 0 ease 0)默认

css3动画

Keyframes：关键帧 @keyframes 动画名称{…}

animation-name：动画名称animation-duration: 动画时间animation-timing-function：动画播放方式animation-delay：定义动画开始播放时间animation-iteration-count：设置动画播放次数animation-direction：动画播放方向animation-play-state：播放状态animation-fill-mode：定义在动画开始之前和结束之后发生的操作

css3多列

column-count：指定了需要分割的列数。

column-gap 属性指定了列与列间的间隙。column-rule-style 属性指定了列与列间的边框样式：column-rule-width 属性指定了两列的边框厚度:column-rule-color 属性指定了两列的边框颜色：column-rule 属性是 column-rule-* 所有属性的简写。column-width 属性指定了列的宽度。

css3多媒体查询

@media not|only mediatype and (expressions) {

CSS 代码...;

}

@media 除那些设备|特定的媒体类型 and (expressions) {

CSS 代码...;

}