1.边框圆角（Border Radiuas）
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1 {
width: 100px;
height: 100px;
padding: 20px;
background-color: #ccc;
border: 1px solid #699;
/* for Mozilla Firefox */
-moz-border-radius: 20px;
/* for Safari & Google Chrome */
-webkit-border-radius: 20px;
}
</style>
</head>
<body>
<div id="box1">
box1
</div>
</body>
</html>
2.盒阴影（Box Shadow）
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1 {
width: 100px;
height: 100px;
padding: 20px;
background-color: #ccc;
border: 1px solid #699;
-moz-box-shadow: 5px -5px 5px #b6ebf7;
-webkit-box-shadow: 5px -5px 5px #b6ebf7;
}
</style>
</head>
<body>
<div id="box1">
box1
</div>
</body>
</html>
3.透明度（Transparency or RGBA）
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*Firefox, Safari, Chrome和Opera下的CSS透明度*/
#myElement {
opacity: .7;
}
/*IE下的CSS透明度*/
#myElement {
filter: alpha(opacity = 40);
}
#myElement {
filter: progid:DXImageTransform.Microsoft.Alpha(opacity = 40);
/* 第一行在IE6, IE7和IE8下有效 */
-ms-filter: progid: DXImageTransform . Microsoft . Alpha(opacity = 40);
/*第二行仅在IE8下有效 */
}
/*Firefox和Safari旧版本所需的透明度设置：*/
#myElement {
-khtml-opacity: .5;
-moz-opacity: 0.5;
}
#box1 {
width: 100px;
height: 100px;
padding: 20px;
border: 1px solid #699;
background-color: rgba(110, 142, 185, .5);
}
</style>
</head>
<body>
<div id="box1">
box1
</div>
</body>
</html>
4.列数（Columns）布局
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1 {
width: 800px;
border: 1px solid #699;
/* for Mozilla Firefox */
-moz-column-count: 3;
-moz-column-gap: 20px;
-moz-column-rule: 1px solid #fff;
/* for Safari & Google Chrome */
-webkit-column-count: 3;
-webkit-column-gap: 20px;
-webkit-column-rule: 1px solid #fff;
margin-left: 100px;
margin-top: 100px;
border-color: Yellow;
background-color: Gray;
color: #fff;
padding: 10px;
}
</style>
</head>
<body>
<div id="box1">
What began like a day where stocks would sell off sharply turned darn near positive despite a disappointing report
on private-sector employment in April that offered more evidence economic growth may be slowing.
The Dow Jones industrials ($INDU) fell as many as 87 points before bargain-hunting cut the losses by nearly 90%. The
Nasdaq Composite Index ($COMPX), down as many as 21 points in midmorning, surged to a solid gain in the afternoon.
Energy stocks were especially weak after the Energy Department reported a larger-than-expected increase in domestic
oil supplies. Oil prices moved lower.
The ADP National Employment report estimated only 119,000 private-sector jobs were created in April, far less than
the consensus estimate of about 170,000 jobs. The weaker-than-expected result increases the worries that Friday's
jobs report from the Labor Department also will disappoint. ADP is one of the largest payroll processors.
After the close, Green Mountain Coffee Roasters (GMCR) shares slumped about 40% to $29.79 from a regular close of
$49.52. Fiscal-second-quarter revenue missed estimates and the company cut fiscal-third-quarter estimates
substantially. But shares of Whole Foods Market (WFM) jumped nearly 3.5% to $87.24 after reporting robust
fiscal-second-quarter earnings and boosting its earnings guidance for the fiscal year to $2.44 to $2.47 a share
from earlier guidance of $2.28 to $2.32 a share. Shares are up more than 21% this year.
The Dow closed down just 11 points to 13,269, a day after the index hit a four-year high. The Standard & Poor's 500
Index ($INX) was off 4 points to 1,402. The Nasdaq was up 9 points at 3,060, and the Nasdaq-100 Index ($NDX) was up
8 points to 2,735.
</div>
</body>
</html>
5.显示多个背景图片
background-image: url(top-image.jpg), url(middle-image.jpg), url(bottom-image.jpg);
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1 {
background: url(http://ww2.sinaimg.cn/thumbnail/53a851b6jw1dsl0cr4v7xj.jpg) no-repeat 0 0, url(http://www.tripc.net/travelbureau_line/125302/20101202115324437.jpg) no-repeat 100% 0;
border: 1px solid #699;
padding: 0 20px;
margin-left: 100px;
margin-top: 100px;
width: 400px;
height: 300px;
}
</style>
</head>
<body>
<div id="box1"></div>
</body>
</html>
6.轮廓（outlines）
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1 {
border: 1px solid #000;
outline: 1px solid #699;
outline-offset: -20px;
border: 1px solid #699;
padding: 0 20px;
margin-left: 100px;
margin-top: 100px;
border-color: Yellow;
background-color: Gray;
width: 400px;
height: 300px;
}
</style>
</head>
<body>
<div id="box1"></div>
</body>
</html>
7.背景渐变（Background Gradients）
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1 {
width: 500px;
height: 200px;
border: 1px solid #ccc;
/*Firfox 的代码*/
background: -moz-linear-gradient(bottom, #b6ebf7, #fff 80%);
/*Chrome or safari的代码*/
background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #b6ebf7), color-stop(0.80, #fff));
}
</style>
</head>
<body>
<div id="box1"></div>
</body>
</html>
8.旋转（Rotate）
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1 {
border: 1px solid #000;
-moz-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
border: 1px solid #699;
padding: 0 20px;
margin-left: 100px;
margin-top: 100px;
border-color: Yellow;
background-color: Gray;
width: 300px;
height: 200px;
}
</style>
</head>
<body>
<div id="box1"></div>
</body>
</html>
9.反射（reflect）
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
padding: 0;
margin: 0;
}
#box1 {
-webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0.81)));
font-size: 20px;
background-color: #0fccc7;
width:300px;
height: 50px;
padding: 0
}
</style>
</head>
<body>
<div id="box1">
反射（reflect）<br/>
倒影
</div>
</body>
</html>
10.转换（Transitions）
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.trans_box {
width: 800px;
padding: 20px;
background-color: #f0f3f9;
}
.trans_list {
width: 10%;
height: 64px;
margin: 10px 0;
background-color: #486AAA;
color: #fff;
text-align: center;
}
.ease {
-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
-o-transition: all 4s ease;
transition: all 4s ease;
}
.ease_in {
-webkit-transition: all 4s ease-in;
-moz-transition: all 4s ease-in;
-o-transition: all 4s ease-in;
transition: all 4s ease-in;
}
.ease_out {
-webkit-transition: all 4s ease-out;
-moz-transition: all 4s ease-out;
-o-transition: all 4s ease-out;
transition: all 4s ease-out;
}
.ease_in_out {
-webkit-transition: all 4s ease-in-out;
-moz-transition: all 4s ease-in-out;
-o-transition: all 4s ease-in-out;
transition: all 4s ease-in-out;
}
.linear {
-webkit-transition: all 4s linear;
-moz-transition: all 4s linear;
-o-transition: all 4s linear;
transition: all 4s linear;
}
.trans_box:hover .trans_list, .trans_box_hover .trans_list {
margin-left: 89%;
background-color: #beceeb;
color: #333;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
-o-border-radius: 25px;
border-radius: 25px;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
</style>
</head>
<body>
<pre>
transition-property :* //指定过渡的性质，比如transition-property:backgrond 就是指backgound参与这个过渡
transition-duration:*//指定这个过渡的持续时间
transition-delay:* //延迟过渡时间
transition-timing-function:*//指定过渡类型，有ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier
</pre>
<div id="transBox" class="trans_box">
<div class="trans_list ease">
ease
</div>
<div class="trans_list ease_in">
ease-in
</div>
<div class="trans_list ease_out">
ease-out
</div>
<div class="trans_list ease_in_out">
ease-in-out
</div>
<div class="trans_list linear">
linear
</div>
</div>
</body>
</html>
