CSS3笔记(包含css2)

三种使用方法:
1、行内式
<标签名 style="属性=属性值···">内容</标签名>
2、内嵌式
<style type="text/css">
选择器:{
属性:属性值···
}
</style>
3、链入式
<link href="URL" type="text/css" rel="stylesheet">


优先级:id选择器>类选择器>标记选择器>通配符选择器


css文本相关样式:
font-size 文字大小px
font-family 设置字体
font-weight 设置字体粗细
normal标准(400)
bold加粗(700)
bolder再加粗
lighter默认细字符
100-900数字越大越粗
font-style 设置字体样式
normal标准
italic斜体
oblique倾斜
font-variant 设置字体变体
normal标准的
small-caps英文字体小型大写字符


css排版样式:
color 设置文本颜色
letter-spacing 设置字体间距
word-spacing 设置单词间距
line-height 设置行高
height 设置元素的高度。
max-height 设置元素的最大高度。
max-width 设置元素的最大宽度。
min-height 设置元素的最小高度。
min-width 设置元素的最小宽度。
width 设置元素的宽度
text-transform 设置英文大小写转换
none不转换
capitalize首字母变大
uppercase全部变大
lowercase全部变小
text-decoration 设置字体效果
none无效果
underline下划线
overling上划线
line-through删除线
text-align 对齐方式
left左
center中
right右
text-indent 设置收首行缩进
em字符宽度倍数
px像素
%百分比
white-space 设置文本格式
normal默认显示
pre按文档书写格式显示
nowrap空格换行无效,内容超出增加滚动条，不自动换行


盒子模型
从外到里 margin外边框>border边框>padding内边距>内容
margin 外边距
margin-top上外边距
margin-right右外边距
margin-bottom下外边距
margin-left左外边距
margin全外边距
border 边框
none没有边框
solid单实线
dashed虚线
dotted点线
double双实现
border-top-style上边框
border-right-style右边框
border-bottom-style下边框
border-left-style左边框
border-style全边框
border-top-width上边框宽度
border-right-width右边框宽度
border-bottom-width下边框宽度
border-left-width左边框宽度
border-width全边框宽度
border-top-color上边框颜色
border-right-color右边框颜色
border-bottom-color下边框颜色
border-left-color左边框颜色
border-color全边框颜色
border-top上边框样式
border-right右边框样式
border-bottom下边框样式
border-left左边框样式
border全边框样式
outline 轮廓
outline-color设置轮廓的颜色
color-name
hex-number
rgb-number
invert
inherit
outline-style设置轮廓的样式
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit
outline-width设置轮廓的宽度
thin
medium
thick
length
inherit
padding 内边距
padding-top上内边距
padding-right右内边距
padding-bottom下内边距
padding-left左内边距
padding全内边距


背景属性
background-color 设置背景颜色
属性名{background-image:url(URL)} 设置图片为背景
background-repeat 设置背景图片模式
repeat沿水平、垂直方向平铺
no-repeat不平埔
repeat-x只沿水平方向平铺
repeat-y只沿垂直方向平铺
background-position 设置图片位置
background-attachment 设置固定方式
scroll随页面一起滚动(默认)
fixed不随页面滚动


块标记独占一行,行内标记可共行
display 类型转换
inline将标记显示为行内标记
block将标记显示为块标记
inline-block将标记显示为行内标记，可对其设置高宽,但不会都、独占一行
none将此标记隐藏


列表
list-style-type 属性
disc黑圆
circle圆
square黑矩形
decimal 1
upper-alpha A
lower-alpha a
upper-roman I
lower-roman i
none不显示任何符号
list-style-image 用于列表之前的图片，调用方式和背景一样，通过url
list-style-position 项目符号的位置
inside位于列表文本内
outside位于列表文本外


超链接伪类
a:link 未访问时样式
a:visited 访问后样式
a:hover 触碰样式
a:active 单击不动时样式


css浮动
float 浮动方式
none不浮动
left左浮动
right右浮动
clear 清除浮动
left清除左浮动
right清除右浮动
both清除左右浮动
overflow-hidden 清除浮动对该元素的影响


