15个css常用技巧

相信很多自学的小伙伴都想学习web前端，可以关注小编后私信【学习】可以免费领取学习地址/案例教程/2018最新的一套学习教程，让学习有方向。

1、三角形列表项目符号

ul
 {
     margin: 0.75em 0;
     padding: 0 1em;
     list-style: none;
}
li:before {
      
content: "";
     border-color: transparent #111;
     border-style: solid;
     
border-width: 0.35em 0 0.35em 0.45em;
     display: block;
     height: 0;
     width: 
0;
     left: -1em;
     top: 0.9em;
     position: relative;
}

2、外部CSS3 盒阴影

#mydiv
 {
      -webkit-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
     
-moz-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
     box-shadow: 0 2px 
2px -2px rgba(0, 0, 0, 0.52);
}

3、内部CSS3 盒阴影

#mydiv {
      -moz-box-shadow: inset 2px 0 4px #000;
     -webkit-box-shadow: inset 2px 0 4px #000;
     box-shadow: inset 2px 0 4px #000;
}

4、CSS3 斑马线

tbody tr:nth-child(odd) {
     background-color: #ccc;
}

5、强制出现垂直滚动条

html {
 height: 101% }

6、内容垂直居中

.container {
     min-height: 6.5em;
     display: table-cell;
     vertical-align: middle;
}
 

7、CSS3：全屏背景

html
 {
      background: url('images/bg.jpg') no-repeat center center fixed;
      
-webkit-background-size: cover;
     -moz-background-size: cover;
     
-o-background-size: cover;
     background-size: cover;
}

8、锚链接伪类

a:link {
     color: blue;
 }
a:visited {
     color: purple;
 }
a:hover {
     color: red;
 }
a:active {
     color: yellow;
 }

9、为logo隐藏H1

h1
 {
     text-indent: -9999px;
     margin: 0 auto;
     width: 320px;
     height: 85px;
     
background: transparent url("images/logo.png") no-repeat scroll;
}

10、自定义文本选择

::selection {
     background: #e2eae2;
 }
::-moz-selection {
     background: #e2eae2;
 }
::-webkit-selection {
     background: #e2eae2;
 }

11、跨浏览器的透明

.transparent
 {
     filter: alpha(opacity=50);
     /* internet explorer */ -khtml-opacity: 
0.5;
     /* khtml, old safari */ -moz-opacity: 0.5;
     /* mozilla, netscape */ 
opacity: 0.5;
 /* fx, safari, opera */}

12、新版清除浮动（2011）

.clearfix:before,
 .container:after {
     content: "";
     display: table;
 }
.clearfix:after {
     
clear: both;
 }
/* IE 6/7 */.clearfix {
     zoom: 1;
 }

13、典型的CSS清除浮动

.clearfix:after
 {
     content: ".";
      display: block;
     clear: both;
     visibility: hidden;
     
line-height: 0;
     height: 0;
 }
.clearfix {
     display: inline-block;
 
}
html[xmlns] .clearfix {
     display: block;
 }
* html .clearfix {
     height: 1%;

 }

14、制造模糊文本

想要让文本模糊？可以使用color透明和text-shadow实现

.blurry-text {
     color: transparent;
     text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
    

15、CSS：表格列宽自适用

对于表格，当谈到调整列宽时，是比较痛苦的。然后，这里有一个可以使用的技巧：给td元素添加white-space: nowrap; 能让文本正确的换行

td {
     white-space: nowrap;
}
    

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！