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