css技巧(常用)

1、zoom属性设置作用是设置或者检索对象的缩放比例;例:

Zoom1;  大小为默认(normal);

Zoom2  大小为默认的两倍;

2、font属性:font-family,font-style,font-variant,font-weight,font-size,font

font: bold 36px/48pxArial, Helvetica, sans-serif;

表示font-size36pxline-height48px

3、注释css样式:

可以在样式前面加‘*’或者‘1’,使样式失效;例:

     *display:inline;

     *zoom:1;

4、css构造三角形(构造三角形的方法是,div本身长宽设为0div边框设大,然后把其他三边设为透明,留下其中一边。

.s{
    	width:0;
   	height: 0;
   	border-color: transparent transparent transparent #f40;
  	border-width: 20px;
	border-style: solid;

}


5、彩色图片变成黑白(灰度可调节)
img.desaturate {
		    filter: grayscale(100%);
		    -webkit-filter: grayscale(100%);
		    -moz-filter: grayscale(100%);
		    -ms-filter: grayscale(100%);
		    -o-filter: grayscale(100%);
		}
6、给页面顶部加上阴影效果

body:before {
          content: "";
          position: fixed;
          top: -10px;
          left: 0;
          width: 100%;
          height: 10px;
 
          -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
          -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
          box-shadow: 0px 0px 10px rgba(0,0,0,.8);
 
          z-index: 100;
		}
7、让页面的一切都垂直居中

html, body {
		height: 100%;
		margin: 0;
	      }
body {
	-webkit-align-items: center;  
	-ms-flex-align: center;  
	align-items: center;
	display: -webkit-flex;
	display: flex;
	}
8、实现逗号分隔的列表(可换成任何符号)

ul > li:not(:last-child)::after {
		  content: ",";
		}
9、给body增加行高(不需要分别添加 line-height 到每个p,h标记等)

body {
	line-height: 1;
      }
10、继承 box-sizing(这样在插件或杠杆其他行为的其他组件中就能更容易地改变 box-sizing 了)
html {
	box-sizing: border-box;
	}
*, *:before, *:after {
		  box-sizing: inherit;
		}
11、当a元素没有文本值,但 href 属性有链接的时候显示链接

a[href^="http"]:empty::before {
		  content: attr(href);
		}
12、禁用鼠标事件 (例如,一个连接如果设置了下面的样式就无法点击了)

.disabled { pointer-events: none; }
13、模糊文本
.blur {
	color: transparent;
	text-shadow: 0 0 5px rgba(0,0,0,0.5);
	}
14、图像代替文本(这招经常被用来把一个基于文本的

title

标题换成图片)
解释说明: text-indent:-9999px; 利用缩进把文本撤掉,然后用指定了背景和长宽的图片代替。
h1 {
	text-indent:-9999px;
	background:url("title.jpg") no-repeat;
	width:100px;
	height:50px;
	}
15、尽可能用CSS animation 取代 Javascript







 

 


你可能感兴趣的:(css技巧(常用))