定位
position 定位
static静态定位
relative相对定位
absolute绝对定位
fixed固定位置
top向上偏移
bottom向下偏移
left向左偏移
right向右偏移

vertical-align 图片对齐方式
auto根据layout-flow对象
sub竖直对齐文本的下标
super竖直对齐文本的上标
top支持valign的对象顶端对齐
text-top文本与支持valign对象顶端对齐
middle支持valign的对象中部对齐
bottom支持valign的对象底端对齐
text-bottom文本与支持valign对象底端对齐
length由浮点数字和单位标识符组成偏移量


伪元素
:link a:link 选择所有未访问链接
:visited a:visited 选择所有访问过的链接
:active a:active 选择正在活动链接
:hover a:hover 把鼠标放在链接上的状态
:focus input:focus 选择元素输入后具有焦点
:first-letter p:first-letter 选择每个<p>元素的第一个字母
:first-line p:first-line 选择每个<p>元素的第一行
:first-child p:first-child 选择器匹配属于任意元素的第一个子元素的 <]p> 元素
:before p:before 在每个<p>元素之前插入内容
:after p:after 在每个<p>元素之后插入内容
:lang(language) p:lang(it) 为<p>元素的lang属性选择一个开始值


选择器
[title=runoob]
{
    border:5px solid green;
}


css 滤镜
支持滤镜的元素有:body,button,div,img,input,marquee,span,table,td,tr,th,textarea,tfoot,th,thead
透明度滤镜:
filter:Alpha(opacity=n,FinishOpacity=n,Style=n.StartX=n,StartY=n,FinishX=n,FinishY=n)
opacity透明度等级 完全透明0-100不透明
Style透明区域的形状特征 0统一形状，1线性，2放射性，3长方形，
StartX-StartY开始座标
FinishX-FinishY结束座标


模糊滤镜:
filter:Blur(Add=n,Direction=n,Strength=n)
add布尔判断1(默认)或者0是否被改变成印象派的模糊效果
Direction设置模糊方向 默认为向左270
Strength多少像素宽度受到模糊影响默认为5


投射阴影滤镜:
filter:DropShadow(Color=n,Offx=n,Offy=n,Positive=n)
Color设置阴影颜色
Offx x方向偏移量
Offy y方向偏移量
Positive布尔判断1(默认)为任何非透明像素建立可见投影或者0透明像素建立透明效果


对称变换滤镜
filter:FlipH||V
FlipH水平翻转
FlipV垂直翻转


光晕滤镜
filter:Glow(Color=n,Strength=n)
Color发光颜色
Strength强度表现1~255任何整数指定


灰度滤镜
filter:Gray


反色滤镜
filter:Invert


遮罩滤镜
filter:Mask（Color=n）
Color设置遮罩颜色


阴影滤镜:
filter:Shadow(Color=n,Direction=n)
Color投射颜色
Direction投射方向


X射线滤镜:
filter:Xray


波浪滤镜
filter:Wave(Add=n,Freq=n,LightStrength=n,Phase=n,Strength=n)
add是否把对象按照波纹打乱
Freq频率一个产生多少个波纹
LightStrength对波纹增强光影效果0-100
Phase设置正弦波的偏移量
Strength振幅


.blur {-webkit-filter: blur(4px);filter: blur(4px);}
.brightness {-webkit-filter: brightness(250%);filter: brightness(250%);}
.contrast {-webkit-filter: contrast(180%);filter: contrast(180%);}
.grayscale {-webkit-filter: grayscale(100%);filter: grayscale(100%);}
.huerotate {-webkit-filter: hue-rotate(180deg);filter: hue-rotate(180deg);}
.invert {-webkit-filter: invert(100%);filter: invert(100%);}
.opacity {-webkit-filter: opacity(50%);filter: opacity(50%);}
.saturate {-webkit-filter: saturate(7); filter: saturate(7);}
.sepia {-webkit-filter: sepia(100%);filter: sepia(100%);}
.shadow {-webkit-filter: drop-shadow(8px 8px 10px green);filter: drop-shadow(8px 8px 10px green);}


