CSS3扫盲篇

CSS3

1. 一些最重要CSS3模块如下：

• 选择器
• 盒模型
• 背景和边框
• 文字特效
• 2D/3D转换
• 动画
• 多列布局
• 用户界面

2. 边框

• border-radius
• box-shadow
• border-image（Internet Explorer 10 及更早的版本不支持 border-image 属性。）

3. 圆角

• 四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
• 三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
• 两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
• 一个值： 四个圆角值相同

border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius

4.背景

1. background-image 不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张

#example1 { 
    background-image: url(img_flwr.gif), url(paper.gif); 
    background-position: right bottom, left top; 
    background-repeat: no-repeat, repeat; 
}

1. background-size 指定背景图像的大小,相对于父元素的宽度和高度的百分比的大小。

3.background-Origin 属性指定了背景图像的位置区域。
content-box, padding-box,和 border-box区域内可以放置背景图像。

1. background-clip 背景剪裁属性是从指定位置开始绘制

div {
    background-clip: border-box|padding-box|content-box;
}

5.渐变

1. 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
2. 径向渐变（Radial Gradients）- 由它们的中心定义

6. 文本效果

阴影效果（可以实现卡片效果）

text-shadow
box-shadow

文本溢出属性指定应向用户如何显示溢出内容

text-overflow: clip | ellipsis

自动换行属性允许您强制文本换行 - 即使这意味着分裂它中间的一个字

word-wrap
word-break

7. 字体

@font-face
CSS
@font-face
{
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight:bold;
}


8. 2D/3D 转换

9. 过渡

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点，必须规定两项内容：
指定要添加效果的CSS属性
指定效果的持续时间。

div
{
    transition: width 2s;
    -webkit-transition: width 2s; /* Safari */
}

10.动画属性

@keyframe，使用前需要定义动画的名称
“`css
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s linear 2s infinite alternate;
/* Firefox: */
-moz-animation:myfirst 5s linear 2s infinite alternate;
/* Safari and Chrome: */
-webkit-animation:myfirst 5s linear 2s infinite alternate;
/* Opera: */
-o-animation:myfirst 5s linear 2s infinite alternate;
}

@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;}
}

@-moz-keyframes myfirst /* Firefox */
{
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;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
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;}
}

@-o-keyframes myfirst /* Opera */
{
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;}
}
“`

11. CSS 多列

column-count 需要分割的列数
还可以指定间隙、边框、宽度

12. 弹性盒模型

弹性容器通过设置 display 属性的值为 flex 或inline-flex将其定义为弹性容器。

13. 多媒体查询

@media