CSS3 介绍

display: box

特点：

• 等高(宽)的栏目
• 独立的元素顺序
• 指定元素之间的关系
• 灵活的尺寸和对齐方式

<div class="wrap">
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
</div>

box-orient

设置弹性盒模型对象的子元素的排列方式。

取值：

• horizontal(默认)
• vertical

box-pack

设置弹性盒模型对象的子元素的排列方式。

取值：

• start(默认)
• center
• end
• justify

box-align

设置弹性盒模型对象的子元素的排列方式。

取值：

• start
• center
• end
• baseline
• stretch(默认)

box-flex

设置弹性盒模型对象的子元素如何分配其剩余空间。

取值：<number>

• 1 | - | -
• 1 | 1 | 1
• 1 | 2 | 1
• 2 | 3 | 5

box-ordinal-group

设置弹性盒模型对象的子元素的显示顺序。

取值：<integer>

• 默认
• 1 | 3 | 2
• 3 | 1 | 2
• 3 | 1 | 1

box-direction

设置弹性盒模型对象的子元素的排列顺序是否反转。

取值：

• normal(默认)
• reverse

box-lines

设置弹性盒模型对象的子元素是否可以换行显示。

取值：

single(默认) | multiple

box-flex-group

设置弹性盒模型对象的子元素的所属组。

取值：<integer>

PS: 以上2个目前都未实现

border-radius ( 圆角 )

基本语法：水平与垂直半径相同时

border-radius: 10px;

长度值：

百分比：

border-radius ( 圆角边框 )

基本语法：水平与垂直半径相同时

border-radius: 10px 30px

border-radius: 10px 30px 50px

border-radius: 10px 30px 70px 50px

border-radius ( 圆角边框 )

基本语法：水平与垂直半径不同时

border-radius: 水平半径{1,4} / 垂直半径{1,4}

border-radius: 60px / 30px

border-radius: 10px 50px / 20px 40px 60px 80px

border-radius ( 圆角边框 )

拆分语法：

border-top-left-radius: 20px;
border-top-right-radius: 80px 40px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 70px;

✍画个鸡蛋？

border-radius: 50% / 65% 65% 35% 35%;

border-image ( 图像边框 )

border-image:url(res/border.png) 27 27 27 27 / 27px 27px 27px 27px repeat

box-shadow ( 盒阴影 )

box-shadow: 0 5px 20px 0 red

水平偏移：

垂直偏移：

模糊半径：

阴影扩展：

内阴影

linear-gradient() (线性渐变)

• linear-gradient(red, green)
• linear-gradient(red 20%, blue 80%, green)
• linear-gradient(top, red 50px, green 50px)
方向： top(默认) right bottom left
• linear-gradient(45deg, red, blue, green)
角度：

radial-gradient() ( 径向渐变 )