滚动条样式属性:
scrollbar-arrow-color:color    三角箭头颜色
scrollbar-face-color:color 立体滚动条颜色
scrollbar-3dlight-color:color 立体滚动条亮变的颜色
scrollbar-highlight-color:color 滚动条高亮颜色
scrollbar-shadow-color:color 滚动条外阴影颜色
scrollbar-track-color:color 滚动条背景颜色
scrollbar-base-color:color 滚动条基色








css3.0 （兼容问题，可在属性前加-webkit||-moz）


border-radius 圆角属性(设置1—4个属性)
border-radius 所有四个边角 border-*-*-radius 属性的缩写
border-top-left-radius 定义了左上角的弧度
border-top-right-radius 定义了右上角的弧度
border-bottom-right-radius 定义了右下角的弧度
border-bottom-left-radius 定义了左下角的弧度

例子：
div{
border:2px solid #a1a1a1;
padding:10px 40px; 
background:#dddddd;
width:300px;
border-radius:25px;
}
<div>border-radius 属性允许您为元素添加圆角边框！ </div>






box-shadow 阴影(设置四个属性加颜色)
例子:
div{
width:300px;
height:100px;
background-color:yellow;
box-shadow: 10px 10px 5px #888888;(模糊效果5px)
}
<div></div>
例子:文字卡片
div.card {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}
div.header {
    background-color: #4CAF50;
    color: white;
    padding: 10px;
    font-size: 40px;
}
div.container {
    padding: 10px;
}
<div class="card">
  <div class="header">
    <h1>1</h1>
  </div>


  <div class="container">
    <p>January 1, 2016</p>
  </div>
</div>


例子:图片卡片
div.polaroid {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}
div.container {
  padding: 10px;
}
<div class="polaroid">
  <img src="rock600x400.jpg" alt="Norway" style="width:100%">
  <div class="container">
    <p>Hardanger, Norway</p>
  </div>
</div>


border-image 图片边框
例子:
div{
border:15px solid transparent;
width:250px;
padding:10px 20px;
}
#round{
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
}


#stretch{
-webkit-border-image:url(border.png) 30 30 stretch; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 stretch; /* Opera */
border-image:url(border.png) 30 30 stretch;
}
<div id="round">这里，图像平铺（重复）来填充该区域。</div>
<br>
<div id="stretch">这里，图像被拉伸以填充该区域。</div>





background-image 背景图片
background-clip 规定背景的绘制区域。
#example1 {
    border: 10px dotted black;
    padding:35px;
    background: yellow; //全部有背景,也就是border-box
}
#example2 {
    border: 10px dotted black;
    padding:35px;
    background: yellow;
    background-clip: padding-box; //内边距有背景
}
#example3 {
    border: 10px dotted black;
    padding:35px;
    background: yellow;
    background-clip: content-box; //内容有背景
}


background-origin 规定背景图片的定位区域。
content-box 背景图像的相对位置的内容框
padding-box 背景图像内边框的相对位置
border-box 背景图像边界框的相对位置






background-size 规定背景图片的尺寸。
div
{
    background:url(img_flwr.gif);
    background-size:80px 60px;//可以百分比100% 100%背景完全填充
    background-repeat:no-repeat;
}



//不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。
#example1 {
    background-image: url(img_flwr.gif), url(paper.gif);
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;
    padding: 15px;
}
<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>


