css3的基础知识
一、边框
1、圆角效果 border-radius
border-radius: 5px 4px 3px 2px;
强调内容四个半径值分别是左上角、右上角、右下角和左下角，顺时针。还可以用百分比或者em，但兼容性目前还不太好。
例：实心上半圆
height:50px;/*是width的一半*/
width:100px;
background:#9da;
border-radius:50px 50px 0 0;/*半径至少设置为height的值*/2、阴影 box-shadow
box-shadow: -6px -6px 4px 5px #320000 blueviolet;强调box-shadow的值 :X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色 投影方式;可以重复添加此属性
3、边框应用图片 border-image
border-image:url( ../../..) 10px 10px 10px 10px repeat
二、颜色
color：rgba(R,G,B,A)
rgba指的是R（red）、G（green）、B（blue）三原色+A（alpha透明度）组成，rgb的取值在0~255之间，A为透明度参数，取值在0~1之间，不可为负值.
关于颜色最大的应用功能就是渐变，分为线性(linear)和径向渐变(radial)
background-image:linear-gradient(to top left,red,blue,orange，indigo,violet)
三、文字
text-overflow用来设置是否使用一个省略标记（…）标示对象内文本的溢出。
例：实现溢出时产生省略号的效果
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;word-wrap也可以用来设置文本行为，当前行超过指定容器的边界时是否断开转行。
normal为浏览器默认值，break-word设置在长单词或 URL地址内部进行换行，此属性不常用，用浏览器默认值即可。
四、字体
1、@font-face能够加载服务器端的字体文件，让浏览器端可以显示用户电脑里没有安装的字体。
@font-fac {
font-family: "MOOC Font";
src: url("http://www.imooc.com/Amaranth-BoldItalic.otf");
}
.demo {
font-size:58px;
font-family: "MOOC Font";
}2、text-shadow可以用来设置文本的阴影效果
text-shadow: 0 1px 1px #fff；五、背景
1、background-origin设置元素背景图片的原始起始位置
语法：background-origin ： border-box | padding-box | content-box;
参数分别表示背景图片是从边框，还是内边距（默认值），或者是内容区域开始显示。
2、background-clip用来将背景图片做适当的裁剪以适应实际需要。
语法：background-clip ： border-box | padding-box | content-box | no-clip
参数分别表示从边框、或内填充，或者内容区域向外裁剪背景。no-clip表示不裁切，和参数border-box显示同样的效果。backgroud-clip默认值为border-box。
3、background-size设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。
语法：background-size: auto | <长度值> | <百分比> | cover | contain
auto：默认值，不改变背景图片的原始高度和宽度；
<长度值>：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放；
<百分比>：0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上；
cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器；
contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。
4、多重背景
具体顺序举例如下，
.demo{
background:url(demo.gif) no-repeat ,
url(demo1.gif) no-repeat left bottom,
url(demo2.gif) no-repeat 10px 15px yellow;}注意：
用逗号隔开每组 background 的缩写值；
如果有 size 值，需要紧跟 position 并且用 “/” 隔开；
如果有多个背景图片，而其他属性只有一个（例如 background-repeat 只有一个），表明所有背景图片应用该属性值；
background-color 只能设置一个。
5、渐变
线性渐变（line-gradient）径向渐变（radial-gradient）
background-image: linear-gradient(to left,red,blue);background-image:radial-gradientt(red, green, blue);六、css3选择器
1、 属性选择器
<style>
a[class^=column]{background: red;}/*定义属性为class的属性值以column开头*/
a[href$=doc]{background: green;}/*定义属性为href的属性值以doc结尾*/
a[title*=box]{background: green;}/*定义属性为title的属性值任意位置包括box*/
style>
<a href="##" class="columnNews">我的背景想变成红色a>
<a href="##" class="columnVideo">我的背景想变成红色a>
<a href="##" class="columnAboutUs">我的背景想变成红色a><br/>
<a href="1.doc">我的背景想变成绿色a>
<a href="2.doc">我的背景想变成绿色a><br/>
<a href="##" title="this is a box">我的背景想变成蓝色a>
<a href="##" title="box1">我的背景想变成蓝色a>
<a href="##" title="there is two boxs">我的背景想变成蓝色a>2、结构性伪类选择器
a、:root(根元素)
（在HTML文档中，根元素始终是）
:root{background:orange;}/*相当于html {background:orange;}*/b、:not(否定选择器)（选择除某个元素之外的所有元素）
div:not([id="footer"]){background: orange;}/*除页脚”div#footer”之外的所有div设置橙色背景色。*/input:not([type="submit"]){border:1px solid red;}/*表单中除submit按钮之外的input元素*/c、:empty(用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。)>
p:empty {display: none;}/*把没有任何内容的P元素隐藏起来*/d、:target（选择器称为目标选择器，用来匹配文档(页面)的url的某个标志符的目标元素）
<html>
<head>
<meta charset="utf-8">
<title>结构性伪类选择器—targettitle>
<link href="style.css" rel="stylesheet" type="text/css">
<style>
#brand:target p {
background: orange;
color: #fff;
}
style>
head>
<body>
<div class="menuSection" id="brand">
<h2><a href="#brand">Branda>h2>
<p>content for Brandp>
div>
body>
html>e、指定元素顺序的选择器( :first-child :last-child :nth-child(n) :nth-last-child(n) )
ul>li:first-child {color: red;}/*选择父元素的第一个子元素的元素*/ul > li:last-child {border-bottom: none;}/*选择父元素的最后一个子元素的元素*/ol > li:nth-child {background: green;}/*定位某个父元素的一个或多个特定的子元素*/ol > li:nth-last-child(5) {background: orange;}/*定位从某父元素的最后一个子元素开始计算，来选择特定的元素。*/经验与技巧:当“:nth-child(n)”选择器中的n为一个表达式时，其中n是从0开始计算，当表达式的值为0或小于0的时候，不选择任何匹配的元素。如下表所示：
f、元素类型选择器（:first-of-type :nth-of-type(n) :last-of-type :nth-last-of-type(n) :only-child :only-of-type）
.wrapper > p:first-of-type { background: orange;}/*改变wrapper里面第一个段落的背景为橙色*/.wrapper > p:nth-of-type(2n) {background: orange;}/*将容器“div.wrapper”中偶数段数的背景设置为橙色*/ .wrapper > p:last-of-type {background: orange;}/*容器“div.wrapper”中最后一个段落元素背景设置为橙色*/.wrapper > p:nth-last-of-type(3) {background: orange;}/*将容器“div.wrapper”中的倒数第三个段落背景设置为橙色*/.post p:only-child {background: orange;}/*父元素中只有一个子元素，而且只有唯一的一个子元素*/.wrapper > div:only-of-type {background: orange;}/*改变仅有的一个div元素wrapper里面div的背景为橙色*/g、:enabled(可用元素) :disabled（不可用元素） :checked(选中状态的元素)
input[type="text"]:enabled {background: #ccc;border: 2px solid red;}/*修改可用文本输入框样式*/input[type="text"]:disabled {border: 1px solid rgba(0,0,0,.15);}/*给不可用输入框设置样式*/input[type="checkbox"]:checked + span {opacity: 1;}/*给选中状态的复选框和span元素样式*/h、::selection（用鼠标选择文本时的文本，浏览器默认情况下，用鼠标选择网页文本是以“深蓝的背景，白色的字体”显示的，不过在Firefox浏览器还需要添加前缀）
::-moz-selection {background: red;color: green;}
::selection {background: red;color: green;}i、:read-only（用来指定处于只读状态元素的样式，元素中设置了“readonly=’readonly’”）
:read-write（设置不是只读控件的文本框样式）
input[type="text"]:-moz-read-only{border-color: #ccc;}
input[type="text"]:read-only{border-color: #ccc;}input[type="text"]:-moz-read-write{border-color: #f36;}
input[type="text"]:read-write{ border-color: #f36;}j、::before和::after（主要用来给元素的前面或后面插入内容，这两个常和”content”配合使用，使用的场景最多的就是清除浮动）
清除浮动实例
.clearfix::before,
.clearfix::after {
content: ".";
display: block;
height: 0;
visibility: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}
<html>
<head>
<meta charset=utf-8 />
<title>before、aftertitle>
<style>
.box h3{
text-align:center;
position:relative;
top:80px;
}
.box {
width:70%;
height:200px;
background:#FFF;
margin:40px auto;
}
.effect{
position:relative;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect::before, .effect::after{
content:"";
position:absolute;
z-index:-1;
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
box-shadow:0 0 20px rgba(0,0,0,0.8);
top:50%;
bottom:0;
left:10px;
right:10px;
-moz-border-radius:100px / 10px;
border-radius:100px / 10px;
}
style>
head>
<body>
<div class="box effect">
<h3>Shadow Effect h3>
div>
body>
html>七、CSS3变形
1、旋转 rotate()：正值以元素相对原点中心顺时针旋转，负值以原点逆时针旋转
.wrapper div {
width: 200px;
height: 200px;
background: orange;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}2、扭曲 skew()：skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）;skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）；skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）
.wrapper div {
width: 300px;
height: 100px;
line-height: 100px;
text-align: center;
color: #fff;
background: orange;
-webkit-transform: skew(45deg);
-moz-transform:skew(45deg)
transform:skew(45deg);
}3、缩放 scale()：让元素根据中心原点对对象进行缩放。 scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）;scaleX(x)元素仅水平方向缩放（X轴缩放）;scaleY(y)元素仅垂直方向缩放（Y轴缩放）
div:hover {
-webkit-transform: scale(1.5,0.5);
-moz-transform:scale(1.5,0.5)
transform: scale(1.5,0.5);
}4、位移 translate()：将元素向指定的方向移动。translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）；translateX(x)仅水平方向移动（X轴移动）；translateY(Y)仅垂直方向移动（Y轴移动）
始终居于屏幕中间的例子：
.wrapper {
padding: 20px;
background:orange;
color:#fff;
position:absolute;
top:50%;
left:50%;
border-radius: 5px;
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}5、矩阵 matrix()：含六个值的(a,b,c,d,e,f)变换矩阵
.wrapper div {
width:300px;
height: 200px;
background: orange;
-webkit-transform: matrix(1,0,0,1,50,50);
-moz-transform:matrix(1,0,0,1,50,50);
transform: matrix(1,0,0,1,50,50);
}6、原点 transform-origin：含六个值的(a,b,c,d,e,f)变换矩阵
transform-origin取值和元素设置背景中的background-position取值类似，如下表所示：
举例：通过transform-origin改变元素原点到左上角，然后进行顺时旋转45度。
.wrapper div {
background: orange;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.transform-origin div {
-webkit-transform-origin: left top;
transform-origin: left top;
}八、CSS3过渡
1、过渡属性 transition-property：指定过渡动画的CSS属性名称
transition-property用来指定过渡动画的CSS属性名称，而这个过渡属性只有具备一个中点值的属性（需要产生动画的属性）才能具备过渡效果，其对应具有过渡的CSS属性主要有：
2、transition-duration：设置一个属性过渡到另一个属性所需的时间，也就是从旧属性过渡到新属性花费的时间长度，俗称持续时间。
3、过渡函数 transition-timing-function：属性指的是过渡的“缓动函数”。
有以下几种：
4、过渡延迟时间 transition-delay：指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行。
举例：让容器从正方形渐显效果all .5s ease-in .2s慢慢过渡到圆角。
.wrapper div {
padding: 15px 20px;
color: #fff;
background-color: orange;
position: absolute;
top: 50%;
left:50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
-webkit-transition: all 0.5s ease-in 0.2s;
transition: all 0.5s ease-in 0.2s;
}
.wrapper div:hover {
background-color: red;
border-radius: 10px;
}九、CSS3动画
Keyframes介绍：被称为关键帧，其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”；在一个“@keyframes”中的样式规则可以由多个百分比构成的，如在“0%”到“100%”之间创建更多个百分比，分别给每个百分比中给需要有动画效果的元素加上不同的样式，从而达到一种在不断变化的效果。
经验与技巧：在@keyframes中定义动画名称时，其中0%和100%还可以使用关键词from和to来代表，其中0%对应的是from，100%对应的是to。
1、调用动画 animation-name：属性主要是用来调用 @keyframes 定义好的动画。
2、动画播放时间 animation-duration：指定元素播放动画所持续的时间长，也就是完成从0%到100%一次动画所需时间。
3、动画播放方式 animation-timing-function：设置动画播放方式，具有以下几种变换方式：ease,ease-in,ease-in-out,ease-out,linear和cubic-bezier。
4、动画开始播放的时间 animation-delay：定义动画开始播放的时间
5、动画播放次数 animation-iteration-count：定义动画的播放次数。
a、其值通常为整数，但也可以使用带有小数的数字，其默认值为1，这意味着动画将从开始到结束只播放一次。
b、如果取值为infinite，动画将会无限次的播放。
6、动画播放方向 animation-direction：设置动画播放方向， 其主要有两个值：normal、alternate
a、normal是默认值，如果设置为normal时，动画的每次循环都是向前播放；
b、另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。
7、动画的播放状态 animation-play-state：来控制元素动画的播放状态.
其主要有两个值：running和paused。其中running是其默认值，主要作用就是类似于音乐播放器一样，可以通过paused将正在播放的动画停下来，也可以通过running将暂停的动画重新播放，这里的重新播放不一定是从元素动画的开始播放，而是从暂停的那个位置开始播放。另外如果暂停了动画的播放，元素的样式将回到最原始设置状态。
8、动画时间外属性 animation-fill-mode：定义动画的播放次数。主要具有四个属性值：none、forwards、backwords和both
none：（默认值，表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处）
forwards：（表示动画在结束后继续应用最后的关键帧的位置）
backwards：（会在向元素应用动画样式时迅速应用动画的初始帧）
both：（元素动画同时具有forwards和backwards效果）
十、CSS3 布局
1、多列布局——Columns
columns: 200px 2;（显示2栏，每栏宽度为200px）
注意：其中“200px”指的是column-width，如果column-width设置值为auto或者没有显式的设置值时，元素多列的列宽将由其他属性来决定，比如前面的示例就是由列数column-count来决定。“2”指的是column-count，其值如果为auto，表示默认一栏。
列间距:column-gap主要用来设置列与列之间的间距。默认值为normal为1em（如果你的字号是px，其默认值为你的font-size值）。此值用来设置列与列之间的距离，其可以使用px,em单位的任何整数值，但不能是负值。
列表边框column-rule:主要是用来定义列与列之间的边框宽度、边框样式和边框颜色
(column-rule-width其默认值为“medium”，可以使用关键词：medium、thick和thin。
column-rule-style其默认值为“none”，也可用包括none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outset。
column-rule-color如果不希望显示颜色，也可以将其设置为transparent(透明色)）
例如：column-rule:1px solid green
跨列设置column-span主要用来定义一个分列元素中的子元素能跨列多少。默认值为none，表示不跨越任何列，all表示跨越所有列
2、盒子模型——box-sizing
content-box:默认值,其让元素维持W3C的标准盒模型,是element width/height = border + padding + content width / height
border-box:重新定义CSS2.1中盒模型组成的模式，让元素维持IE传统的盒模型,元素的宽度或高度等于元素内容的宽度或高度。
3、伸缩布局——Flexbox布局（display: -webkit-flex; display: flex; ）
flex-direction:改变主轴方向 属性：column/row（row为默认值）
justify-content:控制方向 属性：flex-start(项目移动到左边) flex-end（项目移动到右边） center（项目移动到中间）(如果flex-direction设置为row，设置justify-content控制方向；如果设置为column，设置align-items控制方向。)
align-items:flex-start（项目移动到左边） flex-end（项目移动到右边） center（项目移动到中间）
项目的自由伸缩：.demo{ -webkit-flex:200; flex:200; } .smallitem{ -webkit-flex:100; flex:100; }
十一、Media Queries——媒体类型
1、媒体类型的引用方法**
link方法
"stylesheet" type="text/css" href="style.css" media="screen" />
"stylesheet" type="text/css" href="print.css" media="print" />@import方法
@importurl(reset.css) screen;
@importurl(print.css) print;<head>
<style type="text/css">
@importurl(style.css) all;
style>
head>@media方法
（1）在样式文件中引用媒体类型：
@media screen {
选择器{/*你的样式代码写在这里…*/}
}（2）使用@media引入媒体类型的方式是在标签中的
<head>
<style type="text/css">
@media screen{
选择器{/*你的样式代码写在这里…*/}
}
style>
head>2、Media Queries使用方法
1. 最大宽度max-width
@media screen and (max-width:480px){
.ads {
display:none;
}
}上面表示的是：当屏幕小于或等于480px时,页面中的广告区块（.ads）都将被隐藏。‘’
2.最小宽度min-width
@media screen and (min-width:900px){
.wrapper{width: 980px;}
}上面表示的是：当屏幕大于或等于900px时，容器“.wrapper”的宽度为980px。
3.多个媒体特性使用
@media screen and (min-width:600px) and (max-width:900px){
body {background-color:#f5f5f5;}
}上面表示的是：当屏幕在600px~900px之间时，body的背景色渲染为“#f5f5f5”
4.设备屏幕的输出宽度Device Width
<link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" />上面的代码指的是“iphone.css”样式适用于最大设备宽度为480px，比如说iPhone上的显示，这里的“max-device-width”所指的是设备的实际分辨率，也就是指可视面积分辨率。
5. not关键词
@media not print and (max-width: 1200px){样式代码}上面代码表示的是：样式代码将被使用在除打印设备和设备宽度小于1200px下所有设备中。
6.only关键词
"stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" /> 上面代码中style.css样式被用在宽度小于或等于480px的手持设备上，或者被用于屏幕宽度大于或等于960px的设备上。
注意：CSS3 Media Queries得到了众多浏览器支持，除了IE6-8浏览器不支持之外
3、Responsive设计
Responsive设计简单的称为RWD，是精心提供各种设备都能浏览网页的一种设计方法，RWD能让你的网页在不同的设备中展现不同的设计风格。”
1.流体网格
流体网格是一个简单的网格系统，这种网格设计参考了流体设计中的网格系统，将每个网格格子使用百分比单位来控制网格大小。这种网格系统最大的好处是让你的网格大小随时根据屏幕尺寸大小做出相对应的比例缩放。
2.弹性图片
弹性图片指的是不给图片设置固定尺寸，而是根据流体网格进行缩放，用于适应各种网格的尺寸。而实现方法是比较简单，一句代码就能搞定的事情。
img {max-width:100%;}
但是这种不适用于IE8，会让图片消失，可以用下面这种
@media (min-device-width:600px){
img[data-src-600px]{
content: attr(data-src-600px,url);
}
}
@media (min-device-width:800px){
img[data-src-800px] {
content:attr(data-src-800px,url);
}
}3.媒体查询
Responsive设计最关注的就是：根据用户的使用设备的当前宽度，你的Web页面将加载一个备用的样式，实现特定的页面风格。
不同设备的分辨率设置:
1.1024px显屏
@media screen and (max-width : 1024px) {
/* 样式写在这里 */
}
2.800px显屏
@media screen and (max-width : 800px) {
/* 样式写在这里 */
}
3.640px显屏
@media screen and (max-width : 640px) {
/* 样式写在这*/
}
4.iPad横板显屏
@media screen and (max-device-width: 1024px) and (orientation: landscape) {
/* 样式写在这 */
}
5.iPad竖板显屏
@media screen and (max-device-width: 768px) and (orientation: portrait) {
/* 样式写在这 */
}
6.iPhone 和 Smartphones
@media screen and (min-device-width: 320px) and (min-device-width: 480px) {
/* 样式写在这 */
}
4.用户界面
a、自由缩放属性 resize
主要是用来改变元素尺寸大小的，其主要目的是增强用户体验。
resize: none | both | horizontal | vertical | inherit
none：用户不能拖动元素修改尺寸大小。
both：用户可以拖动元素，同时修改元素的宽度和高度
horizontal：用户可以拖动元素，仅可以修改元素的宽度，但不能修改元素的高度。
vertical：用户可以拖动元素，仅可以修改元素的高度，但不能修改元素的宽度。
inherit：继承父元素的resize属性值。
b、外轮廓属性 outline
outline: ［outline-color］ || [outline-style] || [outline-width] || [outline-offset] || inherit
c、CSS生成内容
通过CSS3的伪类“:before”，“:after”和CSS3的伪元素“::before”、“::after”来实现，其关键是依靠CSS3中的“content”属性来实现。不过这个属性对于img和input元素不起作用。
<a href="##" title="我是一个title属性值，我插在你的后面">我是元素a>
a:after {
content:attr(title);
color:#f00;
}