css3 属性
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>css3属性</title>
</head>
<body>
<h1>自定义属性p[kang]</h1> <!--<style>
p[kang]{color:red;} /*属性选择器*/
p[kang=k]{border:1px solid green;} /*指定 k */
p[kang~="two"]{border:1px solid blue;} /*属性含有two 可加"" 可不加*/
/*p[kang~=two]{border:1px solid deeppink;} */
p[kang^=s]{font-size:40px;} /*属性以s 开头*/
p[kang$=e]{border:1px solid #009cec;} /*属性以e结尾 */
p[kang*=o]{background: #ccc;} /*含有 o */
p[kang|=a]{background: #009cec;} /*只有a 或以 a-开头*/
</style>
<p kang="k">1</p>
<p kang="j two">2</p>
<p kang="santwo">3</p>
<p kang="hoe">4</p>
<p kang="a">5</p>
<p kang="ab">6</p>
<p kang="a-b">7</p>-->
<h1>属性应用</h1> <!--
<h2>对不同href的给予不同的背景图片</h2>
<style>
p{height:30px; line-height:30px; font-size:12px;border:1px solid #000;}
p a{background:url(img/w.gif) no-repeat 3px center;padding-left:20px; display:block;}
p a[href*=text]{ background-image:url(img/text.gif);}
p a[href*=pdf]{ background-image:url(img/swf.gif);}
p a[href*=exl]{ background-image:url(img/x.gif);}
</style>
<p>
<a href="/doc/javascript.html">妙味课堂</a>
</p>
<p>
<a href="/text/javascript.html">妙味课堂</a>
</p>
<p>
<a href="/pdf/javascript.html">妙味课堂</a>
</p>
<p>
<a href="/exl/javascript.html">妙味课堂</a>
</p>
-->
<h1>结构选择器</h1>
<style>
p{height:30px;border:1px solid #000;}
p:nth-child(2){color:red;} /*找 p的父元素div下的第二个元素，如果是p元素，则为红色*/
body *:nth-child(2){color:deeppink;} /*找第二个元素*/
p:nth-of-type(2){border:1px solid green;} /*找 p的父元素div下的第二个p*/
/*p:nth-child(odd){background:red;} /!* odd 奇数行 *!/*/
/*nth-last-child :first-child == :nth-child(1)
:last-child == :nth-last-child(1)
:first-of-type == nth-of-type(1)
:last-of-type == nth-last-of-type(1) */
p:empty{background: blue;}
p:only-of-type{background:yellow;}
p:only-child{background: orange;} /*只有一个子节点，且子节点不包含文本节点*/
/* p: only-of-type*/
span{display: block; width:10px;height: 10px;}
</style>
<div>
<p>p1</p>
<h1>h1</h1>
<p>p2</p>
<p>p3</p>
<p></p> <!--p:empty-->
<p><span></span></p> </div>
</body>
</html>
css3 2.0
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
p{width:300px;border:1px solid #000;font:12px/30px "宋体";padding:10px;}
p:first-line{ background:red;} /*文本第一行*/
p:first-letter{ font-size:30px;} /*第一个字母*/
p::selection{background:#F60;color:#690;} /*选择文字的效果*/
div~span{color:green;} /*div 后面的 span 123*/
h1:not(.test){background: red;} /*过滤class */
/*文字从右到左排列 ie6支持*/
h2{width:300px;border:1px solid #000;font:14px/30px "宋体";direction:rtl;unicode-bidi:bidi-override;}
/*文字超出隐藏 ie6支持*/
h3{width:100px;border:1px solid #000;font:14px/30px "宋体"; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
</style>
</head>
<body>
<p>p文本伪类：前端开发的世界从未有过无声的寂静，精彩纷呈的互联网也不曾出现片刻安宁，
在 HTML5&CSS3 被炒至沸沸扬扬的今天，
</p>
<div><span>456</span></div>
<span>123</span>
<h1>h1</h1>
<h1 class="test">h2</h1>
<h1>h3</h1>
<h2>文字从右到左排列</h2>
<h3>文字超出隐藏123565636834634466346346</h3>
</body>
</html>
css3 弹性盒模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css弹性盒模型</title>
</head>
<body>
<style>
.box {
height: 170px;
border: 10px solid #000;
padding: 10px;
display: -webkit-box; /* 盒模型 */
/*-webkit-box-orient:vertical; !*排列顺序 默认横排*!*/
/*-webkit-box-direction:Reverse; !* 反序 *!*/
-webkit-box-pack: justify; /* 富裕空间 end 是右对齐 center 是居中 justify 分散对齐 */
-webkit-box-align: end; /* 靠底 */ } .box div {
width: 100px;
height: 100px;
background: red;
border: 1px solid #fff;
} /* 具体调整各个div位置 */
/*
.box div:nth-of-type(1) {-webkit-box-ordinal-group: 2;}
.box div:nth-of-type(2) {-webkit-box-ordinal-group: 4;}
.box div:nth-of-type(3) {-webkit-box-ordinal-group: 1;}
.box div:nth-of-type(4) {-webkit-box-ordinal-group: 5;}
.box div:nth-of-type(5) {-webkit-box-ordinal-group: 3;}
*/
/* 指定宽度 box-flex */
/*
.box div:nth-of-type(1){width:300px;}
.box div:nth-of-type(2){-webkit-box-flex:2;} /* 占 2/ 2+3+4+5 = 2/14 */
/* .box div:nth-of-type(3){-webkit-box-flex:3;}
.box div:nth-of-type(4){-webkit-box-flex:4;}
.box div:nth-of-type(5){-webkit-box-flex:5;}
*/
</style>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>
css3 div上下左右都居中 height:100% -webkit-box-align:center;
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
html{height:100%;}
body{height:100%;margin:0;}
.box{height:100%; display:-webkit-box;-webkit-box-direction:Reverse; font-size:20px;color:#fff;-webkit-box-pack:center; -webkit-box-align:center;}
.box div{width:100px;height:100px;background:red;border:1px solid #fff;}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>
弹性盒模型：父元素 display:-webkit-box;
box-orient: horizontal / vertical 水平垂直显示
box-direction: normal / reverse 元素正序 反序
box-oridinal-group 设置元素具体位置，见上面例子
box-flex 弹性空间 可指定各元素不同宽度，以及自适应比例
•子元素的尺寸=盒子的尺寸*子元素的box-flex属性值 / 所有子元素的box-flex属性值的和
box-pack 富裕空间处理 （元素水平对齐方式，分散对齐等）
start左对齐 end右对齐 center justify
box-align 元素垂直对齐方式
star顶对齐 end center
阴影 box-shadow :[inset] x y blur [spread] color
内投影 阴影偏移 模糊半径 扩展模糊半径
图片倒影 img{ display:block;-webkit-box-reflect:below;}
above|below|left|right;
可拖动 resize 边框大小
both:水平垂直都可缩放 horizontal 水平缩放 vertical 垂直缩放
.box{width:100px;height:100px;background:url(miaov.jpg);border:5px solid #000; resize:both; overflow:auto;}
怪异盒模型，忽略div 的padding 和 border宽度属性 box-sizing:border-box
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{width:200px;height:200px;padding:50px;border:10px solid #000; box-sizing:border-box;}
.div{height:50px;background:red;}
</style>
</head>
<body>
<div class="box">
<div class="div"></div>
</div>
Content-box 标准盒模型 width/height=border+padding+content
box-sizing:border-box 怪异盒模型 width/height=content div宽度直接等于指定宽高，忽略padding 和border值
</body>
</html>
分栏：
-webkit-column-count:4; -webkit-column-gap:30px; -webkit-column-rule:1px solid #000;
lcolumn-width 栏目宽度
lcolumn-count 栏目列数
lcolumn-gap 栏目距离
lcolumn-rule 栏目间隔线
进度条
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.wrap{width:200px;height:30px;overflow:hidden;border:1px solid #000;}
.box{width:400px;height:30px;background:-webkit-repeating-linear-gradient(15deg,green 0,green 10px,#fff 10px,#fff 20px); transition:3s;}
.wrap:hover .box{ margin-left:-100px;}
</style>
</head>
<body>
<div class="wrap">
<div class="box"></div>
</div>
</body>
</html>
百度光斑 有3个地方应用了位置调整，第一个，rgba有150px的透明，第二个整体背景偏移，第三个hover再偏移
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{width:300px;height:300px;
background:-webkit-linear-gradient(-30deg,rgba(255,255,255,0) 0,rgba(255,255,255,0) 150px,rgba(255,255,255,1) 170px,rgba(255,255,255,1) 180px,rgba(255,255,255,0) 210px) no-repeat -200px 0,url(new_bg.png) no-repeat; transition:1s;}
.box:hover{background-position:300px 0,-100px -100px;}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>