Gradients 渐变
Linear Gradients 线性渐变 向下/向上/向左/向右/对角方向
为了创建一个线性渐变，你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。
<div id="grad1"></div>
线性渐变 - 从上到下（默认情况下）
#grad1 {
    height: 200px;
    background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(red, blue); /* 标准的语法（必须放在最后） */
}
线性渐变 - 从左到右
#grad {
  background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
  background: linear-gradient(to right, red , blue); /* 标准的语法 */
}
线性渐变 - 对角
#grad {
  background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */
  background: linear-gradient(to bottom right, red , blue); /* 标准的语法 */
}
使用角度
background: linear-gradient(角度, 颜色1, 颜色2..(可使用多个));
换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。
透明度
#grad { //rgba前三者为颜色,后者为透明度
  background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /* Safari 5.1 - 6 */
  background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /* Opera 11.1 - 12*/
  background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /* Firefox 3.6 - 15*/
  background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 标准的语法 */
}
重复的线性渐变
#grad {
  /* Safari 5.1 - 6.0 */
  background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
  /* Opera 11.1 - 12.0 */
  background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);
  /* Firefox 3.6 - 15 */
  background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);
  /* 标准的语法 */
  background: repeating-linear-gradient(red, yellow 10%, green 20%);
}


Radial Gradients 径向渐变 由它们的中心定义
<div id="grad1"></div>
颜色结点均匀分布的径向渐变
#grad {
  background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */
  background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */
  background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */
  background: radial-gradient(red, green, blue); /* 标准的语法 */
}
颜色结点不均匀分布的径向渐变
#grad {
  background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1 - 6.0 */
  background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* Opera 11.6 - 12.0 */
  background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* Firefox 3.6 - 15 */
  background: radial-gradient(red 5%, green 15%, blue 60%); /* 标准的语法 */
}
形状为圆形的径向渐变circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。
#grad {
  background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari 5.1 - 6.0 */
  background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 - 12.0 */
  background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 - 15 */
  background: radial-gradient(circle, red, yellow, green); /* 标准的语法 */
}
不同尺寸大小关键字的使用
closest-side
farthest-side
closest-corner
farthest-corner
#grad1 {
  /* Safari 5.1 - 6.0 */
  background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); 
  /* Opera 11.6 - 12.0 */
  background: -o-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
  /* Firefox 3.6 - 15 */
  background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
  /* 标准的语法 */
  background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
}
 
#grad2 {
  /* Safari 5.1 - 6.0 */
  background: -webkit-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
  /* Opera 11.6 - 12.0 */ 
  background: -o-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
  /* Firefox 3.6 - 15 */
  background: -moz-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
  /* 标准的语法 */
  background: radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
}
重复的径向渐变
#grad1 {
    height: 150px;
    width: 200px;
    background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%); /* Safari 5.1 - 6.0 */
    background: -o-repeating-radial-gradient(red, yellow 10%, green 15%); /* Opera 11.6 - 12.0 */
    background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%); /* Firefox 3.6 - 15 */
    background: repeating-radial-gradient(red, yellow 10%, green 15%); /* 标准的语法（必须放在最后） */
}


CSS3 文本效果
text-shadow 文字阴影
  text-shadow: 5px 5px 5px #FF0000;


text-overflow 溢出属性指定应向用户如何显示溢出内容
text-overflow:'ellipsis'(超出加...)
text-overflow:'clip'(超出切割)
"text-overflow:'>>';"(只在 Firefox 浏览器下有效)(超出切割)


word-wrap CSS3的换行(word-break 属性不兼容 Opera.)
word-wrap:break-word;//允许长文本换行
word-break 单词拆分换行
word-break: keep-all;//单词拆分换行
word-break: break-all;//长度识别,普通换行


@font-face 字体调用
@font-face{
font-family:'ziti';//定义字体的名称
    src:url('ziti/ygyxsziti2.0.ttf');//路径
}
body{
font-family:'ziti',serif;//使用
font-weight:bold;//加粗
}
transform 2D转换
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
transform:rotate(30deg);/* 定度数顺时针旋转的元素 */
-ms-transform:rotate(30deg); /* IE 9 */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
}
<div>你好。这是一个 DIV 元素。</div>
<div id="div2">你好。这是一个 DIV 元素。</div>




translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
div
{
transform: translate(50px,100px);//translate值（50px，100px）是从左边元素移动50个像素，并从顶部移动100像素。
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
}


scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数
-ms-transform:scale(2,3); /* IE 9 */
-webkit-transform: scale(2,3); /* Safari */
transform: scale(2,3); /* 标准语法 */


