前言
1.css3 的出现，使用我们的页面更炫酷，更夺目，嗯...好嗨哦！效果 请把代码跑起来！动起手来才不怕!!
happy.gif
2.过渡过渡，是我在项目里面用得最多的一个特性了！也相信是很多人用得最多的一个例子！我平常使用就是想让一些交互效果（主要是hover动画），变得生动一些，不会显得那么生硬！好了，下面进入正文！引用菜鸟教程的说法：CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：指定要添加效果的CSS属性指定效果的持续时间。
2-1语法transition： CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)栗子1/宽度从原始值到制定值的一个过渡，运动曲线ease,运动时间0.5秒，0.2秒后执行过渡/
transition：width,.5s,ease,.2s栗子2/所有属性从原始值到制定值的一个过渡，运动曲线ease,运动时间0.5秒/
transition：all,.5s
上面栗子是简写模式，也可以分开写各个属性（这个在下面就不再重复了）transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
2-2实例-hover效果上面两个按钮，第一个使用了过渡，第二个没有使用过渡，大家可以看到当中的区别，用了过渡之后是不是没有那么生硬，有一个变化的过程，显得比较生动。当然这只是一个最简单的过渡栗子，两个按钮的样式代码，唯一的区别就是，第一个按钮加了过渡代码transition: all .5s;
2-3实例-下拉菜单上面两个菜单，第一个没有使用过渡，第二个使用过渡，大家明显看到区别，使用了过渡看起来也是比较舒服！代码区别就是有过渡的ul的上级元素(祖先元素)有一个类名（ul-transition）。利用这个类名，设置ul的过渡.ul-transition ul{transform-origin: 0 0;transition: all .5s;}可能大家不知道我在说什么！我贴下代码吧
<div class="demo-hover demo-ul t_c">
<ul class="fllil">
<li>
<a href="javascript:;">html</a>
<ul>
<li><a href="#">div</a></li>
<li><a href="#">h1</a></li>
</ul>
</li>
<li>
<a href="javascript:;">js</a>
<ul>
<li><a href="#">string</a></li>
<li><a href="#">array</a></li>
<li><a href="#">object</a></li>
<li><a href="#">number</a></li>
</ul>
</li>
<li>
<a href="javascript:;">css3</a>
<ul>
<li><a href="#">transition</a></li>
<li><a href="#">animation</a></li>
</ul>
</li>
<li>
<a href="javascript:;">框架</a>
<ul>
<li><a href="#">vue</a></li>
<li><a href="#">react</a></li>
</ul>
</li>
</ul>
<div class="clear"></div>
</div>
<div class="demo-hover demo-ul ul-transition t_c">
<ul class="fllil">
<li>
<a href="javascript:;">html</a>
<ul>
<li><a href="#">div</a></li>
<li><a href="#">h1</a></li>
</ul>
</li>
<li>
<a href="javascript:;">js</a>
<ul>
<li><a href="#">string</a></li>
<li><a href="#">array</a></li>
<li><a href="#">object</a></li>
<li><a href="#">number</a></li>
</ul>
</li>
<li>
<a href="javascript:;">css3</a>
<ul>
<li><a href="#">transition</a></li>
<li><a href="#">animation</a></li>
</ul>
</li>
<li>
<a href="javascript:;">框架</a>
<ul>
<li><a href="#">vue</a></li>
<li><a href="#">react</a></li>
</ul>
</li>
</ul>
<div class="clear"></div>
</div>
css.demo-ul{margin-bottom: 300px;}
.demo-ul li{
padding: 0 10px;
width: 100px;
background: #f90;
position: relative;
}
.demo-ul li a{
display: block;
height: 40px;
line-height: 40px;
text-align: center;
}
.demo-ul li ul{
position: absolute;
width: 100%;
top: 40px;
left: 0;
transform: scaleY(0);
overflow: hidden;
}
.ul-transition ul{
transform-origin: 0 0;
transition: all .5s;
}
.demo-ul li:hover ul{
transform: scaleY(1);
}
.demo-ul li ul li{
float: none;
background: #0099ff;
}
上面两个可以说是过渡很基础的用法，过渡用法灵活，功能也强大，结合js，可以很轻松实现各种效果（焦点图，手风琴）等，以及很多意想不到的效果。这个靠大家要去挖掘！
3.动画动画这个平常用的也很多，主要是做一个预设的动画。和一些页面交互的动画效果，结果和过渡应该一样，让页面不会那么生硬！
3-1.语法animation：动画名称，一个周期花费时间，运动曲线（默认ease），动画延迟（默认0），播放次数（默认1），是否反向播放动画（默认normal），是否暂停动画（默认running）栗子1/执行一次logo2-line动画，运动时间2秒，运动曲线为 linear/
animation: logo2-line 2s linear;栗子2/2秒后开始执行一次logo2-line动画，运动时间2秒，运动曲线为 linear/
animation: logo2-line 2s linear 2s;栗子3/无限执行logo2-line动画，每次运动时间2秒，运动曲线为 linear，并且执行反向动画/
animation: logo2-line 2s linear alternate infinite;还有一个重要属性animation-fill-mode : none | forwards | backwards | both;
/*none：不改变默认行为。
forwards ：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both：向前和向后填充模式都被应用。 */ 3-2.logo展示动画这个是我用公司logo写的动画，没那么精细代码如下<!DOCTYPE
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="reset.css">
</head>
<style>
.logo-box{
width: 600px;
margin: 100px auto;
font-size: 0;
position: relative;
}
.logo-box div{
display: inline-block;
}
.logo-box .logo-text{
margin-left: 10px;
}
.logo-box .logo1{
animation: logo1 1s ease-in 2s;
animation-fill-mode:backwards;
}
.logo-box .logo-text{
animation: logoText 1s ease-in 3s;
animation-fill-mode:backwards;
}
.logo-box .logo2{
position: absolute;
top: 20px;
left: 20px;
animation: logo2-middle 2s ease-in;
}
.logo-box .logo2 img{
animation: logo2-line 2s linear;
}
@keyframes logo1 {
0%{
transform:rotate(180deg);
opacity: 0;
}
100%{
transform:rotate(0deg);
opacity: 1;
}
}
@keyframes logoText {
0%{
transform:translateX(30px);
opacity: 0;
}
100%{
transform:translateX(0);
opacity: 1;
}
}
@keyframes logo2-line {
0% { transform: translateX(200px)}
25% { transform: translateX(150px)}
50% { transform: translateX(100px)}
75% { transform: translateX(50px)}
100% { transform: translateX(0); }
}
@keyframes logo2-middle {
0% { transform: translateY(0); }
25% { transform: translateY(-100px); }
50% { transform: translateY(0); }
75% { transform: translateY(-50px); }
100% { transform: translateY(0); }
}
</style>
<body>
<div class="logo-box">
<div class="logo1"><img src="logo1.jpg"/></div>
<div class="logo2"><img src="logo2.jpg"/></div>
<div class="logo-text"><img src="logo3.jpg"/></div>
</div>
<div class="wraper"><div class="item"></div></div>
</body>
</html>
下面让大家看一个专业级别的代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
body {
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
overflow: hidden;
background: #fff;
}
.center {
margin: 80px auto;
}
.so {
display: block;
width: 500px;
height: 156px;
background: #ffffff;
}
.so .inner {
width: 500px;
height: 156px;
position: absolute;
}
.so .inner * {
position: absolute;
animation-iteration-count: infinite;
animation-duration: 3.5s;
}
.so .inner .name {
position: absolute;
font-size: 54px;
left: 130px;
top: 95px;
}
.so .inner .name .b {
font-weight: bold;
}
.so .inner .stack-box {
top: 100px;
width: 115px;
height: 56px;
}
.so .inner .box {
width: 115px;
height: 56px;
left: 0px;
}
.so .inner .box div {
background: #BCBBBB;
}
.so .inner .box .bottom {
bottom: 0px;
left: 0px;
width: 115px;
height: 12px;
}
.so .inner .box .left {
bottom: 11px;
left: 0px;
width: 12px;
height: 34px;
}
.so .inner .box .right {
bottom: 11px;
left: 103px;
width: 12px;
height: 34px;
}
.so .inner .box .top {
top: 0px;
left: 0px;
width: 0;
height: 12px;
}
.so .inner .stack {
left: 22px;
top: 22px;
}
.so .inner .stack .inner-item {
background: #F48024;
width: 71px;
height: 12px;
}
.so .inner .stack .item {
transition: transform 0.3s;
width: 291px;
}
.so .inner .stack div:nth-child(1) {
transform: rotate(0deg);
}
.so .inner .stack div:nth-child(2) {
transform: rotate(12deg);
}
.so .inner .stack div:nth-child(3) {
transform: rotate(24deg);
}
.so .inner .stack div:nth-child(4) {
transform: rotate(36deg);
}
.so .inner .stack div:nth-child(5) {
transform: rotate(48deg);
}
.so .inner .box {
animation-name: box;
}
.so .inner .box .top {
animation-name: box-top;
}
.so .inner .box .left {
animation-name: box-left;
}
.so .inner .box .right {
animation-name: box-right;
}
.so .inner .box .bottom {
animation-name: box-bottom;
}
.so .inner .stack-box {
animation-name: stack-box;
}
.so .inner .stack {
animation-name: stack;
}
.so .inner .stack .inner-item {
animation-name: stack-items;
}
.so .inner .stack .item:nth-child(1) {
animation-name: stack-item-1;
}
.so .inner .stack .item:nth-child(2) {
animation-name: stack-item-2;
}
.so .inner .stack .item:nth-child(3) {
animation-name: stack-item-3;
}
.so .inner .stack .item:nth-child(4) {
animation-name: stack-item-4;
}
.so .inner .stack .item:nth-child(5) {
animation-name: stack-item-5;
}
@keyframes stack {
0% {
left: 22px;
}
15% {
left: 22px;
}
30% {
left: 52px;
}
50% {
left: 52px;
}
80% {
left: 22px;
}
}
@keyframes stack-item-1 {
0% {
transform: rotate(12deg * 0);
}
10% {
transform: rotate(0deg);
}
50% {
transform: rotate(0deg);
}
54% {
transform: rotate(0deg);
}
92% {
transform: rotate(12deg * 0);
}
}
@keyframes stack-item-2 {
0% {
transform: rotate(12deg * 1);
}
10% {
transform: rotate(0deg);
}
50% {
transform: rotate(0deg);
}
54% {
transform: rotate(0deg);
}
92% {
transform: rotate(12deg * 1);
}
}
@keyframes stack-item-3 {
0% {
transform: rotate(12deg * 2);
}
10% {
transform: rotate(0deg);
}
50% {
transform: rotate(0deg);
}
54% {
transform: rotate(0deg);
}
92% {
transform: rotate(12deg * 2);
}
}
@keyframes stack-item-4 {
0% {
transform: rotate(12deg * 3);
}
10% {
transform: rotate(0deg);
}
50% {
transform: rotate(0deg);
}
54% {
transform: rotate(0deg);
}
92% {
transform: rotate(12deg * 3);
}
}
@keyframes stack-item-5 {
0% {
transform: rotate(12deg * 4);
}
10% {
transform: rotate(0deg);
}
50% {
transform: rotate(0deg);
}
54% {
transform: rotate(0deg);
}
92% {
transform: rotate(12deg * 4);
}
}
@keyframes stack-items {
0% {
width: 71px;
}
15% {
width: 71px;
}
30% {
width: 12px;
}
50% {
width: 12px;
}
80% {
width: 71px;
}
}
@keyframes box {
0% {
left: 0;
}
15% {
left: 0;
}
30% {
left: 30px;
}
50% {
left: 30px;
}
80% {
left: 0;
}
}
@keyframes box-top {
0% {
width: 0;
}
6% {
width: 0;
}
15% {
width: 115px;
}
30% {
width: 56px;
}
50% {
width: 56px;
}
59% {
width: 0;
}
}
@keyframes box-bottom {
0% {
width: 115px;
}
15% {
width: 115px;
}
30% {
width: 56px;
}
50% {
width: 56px;
}
80% {
width: 115px;
}
}
@keyframes box-right {
15% {
left: 103px;
}
30% {
left: 44px;
}
50% {
left: 44px;
}
80% {
left: 103px;
}
}
@keyframes stack-box {
0% {
transform: rotate(0deg);
}
30% {
transform: rotate(0deg);
}
40% {
transform: rotate(135deg);
}
50% {
transform: rotate(135deg);
}
83% {
transform: rotate(360deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
<body>
<div class="so center">
<div class="inner">
<div class="stack-box">
<div class="stack">
<div class="item">
<div class="inner-item"></div>
</div>
<div class="item">
<div class="inner-item"></div>
</div>
<div class="item">
<div class="inner-item"></div>
</div>
<div class="item">
<div class="inner-item"></div>
</div>
<div class="item">
<div class="inner-item"></div>
</div>
</div>
<div class="box">
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="top"></div>
</div>
</div>
<div class="name">
stack<span class="b">overflow</span>
</div>
</div>
</div>
</body>
</html>
3-3.loading效果这个代码实在太多了，大家直接上网址看吧。css3-loading3-4.音乐震动条代码如下<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>纯CSS3模拟跳动的音符效果</title>
<style>
*{margin:0;padding:0;list-style: none;}
body{background-color: #efefef;}
.demo-music {
position: absolute;
width: 100%;
height: 200px;
top: 120px;
zoom: 1.5;
}
.demo-music .music {
width: 80px;
height: 50px;
top: 50%;
left: 50%;
-webkit-transform: translate(-40px, -25px);
transform: translate(-40px, -25px);
position: absolute;
}
.demo-music #waves {
width: 80px;
height: 50px;
position: absolute;
top: 12px;
left: 12px;
}
.demo-music #waves li {
position: relative;
float: left;
height: 100%;
width: 12%;
overflow: hidden;
margin-right: 1px;
}
.demo-music #waves li span {
position: absolute;
bottom: 0;
display: block;
height: 100%;
width: 100px;
background: #09f;
}
.demo-music #waves .li1 span {
animation: waves 0.8s linear 0s infinite alternate;
-webkit-animation: waves 0.8s linear 0s infinite alternate;
}
.demo-music #waves .li2 span {
animation: waves 0.9s linear 0s infinite alternate;
-webkit-animation: waves 0.9s linear 0s infinite alternate;
}
.demo-music #waves .li3 span {
animation: waves 1s linear 0s infinite alternate;
-webkit-animation: waves 1s linear 0s infinite alternate;
}
.demo-music #waves .li4 span {
animation: waves 0.8s linear 0s infinite alternate;
-webkit-animation: waves 0.8s linear 0s infinite alternate;
}
.demo-music #waves .li5 span {
animation: waves 0.7s linear 0s infinite alternate;
-webkit-animation: waves 0.7s linear 0s infinite alternate;
}
.demo-music #waves .li6 span {
animation: waves 0.8s linear 0s infinite alternate;
-webkit-animation: waves 0.8s linear 0s infinite alternate;
}
@-webkit-keyframes waves {
10% {
height: 20%;
}
20% {
height: 60%;
}
40% {
height: 40%;
}
50% {
height: 100%;
}
100% {
height: 50%;
}
}
@keyframes waves {
10% {
height: 20%;
}
20% {
height: 60%;
}
40% {
height: 40%;
}
50% {
height: 100%;
}
100% {
height: 50%;
}
}
</style>
</head>
<body>
<div class="demo-music">
<div class="music">
<ul id="waves" class="movement">
<li class="li1"><span class="ani-li"></span></li>
<li class="li2"><span class="ani-li"></span></li>
<li class="li3"><span class="ani-li"></span></li>
<li class="li4"><span class="ani-li"></span></li>
<li class="li5"><span class="ani-li"></span></li>
<li class="li6"><span class="ani-li"></span></li>
</ul>
<div class="music-state"></div>
</div>
</div>
</body>
</html>
4.形状转换这一部分，分2d转换和3d转换。有什么好玩的，下面列举几个！4-1.语法transform:适用于2D或3D转换的元素transform-origin：转换元素的位置（围绕那个点进行转换）。默认(x,y,z)：(50%,50%,0)4-2.实例transform:rotate(30deg);transform:translate(30px,30px);transform:scale(.8);transform: skew(10deg,10deg);transform:rotateX(180deg);transform:rotateY(180deg);transform:rotate3d(10,10,10,90deg);5.选择器css3提供的选择器可以让我们的开发，更加方便！这个大家都要了解。下面是css3提供的选择器。图片来自w3c。这一块建议大家去w3c看（CSS 选择器参考手册），那里的例子通俗易懂。我不重复讲了。提供的选择器里面，基本都挺好用的。但是我觉得有些不会很常用，比如，:root，:empty，:target，:enabled，:checked。而且几个不推荐使用，网上的说法是性能较差[attribute*=value]，[attribute$=value]，[attribute^=value]，这个我没用过，不太清楚。6.阴影以前没有css3的时候，或者需要兼容低版本浏览器的时候，阴影只能用图片实现，但是现在不需要，css3就提供了！6-1.语法box-shadow: 水平阴影的位置 垂直阴影的位置 模糊距离 阴影的大小 阴影的颜色 阴影开始方向（默认是从里往外，设置inset就是从外往里）;
6-1.栗子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div
{
width:300px;
height:100px;
background:#09f;
box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
运行效果7.边框7-1.边框图片7-1-1.语法border-image: 图片url 图像边界向内偏移 图像边界的宽度(默认为边框的宽度) 用于指定在边框外部绘制偏移的量（默认0） 铺满方式--重复（repeat）、拉伸（stretch）或铺满（round）（默认：拉伸（stretch））;7-1-2.栗子边框图片（来自菜鸟教程）代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.demo {
border: 15px solid transparent;
padding: 15px;
border-image: url(border.png);
border-image-slice: 30;
border-image-repeat: round;
border-image-outset: 0;
}
</style>
</head>
<body>
<div class="demo"></div>
</body>
</html>
```swift
效果有趣变化那个更好看，大家看着办7-2.边框圆角7-2-1.语法border-radius: n1,n2,n3,n4;
border-radius: n1,n2,n3,n4/n1,n2,n3,n4;
/*n1-n4四个值的顺序是：左上角，右上角，右下角，左下角。*/
7-2-2.栗子
```swift
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div
{
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
text-align:center;
width:300px;
border-radius:25px 0 25px 0;
}
</style>
</head>
<body>
<div>border-radius</div>
</body>
</html>
运行结果8.背景这一块主要讲css3提供背景的三个属性background-clip制定背景绘制（显示）区域默认情况（从边框开始绘制）从padding开始绘制（显示），不算border,，相当于把border那里的背景给裁剪掉！（background-clip: padding-box;）只在内容区绘制（显示），不算padding和border，相当于把padding和border那里的背景给裁剪掉！（background-clip: content-box;）background-origin引用菜鸟教程的说法：background-Origin属性指定background-position属性应该是相对位置下面的div初始的html和css代码都是一样的。如下html：
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
css
div
{
border:10px dashed black;
padding:35px;
background:url('logo.png') no-repeat,#ccc;
background-position:0px 0px;
}
下面看下，background-origin不同的三种情况background-size这个相信很好理解，就是制定背景的大小下面的div初始的html和css代码都是一样的。如下html
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>cssdiv
{
border:1px dashed black;
padding:35px;
background:url('test.jpg') no-repeat;
}
多张背景图这个没什么，就是在一张图片，使用多张背景图片，代码如下！
html<p>两张图片的背景</p>
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>cssdiv
{
border:1px dashed black;
padding:35px;
background-size: contain;
background:url('test.jpg') no-repeat left,url(logo.png) no-repeat right;
}
9.反射这个也可以说是倒影，用起来也挺有趣的。
9-1.语法-webkit-box-reflect:方向[ above-上 | below-下 | right-右 | left-左 ]，偏移量，遮罩图片9-2.下倒影
html
<p>下倒影</p>
<p class="reflect-bottom-p"><img src="test.jpg" class="reflect-bottom"></p>css.reflect-bottom-p {
padding-bottom: 300px;
}
.reflect-bottom {
-webkit-box-reflect: below;
}
9-2.右倒影（有偏移）html<p>右倒影同时有偏移</p>
<p><img src="test.jpg" class="reflect-right-translate"></p>css.reflect-right-translate {
-webkit-box-reflect: right 10px;
}
9-3.下倒影（渐变）html<p>下倒影（渐变）</p>
<p class="reflect-bottom-p"><img src="test.jpg" class="reflect-bottom-mask"></p>
cssreflect-bottom-mask {
-webkit-box-reflect: below 0 linear-gradient(transparent, white);
}
9-3.下倒影（图片遮罩）使用的图片html<p>下倒影（png图片）</p>
<p class="reflect-bottom-p"><img src="test.jpg" class="reflect-bottom-img"></p>
css.reflect-bottom-img {
-webkit-box-reflect: below 0 url(shou.png);
}
10.文字换行语法：word-break: normal|break-all|keep-all;栗子和运行效果语法：word-wrap: normal|break-word;栗子和运行效果超出省略号这个，主要讲text-overflow这个属性，我直接讲实例的原因是text-overflow的三个写法，clip|ellipsis|string。clip这个方式处理不美观，不优雅。string只在火狐兼容。超出省略号这个其实有三行代码，禁止换行，超出隐藏，超出省略号html
<div>This is some long text that will not fit in the box</div>cssdiv
{
width:200px;
border:1px solid #000000;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
运行结果多行超出省略号超出省略号。这个对于大家来说，不难！但是以前如果是多行超出省略号，就只能用js模拟！现在css3提供了多行省略号的方法！遗憾就是这个暂时只支持webkit浏览器！代码如下<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div
{
width:400px;
margin:0 auto;
overflow : hidden;
border:1px solid #ccc;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<div>这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏</div>
</body>
</html>
效果图这样发现边框贴着难看，要撑开一点，但是撑开上下边框不要使用padding!因为会出现下面这个效果。正确姿势是这样写<style>
div
{
width:400px;
margin:0 auto;
overflow : hidden;
border:1px solid #ccc;
text-overflow: ellipsis;
padding:0 10px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-height:30px;
height:60px;
}
</style>
运行结果这样写，就算在不是webkit内核的浏览器，也可以优雅降级（高度=行高*行数（webkit-line-clamp））！文字阴影语法：text-shadow:水平阴影，垂直阴影，模糊的距离，以及阴影的颜色。栗子：text-shadow: 0 0 10px #f00;效果11.颜色这个其实就是css3提供了新的颜色表示方法。rgba一个是rgba（rgb为颜色值，a为透明度）color: rgba(255,00,00,1);
background: rgba(00,00,00,.5);
hslah:色相”，“s：饱和度”，“l：亮度”，“a：透明度”这个我姿势了解过，没用过，这里简单给一个例子color: hsla( 112, 72%, 33%, 0.68);
background-color: hsla( 49, 65%, 60%, 0.68);12.渐变css3的渐变可以说是一大亮点，提供了线性渐变，径向渐变，圆锥渐变（w3c和菜鸟教程都没有提及，是我从一篇文章了解到，但是我自己在谷歌浏览器尝试，却是一个无效的写法！大家如果知道怎么用，请告知！感谢）渐变这一部分，由于用法灵活，功能也强大，这个写起来很长，写一点又感觉没什么意思，我这里贴几个链接教程给大家，在文章我不多说了，毕竟我也是从那几个地方学的，他们写得也是比我好，比我详细！CSS3 Gradient再说CSS3渐变——线性渐变再说CSS3渐变——径向渐变神奇的 conic-gradient 圆锥渐变（这篇就是看我看到圆锥渐变的文章）13.Filter（滤镜）css3的滤镜也是一个亮点，功能强大，写法也灵活。栗子代码如下<p>原图</p>
<img src="test.jpg" />
<p>黑白色filter: grayscale(100%)</p>
<img src="test.jpg" style="filter: grayscale(100%);"/>
<p>褐色filter:sepia(1)</p>
<img src="test.jpg" style="filter:sepia(1);"/>
<p>饱和度saturate(2)</p>
<img src="test.jpg" style="filter:saturate(2);"/>
<p>色相旋转hue-rotate(90deg)</p>
<img src="test.jpg" style="filter:hue-rotate(90deg);"/>
<p>反色filter:invert(1)</p>
<img src="test.jpg" style="filter:invert(1);"/>
<p>透明度opacity(.5)</p>
<img src="test.jpg" style="filter:opacity(.5);"/>
<p>亮度brightness(.5)</p>
<img src="test.jpg" style="filter:brightness(.5);"/>
<p>对比度contrast(2)</p>
<img src="test.jpg" style="filter:contrast(2);"/>
<p>模糊blur(3px)</p>
<img src="test.jpg" style="filter:blur(3px);"/>
<p>阴影drop-shadow(5px 5px 5px #000)</p>
<img src="test.jpg" style="filter:drop-shadow(5px 5px 5px #000);"/>
网友评论