用CSS美化你的HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
    <!--<link href="cc2.css" rel="stylesheet" type="text/css">-->
    <style> 
        div { 
            width: 100px; 
            height: 100px; 
            white-space: nowrap; 
            overflow: hidden; 
            text-overflow: ellipsis; 
        } 
    </style> 
</head> 
<body> 
    <div>mosson mosson mosson mosson mosson mosson mosson mosson mosson mosson mosson mosson mosson mosson mosson mosson mosson mosson mosson mosson mosson mosson mosson mosson</div> 
</body> 
</html> 

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
    <style> 
        p { 
            width: 150px; 
            height: 160px; 
            background-color: #FFA500; 
            /*边框阴影*/ 
            box-shadow: 10px 10px 5px #888; 
            /*自动换行*/ 
            word-wrap: break-word; 
        } 
        h1 { 
            text-shadow: 5px 5px 5px #888; 
        } 
    </style> 
</head> 
<body> 
    <p> 菊花残，满地伤，</p> 
    <h1>mosson</h1> 
</body> 
</html> 

li{list-style：none}
a{text-decoration：none}

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
    <style> 
        div { 
            border:2px solid; 
            border-radius:25px; 
            width: 140px; 
        } 
    </style> 
</head> 
<body> 
    <div>看我的拐角</div> 
</body> 
</html> 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .radius1 {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: yellow;
            border-radius: 20px;
        }
        .radius2 {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: red;
            border-radius: 20px 35px;
        }
        .radius3 {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: blue;
            border-radius: 20px 35px 50px;
        }
        .radius4 {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: green;
            border-radius: 20px 35px 50px 60px;
        }
        .radius5{
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: purple;
            border-radius: 50px 100px 50px 50px;
        }
        .radius6{
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: purple;
            border-radius: 50px 100px;
        }
    </style>
</head>
<body>
    <div>
        <span class="radius1"></span>
        <span class="radius2"></span>
        <span class="radius3"></span>
        <span class="radius4"></span>
        <span class="radius5"></span>
        <span class="radius6"></span>
    </div>
</body>
</html>

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
    <style> 
        .triangle-one { 
            display: inline-block; 
            border-top: 50px red solid; 
            border-right: 50px green solid; 
            border-bottom: 50px yellow solid; 
            border-left: 50px blue solid; 
        } 
        .triangle-two { 
            display: inline-block; 
            border-top: 0 red solid; 
            border-right: 50px green solid; 
            border-bottom: 50px yellow solid; 
            border-left: 50px blue solid; 
        } 
        .triangle-stree { 
            display: inline-block; 
            border-top: 50px red solid; 
            border-right: 0 green solid; 
            border-bottom: 50px yellow solid; 
            border-left: 50px blue solid; 
        } 
        .triangle-four { 
            display: inline-block; 
            border-top: 50px red solid; 
            border-right: 0 green solid; 
            border-bottom: 0 yellow solid; 
            border-left: 50px blue solid; 
        } 
  
        .triangle-five { 
            display: inline-block; 
            border: 50px transparent solid; 
            border-top: 50px red solid; 
        } 
        .triangle-six { 
            display: inline-block; 
            border: 50px transparent solid; 
            border-bottom: 50px yellow solid; 
        } 
        .triangle-seven { 
            display: inline-block; 
            border: 50px transparent solid; 
            border-top: 60px red solid; 
            border-right: 0; 
        } 
        .triangle-eight { 
            display: inline-block; 
            border: 50px transparent solid; 
            border-left: 30px yellow solid; 
            border-bottom: 0; 
        } 
    </style> 
</head> 
<body> 
    <div class="triangle-one"></div> 
    <div class="triangle-two"></div> 
    <div class="triangle-stree"></div> 
    <div class="triangle-four"></div> 
    <div class="triangle-five"></div> 
    <div class="triangle-six"></div> 
    <div class="triangle-seven"></div> 
    <div class="triangle-eight"></div> 
</body> 
</html> 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .back {
            /*整个画布的背景宽度、高度、颜色*/
            width: 1000px;
            height: 1000px;
            margin: 0 auto;
            background-color: #ddd;
            position: relative;
        }
        .back-in {
            /*放标题的位置*/
            position: absolute;
            width: 1020px;
            height: 45px;
            left: -20px;
            top: 50px;
            background-color: #2F4F4F;
        }
        .back-img {
            /*灰色角标*/
            border: 20px solid transparent;
            border-top: 10px solid dimgrey;
            border-right: 0;
            display: inline-block;
            position: absolute;
            top: 95px;
            left: -20px;
        }
        .back-font {
            line-height: 45px;
            margin-left: 30px;
            color: white;
        }
    </style>
</head>
<body>
    <div class="back">
        <div class="back-in"><span class="back-font">雨一直下，气氛还算融洽，...</span></div>
        <div class="back-img"></div>
    </div>