skew()X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。
transform: skew(30deg,20deg);


matrix()方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。
div
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
}




CSS3 3D转换
rotateX()围绕其在一个给定度数X轴旋转的元素。
div
{
    transform: rotateX(120deg);
    -webkit-transform: rotateX(120deg); /* Safari 与 Chrome */
}
rotateY()围绕其在一个给定度数Y轴旋转的元素。
div
{
    transform: rotateY(130deg);
    -webkit-transform: rotateY(130deg); /* Safari 与 Chrome */
}


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


matrix3d(n,n,n,n,n,n,
n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 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过渡transition
指定要添加效果的CSS属性
指定效果的持续时间。
div
{
    transition: width 2s;
    -webkit-transition: width 2s; /* Safari */
}
多项过渡
div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
    transition: width 2s, height 2s, transform 2s;
}


div:hover {
    width: 200px;
    height: 200px;
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);
}


属性 描述
transition 简写属性，用于在一个属性中设置四个过渡属性。
transition-property 规定应用过渡的 CSS 属性的名称。 3
transition-duration 定义过渡效果花费的时间。默认是 0。
transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"
transition-delay 规定过渡效果何时开始。默认是 0
div
{
    transition-property: width; //宽度改变
    transition-duration: 1s; //花费1s
    transition-timing-function: linear; //过渡时间曲线
    transition-delay: 2s; //过渡效果何时开始
    /* Safari */
    -webkit-transition-property:width;
    -webkit-transition-duration:1s;
    -webkit-transition-timing-function:linear;
    -webkit-transition-delay:2s;
}


@keyframes CSS3动画
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
/* 设置动画 */
@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}


@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:red;}
to {background:yellow;}
}


改变背景色
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}
@keyframes myfirst
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}
 
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}
背景色和位置
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@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;}
}
@-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;}
}




来回运动
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;}
}












@keyframes 规定动画。
@-webkit-keyframes spin {
from {
-webkit-transform: translateZ(-10em)rotateX(0)rotateY(0deg);
transform: translateZ(-10em) rotateX(0) rotateY(0deg);
}
to {
-webkit-transform: translateZ(-10em) rotateX(360deg) rotateY(360deg);
transform: translateZ(-10em) rotateX(360deg) rotateY(360deg);
}
}


animation 所有动画属性的简写属性，除了 animation-play-state 属性。
div{
    animation:mymove 5s infinite;
    -webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */
}
animation-name 规定 @keyframes 动画的名称。
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0
animation-timing-function 规定动画的速度曲线。默认是 "ease"
linear 动画从头到尾的速度是相同的。
ease 默认。动画以低速开始，然后加快，在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
animation-delay 规定动画何时开始。默认是 0。
animation-iteration-count 规定动画被播放的次数。默认是 1(、infinite无限次)
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。
normal 默认值。动画按正常播放。
reverse 动画反向播放
alternate 动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放
alternate-reverse 动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放
animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。
paused 指定暂停动画
running 指定正在运行的动画






CSS3 创建多列


column-count 属性指定了需要分割的列数
div {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}


column-gap 属性指定了列与列间的间隙
div {
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
}


column-rule-style 属性指定了列与列间的边框样式
div {
    -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
    -moz-column-rule-style: solid; /* Firefox */
    column-rule-style: solid;
}


column-rule-width 属性指定了两列的边框厚度
div {
    -webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
    -moz-column-rule-width: 1px; /* Firefox */
    column-rule-width: 1px;
}


column-rule-color 属性指定了两列的边框颜色
div {
    -webkit-column-rule-color: lightblue; /* Chrome, Safari, Opera */
    -moz-column-rule-color: lightblue; /* Firefox */
    column-rule-color: lightblue;
}


column-rule 属性是 column-rule-* 所有属性的简写
column-rule边框的厚度，样式及颜色
div {
    -webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
    -moz-column-rule: 1px solid lightblue; /* Firefox */
    column-rule: 1px solid lightblue;
}


column-span: all;指定元素跨越多少列
h2 {
    -webkit-column-span: all; /* Chrome, Safari, Opera */
    column-span: all;
}




