8月10日CSS总结

1、三角形光标转换

CSS：

.one{

     width: 0;­­

          height: 0;

     border-top: 100px solid #000;

     border-right:100px solid transparent;

     border-left:100px solid transparent;

   }

.one:hover{

border-top: none;

border-bottom: 100px solid orange;

        }

HTML: <div class="one"></div>

2、font-weight(字体加粗)

语法：

font-weight : normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

例：

  CSS: p { font-weight:bold;}

  HTML:<p>你好，美女</p>

3、圆角效果

语法：border-radius:[ <length> | <percentage> ]{1,4}]

向元素添加圆角边框。

例1：

/* 所有角都使用半径为10px的圆角 */ 

div{ border-radius:10px;}  

/* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */ 

div{ border-radius: 5px 4px 3px 2px; 

/*也可以分别设置每个角的垂直半径和水平半径,用斜杠隔开，第一个参数表示左上角开始顺时针的水平半径，第二个参数表示左上角开始顺时针的垂直半径*/

div{ border-radius: 10px 20px 30px 40px  /  5px 10px 15px 20px; }

/*圆*/

div{ border-radius:50% }

例2：

CSS: .good1{

                     width: 100px;

                     height: 100px;

                     background-color: red;

                     /*四个角为圆角*/

                     border-radius: 10px;

              }

HTML：<div class="good1"></div>

4、盒子阴影

语法：

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

例1: outset { box-shadow: 5px 5px rgba(0, 0, 0, .6); }             

 /*外阴影常规效果*/

.outset-blur{ box-shadow: 5px 5px 5px 10px rgba(0, 0, 0, .6); }

/*外阴影模糊外延效果*/

. inset { box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, .6) inset; }

  /*内阴影效果*/

例2：

CSS：

.box-shadow-1{

                     width: 100px;

                     height: 100px;

                     background-color: #cccccc;

                     margin: 10px;

                     box-shadow: 5px 5px rgba(0, 0, 0, .6);

HTML:     <div class="box-shadow-1"></div>

5、文字溢出