CSS3新特性总结

CSS3新特性总结
1.边框
border-radius: 1-4 length|% / 1-4 length|%;
每个半径的四个值的顺序是：左上⾓，右上⾓，右下⾓，左下⾓。

若省略左下⾓，和右上⾓相同，省略右下⾓，左上⾓相同，省略右上⾓，和左上⾓相同。

border-top-left-radius: 20px 50px;
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow ⽔平阴影位置，允许负值。

必需
v-shadow 垂直阴影位置，允许负值。

必需
blur 模糊距离
spread 阴影⼤⼩
color 阴影颜⾊
inset 从外层的阴影改变阴影内测阴影
box-shadow: 10px 10px 5px 5px #dddddd;
border-image: source slice width outset repeat|initial|inherit;
border-image-source: url(border.png)
⽤于指定要⽤于绘制边框的图像
border-image-slice: number | % | fill;
number 数字表⽰图像的像素或向量的坐标
% 百分⽐图像的⼤⼩是相对的：⽔平偏移图像的宽度，垂直偏移图像的⾼度
fill 保留图像的中间部分
指定顶部，右，底部，左边缘的图像向内偏移，分为九个区域：四个⾓，四边和中间。

图像中间部分将被丢弃（完全透明的处理），除⾮填写关键字。

如果省略第四个，它和第⼆个相同，省略第三个，它和第⼀个相同，省略第⼆个，它和第⼀个相同
border-image-width: number | % | auto;
图像边界宽度，四个值⽤于吧border图像区域分为九个部分。

代表上，右，底部，左，两侧向内距离。

若第四个值被省略，他和第⼆个是相同的，
第三个省略，和第⼀个是相同的。

如果也省略了第⼆个，他和第⼀个是相同的。

不允许拥有负值
border-image-outset: length | number;　
指定在边框外部绘制 border-image-area 的量，包括上下部和左右部分，若第四个值被省略，他和第⼆个是相同的，第三个省略，和第⼀个是相同的。

如果也省略了第⼆个，他和第⼀个是相同的。

不允许拥有负值
border-image-repeat: stretch | repeat | round | initial | inherit;
stretch 默认值。

拉伸图像来填充区域
repeat 平铺图像来填充区域
round 类似repeat。

如果⽆法完整平铺所有图像，则对图像进⾏缩放以适应区域 space 类似repeat。

如果⽆法完整平铺所有图像，扩展空间会分布在图像周围
initial 将此属性设置为默认值
inherit 从⽗元素中继承该属性
2.背景
background-image 添加背景图⽚
background-size 背景图⽚的⼤⼩
background-origin 指定了背景图像的位置区域
background-clip 背景剪裁属性是从指定位置开始绘制
border-box 默认值。

padding-box
content-box
3.渐变
可以再两个或多个指定的颜⾊之间显⽰平稳的过渡
线性渐变（Linear Gradients） 向下/向上/向左/向右/对⾓⽅向
径向渐变（Radial Gradients） 由它们的中⼼定义
　线性渐变
从上到下（默认）起点红，慢慢过渡到黄⾊
background-image: linear-gradient(red, yellow);
从左到右
background-image: linear-gradient(to right, red, yellow);
对⾓从左上到右下
background-image: linear-gradient(to bottom right, red, yellow);
　使⽤⾓度
如果想要再渐变⽅向上做更多的控制，你可以定义⼀个⾓度，⽽不⽤定义⽅向
background-image: linear-gradient(10deg, red, yellow);
多个颜⾊渐变（从左到右）
background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo,violet);
使⽤透明度，从左到右，起点是完全透明，慢慢过渡到完全不透明的红⾊。