column-width 属性指定了列的宽度
div {
    -webkit-column-width: 100px; /* Chrome, Safari, Opera */
    column-width: 100px;
}


columns是指列的宽度和数量
div
{
    columns:100px 3;
    -webkit-columns:100px 3; /* Safari and Chrome */
    -moz-columns:100px 3; /* Firefox */
}






CSS3 用户界面


resize属性指定一个元素是否应该由用户去调整大小
div
{
    resize:both;
    overflow:auto;
}


box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容
div
{
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    width:50%;
    float:left;
}


outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。
div
{
    border:2px solid black;
    outline:2px solid red;
    outline-offset:15px;
}




CSS 图片


圆角图片
img {
    border-radius: 8px;
}
椭圆形图片
img {
    border-radius: 50%;
}
缩略图
img {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
}
<img src="paris.jpg" alt="Paris" width="400" height="300">


触碰内发光图
a {
    display: inline-block;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
    transition: 0.3s;
}
a:hover {
    box-shadow: 0 0 2px 1px rgba
    (0, 140, 186, 0.5);
}
<a href="paris.jpg">
  <img src="paris.jpg" alt="Paris">
</a>


响应式图片
img {
    max-width: 100%;
    height: auto;
}


图片文本(举一反三,可任意放置文字)
.container {
    position: relative;
}
.topleft {
    position: absolute;
    top: 8px;
    left: 16px;
    font-size: 18px;
}
img { 
    width: 100%;
    height: auto;
    opacity: 0.3;
}
<div class="container">
  <img src="http://www.runoob.com/wp-content/uploads/2016/04/trolltunga.jpg" alt="Norway" width="1000" height="300">
  <div class="topleft">左上角</div>
</div>






CSS3按钮
普通按钮
.button1 {background-color: #4CAF50;} /* Green */
.button2 {background-color: #008CBA;} /* Blue */
.button3 {background-color: #f44336;} /* Red */ 
.button4 {background-color: #e7e7e7; color: black;} /* Gray */ 
.button5 {background-color: #555555;} /* Black */
综合属性
.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}
圆角按钮
.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}
边框按钮
.button1 {
    background-color: white;
    color: black;
    border: 2px solid #4CAF50; /* Green */
}
悬停按钮
.button {
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}
.button:hover {
    background-color: #4CAF50; /* Green */
    color: white;
}
悬停加阴影
.button2:hover {
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
禁用按钮(添加 cursor 属性并设置为 "not-allowed" 来设置一个禁用的图片)
.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
按钮宽度设置
.button1 {width: 250px;}
.button2 {width: 50%;}
.button3 {width: 100%;}
按钮组
.button {
    float: left;
    border: 1px solid green;
}
按钮动画
.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;
}
<button class="button"><span>Hover </span></button>
按钮点击波浪
.button {
    position: relative;
    background-color: #4CAF50;
    border: none;
    font-size: 28px;
    color: #FFFFFF;
    padding: 20px;
    width: 200px;
    text-align: center;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
}
.button:after {
    content: "";
    background: #90EE90;
    display: block;
    position: absolute;
    padding-top: 300%;
    padding-left: 350%;
    margin-left: -20px!important;
    margin-top: -120%;
    opacity: 0;
    transition: all 0.8s
}
.button:active:after {
    padding: 0;
    margin: 0;
    opacity: 1;
    transition: 0s
}
<button class="button">Click Me</button>
按钮下压
.button {
  display: inline-block;
  padding: 15px 25px;
  font-size: 24px;
  cursor: pointer;
  text-align: center;   
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #4CAF50;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}
.button:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
<button class="button">Click Me</button>






媒体查询
520 到 699px 宽度
@media screen and (max-width: 699px) and (min-width: 520px) {
}




text-stroke 文字描边(像素加颜色)
E:nth-child(odd||even) 选择符号奇数行||偶数行
transition 过渡(all所有属性 0.1过渡时间 ease加速形式 0延时0秒)
column-count:n 分成n栏