字间距(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;
}