各种常用的css样式（收集整理）

a{text-decoration:none;}  //A标签去掉下划线

a{cursor:pointer;}  //鼠标手型样式

li{list-style:none;}  //列表样式:无。li标签去掉点

em{font-style:normal}  //去掉EM标签斜体样式，初始化代码

用a标签实现跳转到本页面或者目标页面的顶部、底部或者某一位置：
1、定义目标位置，赋予id。
2、给a标签添加href为#id。

文本两端对齐
text-align: justify;

div 居中css样式 

left: 50%;
transform: translateX(-50%);

 web copyright 自动时间（当年年份）

<script>document.write(new Date().getFullYear());</script>

伪元素选择器用法

// :first-child 选择器用于选取属于其父元素的首个子元素的指定选择器
p:first-child{background-color:yellow;} 

// :last-child 选择器匹配属于其父元素的最后一个子元素的每个元素
p:last-child{ background:#ff0000;}

// 规定属于其父元素的第二个子元素的每个 p 的背景色
p:nth-child(2){background:#ff0000;}

// Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1
p:nth-child(odd){background:#ff0000;}
p:nth-child(even){background:#0000ff;}

//我们指定了下标是 3 的倍数的所有 p 元素的背景色
p:nth-child(3n+0){background:#ff0000;}

// :nth-last-child(n) 选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数
p:nth-last-child(2){background:#ff0000;} 
p:nth-last-child(odd){background:#ff0000;} // 奇数行
p:nth-last-child(even){background:#0000ff;} // 偶数行
p:nth-last-child(3n+0){background:#ff0000;} // 倍数行

// :empty选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。
p:empty {display: none;}​ 

// :not选择器称为否定选择器，可以选择除某个元素之外的所有元素。

input:not([type="submit"]){
  border:1px solid red;
} 

CSS圆角样式，兼容

-moz-border-radius: 15px; /* Firefox */
-webkit-border-radius: 15px; /* Safari 和 Chrome */
border-radius: 15px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */

//支持上、右、下、左

border-radius:5px 15px 20px 25px;

边框阴影

box-shadow: 0 0 30px #ccc;

设置渐变颜色背景，线性/放射性/循环

/*1，线性渐变 使用linear-gradient（）函数可以创建渐变*/
#div1 {   //双色渐变
background: linear-gradient(top, white, blue);
}
#div2 {   //渐变从左上角到右下角
background: linear-gradient(top left, white, blue);
}
#div3 {   //多色渐变
background: linear-gradient(left, red, yellow, lime, aqua, blue);
}
#div4 {   //使用渐变点（gradient stop）控制每个颜色的起点
background: linear-gradient(left,red 5%, green 15%, blue 60%);
background: -ms-linear-gradient(left,red 5%, green 15%, blue 60%);
background: -webkit-linear-gradient(left,red 5%, green 15%, blue 60%);
background: -moz-linear-gradient(left,red 5%, green 15%, blue 60%);
}

/*2，放射性渐变 使用radial-gradient()函数创建放射性渐变*/
#div1 {   //使用 circle 表示圆形渐变
background: radial-gradient(circle, white, lightblue);
}
#div2 {   //使用 ellipse 表示把渐变拉伸成椭圆形
background: radial-gradient(circle, white, lightblue);
}
#div3 {   //设置渐变的中心位置，使用 at 关键字告诉浏览器开始的位置离左边缘70%，离上边缘30%
background: radial-gradient(circle at 70% 30%, white, lightblue);
}

/*3，循环渐变 linear-gradient() 和 radial-gradient() 只能将设置的颜色渐变一次*/
#div1 {   //使用百分比限制渐变大小
background: repeating-radial-gradient(circle, white, lightblue 10%);
}
#div2 {   //使用固定像素值限制渐变大小
background: repeating-linear-gradient(left, white, lightblue 30px);
}

/*网页背景对半色CSS3*/
#div1 {
background: linear-gradient(to right, red 50%, blue 50%);
}

在线渐变色生成工具
https://www.colorzilla.com/gradient-editor/

文字旋转 css （其中filter中rotation=1，这个1可以是0、1、2、3四个值分别是四个方向）

transform:rotate(90deg);
-ms-transform:rotate(90deg); /* Internet Explorer 9*/
-moz-transform:rotate(90deg); /* Firefox */
-webkit-transform:rotate(90deg); /* Safari 和 Chrome */
-o-transform:rotate(90deg); /* Opera */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

图片水平、垂直翻转 css

/* 方法一 */
.rotate {
  transform: rotateY(180deg);   /* 水平镜像翻转 */
}
.rotate {
  transform: rotateX(180deg);   /* 垂直镜像翻转 */
}

/* 方法二 各个浏览器对镜像翻转的兼容写法来实现 */
.scale {   /* 水平镜像翻转 */
  -moz-transform:scaleX(-1);
  -webkit-transform:scaleX(-1);
  -o-transform:scaleX(-1);
  transform:scaleX(-1);
  /*兼容IE*/
  filter:FlipH;
}
.scale {   /* 垂直镜像翻转 */
  -moz-transform:scaleY(-1);
  -webkit-transform:scaleY(-1);
  -o-transform:scaleY(-1);
  transform:scaleY(-1);
  /*兼容IE*/
  filter:FlipV;
}

鼠标经过延时过渡效果

a:hover{transition: all .5s ease-out;}

div{
transition: width 2s;
-moz-transition: width 2s;	/* Firefox 4 */
-webkit-transition: width 2s;	/* Safari 和 Chrome */
-o-transition: width 2s;	/* Opera */
}

打开新窗口标签 

target="_blank" // 浏览器会另开一个新窗口显示document.html文档

<base target="_blank" />  //在head标签内添加。所有a标签跳转到新页面

img div居中用法

<style type="text/css">
    *{margin: 0;padding:0;}
    div{
        width:150px;
        height: 100px;
        position: relative;
        border:1px solid #000;
    }
    img {
        width: 50px;
        height: 50px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);  //这段比较重要
    }
</style>

透明度

filter: alpha(Opacity=70);
-moz-opacity: 0.7;
opacity: 0.7;

background-color:rgba(0,0,0,0.5);/*IE9、标准浏览器、IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂*/

css3 字体自动换行第二行缩进一格

p {
　　text-indent: -2em;
　　margin-left: 2em;
}

文字强制转行CSS（特别是英文下）

p {
    word-wrap: break-word;
    word-break: break-all;
}

纯CSS实现垂直居中

.box1{
    display: table-cell;
    vertical-align: middle;
    text-align: center;        
}
.box2{
    display: flex;
    justify-content:center;
    align-items:Center;
    height:100%;
}

全屏半透明遮罩层

#opacity{
    background: black; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    width: 100%; 
    height: 100%; 
    display: block; 
    z-index: 20; 
    filter: alpha(opacity=80); 
    opacity: 0.8 !important;
}