CSS中常用的技巧

积水成河

1.登录 | 注册 那些事

相信大家对这个不陌生，登录 | 注册 有很多种写法，我想对你搜easy，你可以直接给文本内容，也可以用定位等等。。。今天我要讲的是用padding让登录 | 注册更唯美。

<div>登录<span></span>注册</div>    
样式
span{
    font-size:0;
    padding:11px 6px 1px;
    margin-left:12px;
    border-left:2px solid;
}

效果：

2.四个不同方向的小三角

<div class="triangle top"></div>
<div class="triangle bottom"></div>
<div class="triangle right"></div>
<div class="triangle left"></div>
样式
.triangle{
      border:solid 10px transparent;
      float: left;
}
.top{
     border-bottom-color: red;/*上*/
}
.bottom{
     border-top-color: red;/*下*/
}
.right{
     border-left-color: red;/*右*/
}
.left{
     border-right-color: red;/*左*/
}

3.自定义光标样式

text是移动到文本上的那种效果

wait是等待的那种效果

default是默认效果

e-resize是向右的箭头

ne-resize是向右上的箭头

n-resize是向上的箭头

nw-resize是向左上的箭头

w-resize是向左的箭头

sw-resize是左下的箭头

s-resize是向下的箭头

se-resize是向右下的箭头

pointer 小手效果

auto是由系统自动给出效果

自定义图片用：cursor: url(图片路径),pointer; 图片格式有可能有兼容性问题自己需要注意。

4.box-shadow

box-shadow的特效

<div class="div2">boxshadow不占空间</div>
.div2{
		border:3px solid red;
		width:50px;
		height:80px;
		margin:50px auto;
		background-color:gold;
		/*box-shadow: inset 10px 10px 0px -5px blue;*/
		/* box-shadow:水平偏移量 垂直偏移量 模糊度  颜色*/
		/* box-shadow:inset 水平偏移量 垂直偏移量 模糊度 阴影扩张半径 颜色*/
		/* inset 表示向内阴影  总体扩张宽度=偏移量+阴影扩张半径*/
		box-shadow:0 0 0 5px blue,0 0 0 10px green,0 0 0 15px orange,inset 0 0 0 5px pink;
		border-radius:20px; 
	}

效果

5.outline

outline不占空间，其效果可以和阴影媲美哦，但是什么情况适用什么，还需要你判断。

.div1{
		border:3px solid red;
		width:50px;
		height:80px;
		margin:50px auto;
		background-color:gold;
		outline:5px solid blue;/*描边 边框外面一层*/
		outline-offset:5px;/*描边和边框之间的距离  当值为负值的时候outline会收缩*/
	}

效果

今天先整理到这，以后再添加，希望对你有帮助。