CSS3

CSS3

CSS 用于控制网页的样式和布局
-webkit-属性适用于Safari 与 Chrome浏览器
-moz-属性 适用于Firefox浏览器

文本效果

text-shadow属性适用于文本阴影
text-shadow: 5px 5px 5px #FF0000;依次定义水平阴影，垂直阴影，模糊的距离，以及阴影的颜色
box-shadow 属性适用于盒子阴影
text-shadow属性向文本添加阴影
text-overflow属性指定应向用户如何显示溢出内容
text-wrap规定文本的换行规则
word-wrap属性是允许对长的不可分割的单词进行分割并换行到下一行。

2D转换

transfrom 适用于2D或3D转换的元素
translate()定义 2D 转换，沿着 X 和 Y 轴移动元素, 根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
rotate() 定义 2D 旋转，顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。
scale()定义 2D 缩放转换,该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数。
skew() 定义 2D 倾斜转换，包含两个参数值，分别表示X轴和Y轴倾斜的角度
skewX()表示只在X轴(水平方向)倾斜。
skewY()表示只在Y轴(垂直方向)倾斜。
matrix（n,n,n,n,n,n） 定义 2D 转换，有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。cos 角度0.886=cos30度 是顺时针走的

3D转换

rotateX()方法，围绕其在一个给定度数X轴旋转的元素。
rotateY()方法，围绕其在一个给定度数Y轴旋转的元素。

转化属性：
transform:向元素应用 2D 或 3D 转换。
transform-origin:允许你改变被转换元素的位置。
transform-style:规定被嵌套元素如何在 3D 空间中显示。
perspective 规定 3D 元素的透视效果。
perspective-origin规定 3D 元素的底部位置。
backface-visibility定义元素在不面对屏幕时是否可见。

3D转换方法：
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) :定义 3D 转换，使用 4x4 矩阵。
translate3d(x,y,z) :定义 3D 转化。
translateX(x) :定义 3D 转化，仅使用用于 X 轴的值。
translateY(y) : 定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z) : 定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z) : 定义 3D 缩放转换。
scaleX(x) :定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y) :定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z) :定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle) :定义 3D 旋转。
rotateX(angle) :定义沿 X 轴的 3D 旋转。
rotateY(angle) :定义沿 Y 轴的 3D 旋转。
rotateZ(angle) :定义沿 Z 轴的 3D 旋转。
perspective(n) :定义 3D 转换元素的透视视图。

过渡

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点，必须规定两项内容：1）指定要添加效果的CSS属性 2）指定效果的持续时间。
transition用于在一个属性中设置四个过渡属性。
transition-property 规定应用过渡的 CSS 属性的名称。
transition-duration 定义过渡效果花费的时间。默认是 0。
transition-timing-function 规定过渡效果的时间曲线。默认是 “ease”。
transition-delay 规定过渡效果何时开始。默认是 0。

动画

@keyframes 规则是创建动画。
@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。必须定义动画的名称和动画的持续时间。如果省略的持续时间，动画将无法运行，因为默认值是0。
可百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和100%。0% 是动画的开始，100% 是动画的完成。
动画属性：
animation 所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name 规定 @keyframes 动画的名称。 3
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function 规定动画的速度曲线。默认是 “ease”。
animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-delay 规定动画何时开始。默认是 0。
animation-iteration-count 规定动画被播放的次数。默认是 1。
animation-direction 规定动画是否在下一周期逆向地播放。默认是 “normal”
animation-play-state 规定动画是否正在运行或暂停。默认是 “running”。

多列布局

添加meta 响应移动端
viewport 视口
width=device-width 宽度等于屏幕的宽
initial-scale=1.0 伸缩比例1.0
mininum-scale=1.0 最小比例1.0
maximum-scale=3.0 最大比例3.0
user-scalable=no 禁止用户缩放
多列属性：
column-count 属性指定了需要分割的列数
column-gap 属性指定了列与列间的间隙。
column-rule-style 属性指定了列与列间的边框样式。
column-rule 属性是 column-rule-* 所有属性的简写。
column-span指定元素跨越多少列
column-width 属性指定了列的宽度。

弹性盒子

弹性盒子是 CSS3 的一种新的布局模式。弹性盒子由弹性容器和弹性子元素组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。
direction 属性为 rtl (right-to-left),弹性子元素的排列方式也会改变，页面布局也跟着改变:
flex-direction 属性指定了弹性子元素在父容器中的位置。
justify-content 属性是内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。
align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
flex-wrap 属性用于指定弹性盒子的子元素换行方式。
align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。

弹性子元素属性：
order 属性设置弹性容器内弹性子元素的属性。
margin-right: auto：使弹性子元素在弹性容器的两上轴方向都完全居中。
align-self 属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。
flex 属性用于指定弹性子元素如何分配空间。

多媒体查询

@media属性值：
not: not是用来排除掉某些特定的设备的。
only: 用来定某种特别的媒体类型。
all: 所有设备，这个应该经常看到。

根据不同的设备 显示不同的box
多媒体类型：
all用于所有设备
screen 用于屏幕设备 电脑 ipaid 手机
print 用于 打印设备
not print 用于不包含打印设备

多媒体查询简单实例：
不加限制条件 所有的屏幕 共有的样式
写min-width 注意： 从小到大写
写max-width 注意 从大到小写

选择器

box:before{}:内容之前
box:after{}:内容之后
first-of-type :选择是当前元素子集里面 li的第一个元素
only-of-type : 找父元素里面仅有一个同类别标签
(序号) :选择子元素, 括号里面写序号
selection :匹配元素中被用户选中或处于高亮状态的部分
input:enabled :选择每一个已启用的输入元素
input:disabled : 选择每一个禁用的输入元素
input:checked : 选择每个选中的输入元素
element1~element2 p~ul 选择p元素之后的每一个ul元素
[attribute^=value] a[src^=“https”] 选择每一个src属性的值以"https"开头的元素
[attribute$=value]a[src$=".pdf"] 选择每一个src属性的值以".pdf"结尾的元素
[attribute*=value] a[src*=“runoob”] 选择每一个src属性的值包含子字符串"runoob"的元素
p:nth-child(2) 选择每个p元素是其父级的第二个子元素
p:last-child 选择每个p元素是其父级的最后一个子级