常用并且经常想不起来的CSS样式汇总

字间距（css中字间距）

方法1：使用letter-spacing属性--字符间距
p{
letter-spacing:20px;
}
方法2：使用word-spacing属性--单词的间距(以空格为参考对象)
p{
word-spacing:20px;
}

html打开新页面

<a href="abc.html" target="_blank">点击这里</a>
<base target="_blank">  全局代码

添加target="_blank"就能够在点击的时候在新的窗口打开

CSS旋转

transform:rotate(30deg); 表示元素顺时针旋转30°

CSS放大

-webkit-transform:scaleX(1.2);  /*兼容-webkit-引擎浏览器*/
-moz-transform:scaleX(1.2);     /*兼容-moz-引擎浏览器*/
transform:scaleX(1.2);

div 居中css样式

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

伪元素选择器用法

// :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;}

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 rgb(0,0,0,0.5);

设置渐变颜色背景，线性

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

透明度

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

全屏半透明遮罩层

#opacity{
    position: fixed; 
    top: 0; 
    right:0;
    bottom:0;
    left: 0; 
    z-index: 1; 
    background: #000; 
    filter: alpha(opacity=80); 
    opacity: 0.8 !important;
}