css的小技巧
前几天看到《css揭秘》这本书，第一感觉是 css怎么能出这么厚的一本书，不过 细细一想，用好css真的可以实现很多想要的效果，节省很多js代码。
总结几个css的小技巧：
1，将所有元素垂直居中
1 html, body { 2 height: 100%; 3 margin: 0; 4 } 5 6 body { 7 -webkit-align-items: center; 8 -ms-flex-align: center; 9 align-items: center; 10 display: -webkit-flex; 11 display: flex; 12 }
IE11、Firefox、Chrome 和 Opera 支持 align-items 属性。
Safari、IE 9 及其之前的版本不支持 align-items 属性。IE 10 需要前缀 -ms-。
任何一个容器都可以指定为Flex布局。行内元素也可以使用Flex布局。(display: inline-flex;)
Webkit内核的浏览器，必须加上-webkit前缀。
2,表格单元格等宽:
1 .calendar { 2 table-layout: fixed; 3 }
3,使用属性选择器用于空链接:
当a元素没有文本值，但 href 属性有链接的时候显示链接：
1 a[href^="http"]:empty::before { 2 content: attr(href); 3 }
4,检测鼠标双击:
HTML:
readonly:输入字段为只读
1 <div class="test3"> 2 <span><input type="text" value=" " readonly="true" /> 3 <a href="http://renpingjun.com">Double click me</a></span> 4 </div>
CSS:
1 .test3 span { 2 position: relative; 3 } 4 .test3 span a { 5 position: relative; 6 z-index: 2; 7 } 8 .test3 span a:hover, .test3 span a:active { 9 z-index: 4; 10 } 11 .test3 span input { 12 background: transparent; 13 border: 0; 14 cursor: pointer; 15 position: absolute; 16 top: -1px; 17 left: 0; 18 width: 101%; /* Hacky */ 19 height: 301%; /* Hacky */ 20 z-index: 3; 21 } 22 .test3 span input:focus { 23 background: transparent; 24 border: 0; 25 z-index: 1; 26 }
5，CSS 写出三角形：
利用border来写三角形代码，并且兼容IE6.
1 /* create an arrow that points up */ 2 div.arrow-up { 3 width:0px; 4 height:0px; 5 border-left:5px solid transparent; /* left arrow slant */ 6 border-right:5px solid transparent; /* right arrow slant */ 7 border-bottom:5px solid #2f2f2f; /* bottom, add background color here */ 8 font-size:0px; 9 line-height:0px; 10 } 11 12 /* create an arrow that points down */ 13 div.arrow-down { 14 width:0px; 15 height:0px; 16 border-left:5px solid transparent; 17 border-right:5px solid transparent; 18 border-top:5px solid #2f2f2f; 19 font-size:0px; 20 line-height:0px; 21 } 22 23 /* create an arrow that points left */ 24 div.arrow-left { 25 width:0px; 26 height:0px; 27 border-bottom:5px solid transparent; /* left arrow slant */ 28 border-top:5px solid transparent; /* right arrow slant */ 29 border-right:5px solid #2f2f2f; /* bottom, add background color here */ 30 font-size:0px; 31 line-height:0px; 32 } 33 34 /* create an arrow that points right */ 35 div.arrow-right { 36 width:0px; 37 height:0px; 38 border-bottom:5px solid transparent; /* left arrow slant */ 39 border-top:5px solid transparent; /* right arrow slant */ 40 border-left:5px solid #2f2f2f; /* bottom, add background color here */ 41 font-size:0px; 42 line-height:0px; 43 }
6，文本渐变：
1 h2[data-text] { 2 position: relative; 3 } 4 h2[data-text]::after { 5 content: attr(data-text); 6 z-index: 10; 7 color: #e3e3e3; 8 position: absolute; 9 top: 0; 10 left: 0; 11 -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), color-stop(50%, rgba(0,0,0,1)), to(rgba(0,0,0,0)));}
7,禁用鼠标事件:
CSS3 新增的 pointer-events 让你能够禁用元素的鼠标事件，例如，一个连接如果设置了下面的样式就无法点击了。
1 .disabled { pointer-events: none; }
8,模糊文本:
1 .blur { 2 color: transparent; text-shadow: 0 0 5px rgba(0,0,0,0.5); 3 }