• radial-gradient(red, yellow 10%, #1E90FF 50%, white)
• radial-gradient(20px 100%, red, yellow 10%, #1E90FF 50%, white)
• radial-gradient(center, circle, red, yellow 10%, #1E90FF 50%, white)
形状： circle ellipse
• radial-gradient(20%, circle closest-side, red, yellow 10%, #1E90FF 50%, white)
距离： closest-side/contain closest-corner farthest-side farthest-corner/cover
半径： 100px 25% 33% 33%

repeating-linear-gradient()
( 重复线性渐变 )

repeating-radial-gradient()
( 重复径向渐变 )

✍画条彩虹？

background-image: radial-gradient(
  50% 110%,    ellipse farthest-side,
  white 56%,   #FF4D4D 59%, #FFA64D 62%, #FFDC73 65%,
  #93FF26 68%, #4DFFFF 71%, #2693FF 74%, #D24DFF 77%,
  white 80%);

background-image

• none：无背景图像。
• <url>：使用绝对或相对地址指定背景图像。
• <linear-gradient>：使用线性渐变创建背景图像
• <radial-gradient>：使用径向(放射性)渐变创建背景图像
• <repeating-linear-gradient>：使用重复的线性渐变创建背景图像
• <repeating-radial-gradient>：使用重复的径向渐变创建背景图像

background: -webkit-linear-gradient(#fff, olive);
background: -moz-linear-gradient(#fff, olive);
background: -ms-linear-gradient(#fff, olive);
background: -o-linear-gradient(#fff, olive);
background: linear-gradient(#fff, olive);

background-attachment

设置背景图像是随对象内容滚动还是固定的。

border: 2px solid #333;
height: 200px;
overflow: auto;
background: url(res/icon.png) no-repeat 50% top;

background-repeat

设置对象的背景图像如何铺排填充。

border: 2px solid #333;
height: 240px;
background: url(res/icon.png) no-repeat 0 0;

background-origin

设置对象的背景图像background-position的原点(位置)。

border: 10px solid rgba(0,0,0,.5);
padding: 20px;
height: 160px;
background: url(res/icon.png) no-repeat 0 0;

background-size

设设置对象的背景图像的尺寸大小。

border: 10px solid rgba(0,0,0,.5);
padding: 20px;
height: 120px;
background: url(res/icon.png) no-repeat 0 0;

background-clip

设置指定对象的背景图像向外裁剪的区域。

border: 10px solid rgba(0,0,0,.5);
padding: 20px;
height: 80px;
background: url(res/icon.png) no-repeat 0 0;
background-size: 64px;
background-origin: border-box;

Multiple background

设置对象的多重背景图像（background-color不能设置多重）。

height: 200px;
border: 2px solid #333;
background:url(res/logo.png) no-repeat center,
           linear-gradient(#fff,rgba(255,255,255,.5)),
           skyblue;
background-size: 128px 128px, 100% 50%, 100% 100%;

box-sizing

width: 200px;
height: 200px;
padding: 20px;
border: 10px solid red;

resize

设置对象是否允许用户缩放，调节元素尺寸大小。

如果希望此属性生效，需要设置对象的overflow属性，值可以是auto,hidden或scroll。

ime-mode

设置是否允许用户激活输入中文，韩文，日文等的输入法（IME）状态。

columns

columns: 200px

宽度：

列数：

column-width

设置对象每列的宽度

column-width: 200px

column-count

设置对象每列的列数

column-count: 4

column-rule

设置对象的列与列之间的边框，参阅border属性。

column-rule: 5px dashed blue

column-gap

column-gap: 50px

列间距：

column-span

column-span: all

横跨所有列

column-break-before

设置对象之前是否断行。

• auto(默认)
• always
• avoid

column-break-after

设置对象之后是否断行。

取值：auto | always | avoid

column-break-inside

设置对象内部是否断行。

取值：auto | avoid

E:nth-child(n)

<ul class="balls balls-1">
    <li>1</li>...<li>10</li>
</ul>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

E:nth-last-child(n)

<ul class="balls balls-2">
    <li>1</li>...<li>10</li>
</ul>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

E:only-child

.balls > li:only-child { ... }

<ul class="balls">
    <li>1</li>
</ul>
<ul class="balls">
    <li>1</li><li>2</li><li>3</li>
</ul>

• 1

• 1
• 2
• 3

E:first-child

.balls > li:first-child { ... }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

E:last-child

.balls > li:last-child { ... }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

type 系列

• .test > p:first-of-type {border-color:red}
• .test > div:last-of-type {border-color:red}
• .test > :only-of-type {border-color:red}
• .test > div:nth-of-type(2) {border-color:red}
• .test > div:nth-last-of-type(3) {border-color:red}

状态 系列

• input:enabled + span {color:red}
• input:disabled + span {color:red}
• input:checked + span {color:red}

E:not()

匹配不含有s选择符的元素E。

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

E:root

匹配E元素在文档的根元素。在HTML中，根元素永远是HTML。

E:empty

匹配没有任何子元素（包括text节点）的元素E。

E:target

匹配相关URL指向的E元素。

✍该怎么选？

选择前4个元素

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

.balls > li:nth-child(-n+4) { ... }

从第一个开始，选择每第四个

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

.balls > li:nth-child(4n+1) { ... }

长度 (Length)

rem

相对长度单位，相对于根元素(即html元素)font-size计算值的倍数。

html->32px

font-size:0.5em font-size:2em

font-size:0.5em font-size:2rem

角度 (Angel)

90deg = 100grad = 0.25turn ≈ 1.570796326794897rad

deg

度（Degress）。一个圆共360度

grad

梯度（Gradians）。一个圆共400梯度

turn

转、圈（Turns）。一个圆共1圈

rad

弧度（Radians）。一个圆共2π弧度

scale()

取值：<x:number>[,<y:number>]

scale(1, 1)

X:

Y:

scaleX() scaleY()

以下三种语法效果一样

transform: scale(2);

transform: scale(2, 2);

transform: scaleX(2) scaleY(2);

translate()

取值：<x:length>[,<y:length>]

translate(0, 0)

X:

Y:

translateX() translateY()

以下两种语法效果一样

transform: translate(100px, 100%);

transform: translateX(100px) translateY(100%);

transform: translate(100%);

skew()

取值：<x:angel>[,<y:angel>]

skew(0, 0)

X:

Y:

skewX() skewY()

以下两种语法效果一样

transform: skew(100deg, 100deg);

transform: skewX(100deg) skewY(100deg);

transform: skew(100deg);

rotate()

取值：<angel>

rotate(0)

Angel:

matrix()

取值：<number>,<number>,<number>,<number>,<number>,<number>

矩阵。。。

transform-origin

取值：x: <percentage> | <length> | left | center | right
　　　y: <percentage> | <length> | top | center | bottom

transfarm: scale(1.5);

transform语法

transform: rotate(30deg) scale(1.5) skew(10deg, 50deg);
transform-origin: top left;

transition

div {
   transition: transform ease-in .5s;
}
div:hover {
   transform: scale(2);
}

transition-property

设置对象中的参与过渡的属性。

transition-property: all; /*默认*/
transition-property: none;
transition-property: background-color;
transition-property: background-color, height, width;

~所有动画属性列表

transition-duration

设置对象过渡的持续时间。

transition-duration: 2s;
transition-duration: 4000ms;
transition-duration: 4000ms, 8000ms;

transition-timing-function

设置对象中过渡的类型。

transition-timing-function

取值：cubic-bezier(P1x, P1y, P2x, P1y)

ease-in-out： 由慢到快再到慢→贝塞尔曲线(0.42, 0, 0.58, 1.0)

transition-delay

设置对象延迟过渡的时间。

transition

复合语法

transition: width 3s, height 2s 2s;
transition: background-color 3s linear 1s;
transition: 4s ease-in-out;
transition: 5s;

animation

div:hover i {
    animation: loading 3s ease-out infinite
}
@keyframes loading{
    0% { width: 0 }
    100% { width: 100% }
}

↑ 鼠标移上去 ↑

animation 独立属性

div {
    animation: name 3s ease 1s 3 alternate;
}

• animation-name：name（对应keyframes的名称）
• animation-duration：3s（持续时间）
• animation-timing-function：ease（过渡类型）
• animation-delay：1s（延迟时间）
• animation-iteration-count：3（循环次数）|| infinite
• animation-direction：alternate（反向运动）|| normal