css常用命令

自定义光标

cursor:auto;//url || default || auto || crosshair || pointer || move || wait || help

去除input,a,buttom的基本样式

input,textarea,a,buttom{  
    background:none;  
    outline:none;  
    border:none;
}
input:focus,textarea:focus,a:focus,buttom:focus{   
    border:none;
}
input:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill {
      -webkit-box-shadow: 0 0 0px 1000px white inset;
      border: 0px !important;
}

阴影的用法

 box-shadow: 10px 10px 20px 10px rgba(255,255,0,0.5), -10px 10px 10px 10px rgba(255,255,255,0.5) 

注意事项：多个阴影可以用逗号隔开

例子：

.test{ 
  width: 100px; 
  height: 100px; 
  background: yellow; 
  margin: 100px auto; 
  border-radius: 50%; 
  box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.9); 
  transform: scale(1); 
  transition: box-shadow 0.6s, transform 0.5s; 
}
.test:hover{
	width: 100px;
	height: 100px;
	background: yellow;
	margin: 100px auto;
	border-radius: 50%;
	box-shadow: 0px 0px 50px 15px rgba(0,0,0,0.9);
	transition: box-shadow 0.5s;
}

居中

水平居中对齐

思路一：

margin:0 auto;
text-align:center;

思路二：flex布局

display:flex;
justify-content: center;

垂直居中对齐

思路一：行高和dom元素高相同

height:100px;
line-height: 100px;

思路二：flex布局

display: flex;
justify-content: center;	/*水平居中对齐*/
align-items: center;        /*垂直居中对齐*/

思路三：display: -webkit-box;

display: -webkit-box;
-webkit-box-align: center;
-webkit-box-pack: center;

思路四：绝对定位

1. 利用左定位：50% - 宽度的一半；顶定位：50% - 高度的一半；可用于有确定宽高的元素。

position: absolute;
width: 50px;
height: 50px;
left: calc(50% - 25px);
top: calc(50% - 25px);

2. 另一种，不需要宽高；利用四周都为0，margin:auto;来实现居中。

position: absolute;
margin: auto;
top:0;
bottom:0;
left:0;
right:0;

思路五：table-cell

display: table-cell;
vertical-align: middle;

transform 变幻

transform:rotate(7deg);
-ms-transform:rotate(7deg); 	/* IE 9 */
-moz-transform:rotate(7deg); 	/* Firefox */
-webkit-transform:rotate(7deg); /* Safari 和 Chrome */
-o-transform:rotate(7deg); 	/* Opera */

flax布局

.div{
	display: flex;
    flex-direction: row;
    justify-content: space-between;
    vertical-align: top;
    justify-self: flex-start;
}