background-image: linear-gradient(ro right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
重复的线性渐变
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
<div style='height: 200px;background-image: repeating-linear-gradient(red, yellow 10%, green 20%);'>
</div>
　径向渐变
必须⾄少定义两种颜⾊，
background-image: radial-gradient(red, green, blue);
颜⾊节点不均匀分布
background-image: radial-gradient(red 5%, green 15%, blue 60%);
设置不同形状的渐变：circle 表⽰圆形，ellipse 表⽰椭圆形。

默认 ellipse
background-image: radial-gradient(circle, red, yellow, green);
设置渐变⼤⼩size：有四个值 closest-side farthest-side closest-corner farthest-corner background-image: radial-gradient(size变量 at 60% 55%, red, yellow, black);
重复径向渐变
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
4.⽂本效果
text-shadow:h-shadow v-shadow blur color; ⽂本阴影
h-shadow 必需，⽔平阴影位置。

允许负值
v-shadow 必需，垂直阴影位置。

允许负值
blur 可选，模糊的距离
color 可选，阴影颜⾊
box-shadow 盒⼦阴影
也可以再::before 和 ::after 两个伪元素中添加阴影效果。

text-overflow ⽂本溢出如何显⽰溢出内容
clip 修剪⽂本
ellipsis 显⽰省略号来表⽰被修剪的⽂本
string 使⽤给定的字符串来代表被修剪的⽂本
word-wrap 允许长的内容可以⾃动换⾏
normal 只在允许的断字点换⾏（默认）
break-word 再长单词或URL地址内部进⾏换⾏
word-break 换⾏规则
normal 默认
break-all 允许再单词内换⾏
keep-all 只能在半⾓空格或连字符串处换⾏
text-justify 怎样对齐⽂本及对齐间距
auto 浏览器决定
none 禁⽤齐⾏
inter-word 增加/减少单词间的间隔
inter-ideograph ⽤表意⽂本来排齐内容
inter-cluster 只对不包含内部单词间隔的内容进⾏排齐
distribute 类似报纸版⾯
kashida 通过拉伸字符串来排齐内容
text-align-last ⽂本最后⼀⾏对齐规则
auto 默认值
left 最后⼀⾏向左对齐
right 右
center 居中
justify 两端对齐
start 最后⼀⾏在⾏开头对齐
end 最后⼀⾏在⾏末尾
hanging-punctuation 指定⼀个标点符号是否会在启动或在结束时⽂本⾏框之外 none 不在⽂本⾏的开头还是结尾的⾏框之外放置标签符号
first 标点附着在⾸⾏开始边缘之外
last 标点附着在⾸⾏结尾边缘之外
5.字体
font-family 规定字体的名称
src 定义字体⽂件的URL
font-stretch 定义如何拉伸字体，
font-style 定义字体的样式
font-weight 定义字体的粗细
unicode-range 定义字体⽀持的 UNICODE 字符范围
6.2D转换
rotate() 在⼀个给定度数顺时针旋转的元素，允许负值
transform: rotate(30deg); 旋转30度
translate() 根据xy位置给定的参数，从当前元素位置移动
transform: translate(50px, 100px);
scale() 该元素增加或减少的⼤⼩，取决于宽度和⾼度的参数
scaleX()
scaleY()
transform: scale(2,3); 转变宽度为原来的⼤⼩的2倍，和其原始⼤⼩3倍的⾼度。

skew() 包含两个参数值，分别表⽰X轴和Y轴倾斜的⾓度，如果第⼆个参数为空，则默认为0，参数为负表⽰向反⽅向倾斜 skewX() 表⽰只在X轴⽔平⽅向倾斜
skewY() 表⽰只在Y轴垂直⽅向倾斜
transform: skew(30deg, 20deg); 在X轴和Y轴上倾斜20度和30度
matrix() 有六个参数，包含旋转，缩放，移动，和倾斜
transform: matrix(0.8, 0.5, -0.5, 0.8, 0 ,0); 使⽤矩阵计算出转换值
7.3D转换
rotate3d(x, y, z, angle) 定义3D旋转
rotateX(x) 沿X轴3D旋转
transform: rotateX(120deg);
rotateY(y) 沿Y轴3D旋转
rotateZ(z) 沿Z轴3D旋转
scale3d(x, y, z) 定义3D缩放转换
scaleX(x) 定义3D缩放转换，通过给定的X值
scaleY(y) 定义3D缩放转换，通过给定Y值
scaleZ(z) 定义3D缩放转换，通过给定Z值
translate3d(x, y, z) 定义3D转化
translateX(x) 定义3D转化,仅使⽤⽤于X轴的值
translateY(y) 定义3D转化,仅使⽤⽤于Y轴的值
translateZ(z) 定义3D转化,仅使⽤⽤于Z轴的值
matrix3d(n,...,n) ⾥⾯16个值，使⽤4X4矩阵计算各个属性值
8.过渡
元素从⼀种样式逐渐改变为另⼀种的效果
必须规定两项内容，指定要添加效果的css属性
指定效果的持续时间
指定宽度属性的过渡效果，时长为2s
transition: width 2s;
指定多项改变
transition: width 2s, height 2s, transform 2s;
transition 简写属性，⽤于在⼀个属性中设置四个过度属性
transition-property 规定应⽤过渡 CSS 属性的名称
none 没有属性会获得过度效果
all 所有属性都将获得过渡效果
property 定义应⽤过渡效果的 CSS 属性名称列表，列表以逗号分隔
transition-duration 定义过度效果花费的时间，默认 0
transition-timing-function 规定过渡效果的时间曲线。

默认 ease
linear 规定以相同速度开始⾄结束的过渡效果
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果
ease-in 规定以慢速开始的过渡效果
ease-out 规定以慢速结束的过渡效果
ease-in-out 规定以慢速开始和结束的过渡效果
cubic-bezier(n, n, n, n) 在 cubic-bezier 函数中定义⾃⼰的值，可能的值是0-1之间的数值 transition-delay 规定过渡效果何时开始，默认 0
9.动画
@keyframes 规则是创建动画
@keyframes 规则内指定⼀个 CSS 样式和动画将逐步从⽬前的样式更改为新的样式
制作⼀个动画，红⾊到黄⾊ 5s
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
width: 100px;
height: 100px;
background: red;
animation: myfirst 5s;
}
@keyframes myfirst {
from {
background: red;
}
to {
background: yellow;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
动画是使元素从⼀种演⽰逐渐变化为另⼀种样式的效果。

⽤百分⽐来规划变化发⽣的时间，或⽤关键字 from to ，等同于 0% 和 100%
0% 是动画的开始，100% 是动画的完成
@keyframes myfirst {
0% {background: red; left: 0px; top: 0px;}
25% {background: yellow; left: 200px; top: 0px;}
50% {background: blue; left: 200px; top:200px;}
75% {background: green; left: 0px; top: 200px;}
100% {background: red; left: 0px; top: 0px;}
}
animation 所有动画属性的简写属性
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
animation-name 规定@keyframes 动画的名称
animation-duration 规定动画完成⼀周所花费的时间，默认0
animation-timing-function 规定动画的速度曲线，默认0
linear 从头到尾的速度是相同的
ease 默认。

动画以低俗开始，然后加快，在结束前变慢
ease-in 低速开始
ease-out 低速结束
ease-in-out 低速开始和结束
cubic-bezier(n, n, n, n) 在cubic-bezier函数中⾃⼰的值。

可能的值是从0-1的数值
animation-fill-mode 规定当动画不播放时，要应⽤到元素的样式
none 默认值，动画在执⾏之前和之后不会应⽤到任何样式到⽬标元素
forwards 在动画结束后，动画将应⽤该属性值（由 animation-iteration-count 决定）
backwards 动画将应⽤在animation-delay定义期间启动动画的第⼀次迭代的关键帧中定义的属性值 both 动画遵循 forwards 和 backwards 的规则，也就是说，动画会在两个⽅向上扩展动画属性
animation-delay 规定动画何时开始，默认0
animation-iteration-count 规定动画被播放的次数，默认1
animation-direction 规定动画是否在下⼀周期逆向播放，默认normal
normal 默认值。

正常播放
reverse 动画反向播放
alternate 动画在奇数次正向播放，在偶数次反向播放
alternate-reverse 在奇数次反向播放，偶数次正向播放
animation-play-state 规定动画是否正在运⾏或暂停，默认 running
paused 指定暂停动画
running 指定正在运⾏的动画
10.多列
CSS3可以将⽂本内容设计成像报纸⼀样的多列布局
column-count 指定某个元素应分为的列数
number 列的最佳数⽬将其中的元素的内容⽆法流出
auto 列数将取决于其他属性，例如：‘column-width’
column-fill 指定如何填充列
balance 列长短平衡，浏览器应尽量减少改变列的长度 auto 列顺序填充，他们将有不同的长度
column-gap 指定列之间的间距
length ⼀个指定的长度
normal 指定⼀个列之间的普通差距
column-rule 所有column-rule-*属性的简写
column-rule-color 两列间边框的颜⾊
column-rule-style 两列间边框的样式
column-rule-width 两列间边框的厚度
column-span 指定元素应该跨越多少列
1 元素应跨越⼀列
all 元素应该跨越所有列
column-width 指定列的宽度
auto 浏览器决定
length 列宽度
columns column-width 与 column-count 的简写属性
指定列的宽度和数量
columns: 100px 3;
11.按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
</head>
<body>
<div>
<button>默认按钮</button>
<a href="#" class="button">链接按钮</a>
<button class="button">按钮</button>
<input type="button" class="button" value="输⼊框按钮">
</div>
</body>
</html>
cursor: not-allowed; 设置禁⽤按钮
写⼀个按钮动画，⿏标移上去有⼀个动画效果，添加‘>>’
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.button {
display: inline-block;
border-radius: 4px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '»';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
</style>
</head>
<body>
<button class="button" style="vertical-align:middle"><span>Hover </span></button>
</body>
</html>
12.框⼤⼩
box-sizing 设置 width 和 height 属性中是否包含 padding 和 border
content-box 默认值。

指定元素的宽度和⾼度适⽤于box的宽度和⾼度。

元素的填充和边框布局和绘制指定宽度和⾼度除外
border-box 指定宽度和⾼度确定元素边框，也就是说，对元素指定宽度和⾼度包括了padding 和 border。

通过从已设定的宽度和⾼度分别减去边框和内边距才能得到内容的宽度和⾼度。

默认情况下
width + padding +border = 元素实际宽度
height + padding + border = 元素实际⾼度
设置 border-box
width = 元素实际宽度 height = 元素实际⾼度。