</body>
</html>

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
    <style> 
        .z-index1 { 
            width: 100px; 
            height: 100px; 
            background-color: yellow; 
            position: absolute; 
            z-index: -1; 
        } 
        .z-index2 { 
            width: 100px; 
            height: 100px; 
            background-color: red; 
            position: absolute; 
            top: 20px; 
            left: 20px; 
            z-index: 5; 
        } 
    </style> 
</head> 
<body> 
    <div class="z-index1"></div> 
    <div class="z-index2"></div> 
</body> 
</html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .zoom1 {
            zoom: 100%;
        }
        .zoom2 {
            zoom: 150%;
        }
        .zoom3 {
            zoom: 200%;
        }
    </style>
</head>
<body>
    <div class="zoom1"> 100%</div>
    <div class="zoom2">200%</div>
    <div class="zoom3">300%</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<link href="cc2.css" rel="stylesheet" type="text/css">-->
    <style>
        body {
            cursor: url("mouse.png"), auto;
            /*图片地址：http://images.cnblogs.com/cnblogs_com/suoning/845162/o_mouse.png*/
        }
    </style>
</head>
<body>
    <div><img src="http://images.cnblogs.com/cnblogs_com/suoning/845162/o_ns.png" height="100%" width="100%"></div>
</body>
</html>

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>nick</title> 
    <meta charset="utf-8" /> 
    <style type="text/css"> 
        div { 
            border: 1px solid black; 
            height: 30px; 
            width: 30px; 
            background-color: yellow; 
  
            /*transform-origin: 50px 50px;*/ 
            transform-origin: left; 
            transform: rotate(50deg); 
            /*transform: skew(50deg,50deg);*/ 
            /*transform: translate(50px,50px);*/ 
            /*transform: scale(2);*/ 
        } 
    </style> 
</head> 
<body> 
    <div></div> 
</body> 
</html> 

#property 指定属性对应类型

1、color： 通过红、绿、蓝和透明度组件变换（每个数值单独处理），如：background-color，border-color，color，outline-color等CSS属性；

2、length：真实的数字，如：word-spacing，width，vertical- align，top，right，bottom，left，padding，outline-width，margin，min-width，min- height，max-width，max-height，line-height，height，border-width，border- spacing，background-position等属性；

3、percentage：真实的数字，如：word-spacing，width，vertical- align，top，right，bottom，left，min-width，min- height，max-width，max-height，line-height，height，background-position等属性；

4、integer 离散步骤（整个数字），在真实的数字空间，以及使用floor()转换为整数时发生，如：outline-offset，z-index等属性；

5、number真实的（浮点型）数值，如：zoom，opacity，font-weight等属性；

6、transform list。

7、rectangle：通过x、 y、 width和height（转为数值）变换，如：crop；

8、visibility：离散步骤，在0到1数字范围之内，0表示“隐藏”，1表示完全“显示”,如：visibility；

9、shadow：作用于color、x、y、和blur（模糊）属性，如：text-shadow；

10、gradient：通过每次停止时的位置和颜色进行变化。它们必须有相同的类型（放射状的或是线性的）和相同的停止数值以便执行动画，如：background-image；

11、paint server (SVG)：只支持下面的情况：从gradient到gradient以及color到color，然后工作与上面类似；

12、space-separated list of above：如果列表有相同的项目数值，则列表每一项按照上面的规则进行变化，否则无变化；

13、a shorthand property：如果缩写的所有部分都可以实现动画，则会像所有单个属性变化一样变化。

#支持执行transition效果的属性

Property Name    Type
background-color    as color
background-position    as repeatable list of simple list of length, percentage, or calc
border-bottom-color    as color
border-bottom-width    as length
border-left-color    as color
border-left-width    as length
border-right-color    as color
border-right-width    as length
border-spacing    as simple list of length
border-top-color    as color
border-top-width    as length
bottom    as length, percentage, or calc
clip    as rectangle
color    as color
font-size    as length
font-weight    as font weight
height    as length, percentage, or calc
left    as length, percentage, or calc
letter-spacing    as length
line-height    as either number or length
margin-bottom    as length
margin-left    as length
margin-right    as length
margin-top    as length
max-height    as length, percentage, or calc
max-width    as length, percentage, or calc
min-height    as length, percentage, or calc
min-width    as length, percentage, or calc
opacity    as number
outline-color    as color
outline-width    as length
padding-bottom    as length
padding-left    as length
padding-right    as length
padding-top    as length
right    as length, percentage, or calc
text-indent    as length, percentage, or calc
text-shadow    as shadow list
top    as length, percentage, or calc
vertical-align    as length
visibility    as visibility
width    as length, percentage, or calc
word-spacing    as length
z-index    as integer