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、文字溢出