常用CSS技巧总结

coding

总结工作中常用且实用的css技巧，总有一款适合你

重置css样式

在css中添加如下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address,   	big, cite, code,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label,    legend,table, caption, tbody, tfoot, thead, tr, th, td
{
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
/* remember to define focus styles! */
:focus {
    outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

给input的placeholder设置颜色

在CSS中添加如下代码

1
2
3
4
5
6
7
8
9
10
11
12
::-webkit-input-placeholder { /* WebKit browsers */
    color:    #999;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #999;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #999;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #999;
}

CSS强制文字换行或不换行，是否显示省略号

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
==html代码==
<div class="character">我爱你中国</div>
==css代码==
(1)自动换行
div.character{
    word-wrap: break-word;
    word-break: normal;
}
(2)强制英文单词断行
div.character{
    word-break:break-all;
}

(3)强制不换行
div.character{
	white-space:nowrap;
}
(4)单行文本强制不换行，显示省略号
div.character{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
(5)多行文本显示省略号
div.character{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
该方法适用于WebKit浏览器及移动端；
div.character{
    position: relative;
    line-height: 20px;
    max-height: 40px;
    overflow: hidden;
}
div.character:after{
    content: "...";
    position: absolute;
    bottom: 0;
    right: 0;
    padding-left: 40px;
}
该方法适用范围广，但文字未超出行的情况下也会出现省略号,可结合js优化该方法。

清除浮动

1
2
3
4
5
6
7
8
9
==html代码==
<div class="character clearFix">我爱你中国</div>
==css代码==
.clearFix:after{
	content:'';
    display:block;
    clear:both;
}
在需要清除浮动的dom元素中添加类名clearFix即可

让元素水平垂直居中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
（1）利用元素宽度进行计算
==html代码==
<div class="character"></div>
==css代码==
div.character{
    position:absolute;
    left:50%;
    height:50%;
    width:200px;
    height:200px;
    margin:-100px 0px 0px -100px;
}
（2）利用flex布局
==html代码==
<div class="box">
     <h1>flex弹性布局justify-content属性实现元素垂直居中</h1>
    <h1>flex弹性布局justify-content属性实现元素垂直居中</h1>
    <h1>flex弹性布局justify-content属性实现元素垂直居中</h1>
    <h1>flex弹性布局justify-content属性实现元素垂直居中</h1>
</div>
==css代码==
body{display: flex;justify-content:center}
.box{
    display: flex;
    width: 980px;
    height: 30rem;
    justify-content:center;
    background: #0099cc;
    flex-direction:column;
    align-items:center;
}
h1{
    display: flex;
    justify-content:center;
    font-size: 1rem;
    padding: 1rem;
    border: 1px dashed #FFF;
    color: #FFF;
    width: 28rem
}

用图片代替文字

1
2
3
4
5
6
7
8
9
10
11
==html代码==
<h1 class="character">我爱你中国</h1>
==css代码==
h1.character {
    text-indent:-9999px;
    margin:0 auto;
    width:400px;
    height:100px;
    background:transparent url("images/logo.jpg") no-repeat scroll;
}
最常见的就是使用使用图片来替换Logo，这个是非常有用的，而且方便搜索引擎的优化

清除图片下方出现几像素的空白间隙

1
2
3
4
5
6
==html代码==
<img src='' />
==css代码==
img{
    vertical-align:top;
}

背景色渐变

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
==html代码==
<div class="character"></div>
==css代码==
(1)、线性渐变
div.character{
    width:200px;
    height:200px;
    background:-webkit-linear-gradient(-45deg,red 50%,green 50%);
}
-webkit-linear-gradient(开始角度,颜色 百分比,颜色百分比)
(2)、重复线性渐变
div.character{
    width:40px;
    height:400px;
    background:-webkit-repeating-linear-gradient(-45deg,red 0,red 10%,green 			10%,green 20%);
}
(3)、径向渐变
div.character{
    width:400px;
    height:400px;
    background:-webkit-radial-gradient(red,green,yellow,blue,orange,pink);
}
标题中的背景色用到的比较多

背景图大小

1
2
3
4
5
6
7
8
9
10
==html代码==
<div class="character"></div>
==css代码==
div.character{
    width:200px;
    height:200px;
    background:url() no-repeat;
    background-size:contain/cover;
    cover以宽高的最大值为准，contain以宽高的最小值为准
}

滤镜效果

1
2
3
4
5
6
7
8
9
10
11
12
==html代码==
<img src="../img/2.jpg"  alt="" />
==css代码==
img{
    width:200px;
    height:400px;
    -webkit-filter:blur(10px); transition:.4s all ease; 
}
img:hover{
    -webkit-filter:blur(0px);
}
滤镜用于调整图像、背景、边框的效果还是非常不错的

蒙版效果

1
2
3
4
5
6
7
8
9
==html代码==
<img src="../img/2.jpg"  alt="" />
==css代码==
img{
    width:500px;
    height:500px;
    -webkit-mask:url(../img/1.png) no-repeat;
}
-webkit-mask中的图片是你在原图遮上去罩的

文字描边

1
2
3
4
5
6
7
8
9
10
11
12
==html代码==
<div class="character">文字描边</div>
==css代码==
div.character{
    font-size:30px;
    color:#fff;
    -webkit-text-stroke:1px yellow;
    -moz-text-stroke:1px yellow;
    -ms-text-stroke:1px yellow;
    -o-text-stroke:1px yellow;
    text-stroke:1px yellow;的最小值为准
}

盒子阴影

1
2
3
4
5
6
7
8
9
==html代码==
<div class="character"></div>
==css代码==
div.character{
    width:200px;
    height:200px;
    background:#ccc;
    box-shadow:0 10px 20px #000;值为准
}

文字阴影

1
2
3
4
5
6
7
8
==html代码==
<div class="character">文字阴影</div>
==css代码==
div.character{
    font-size:50px;
    text-shadow:2px 2px 10px #000;
    color:#fff;准
}

旋转中心控制点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
==html代码==
<div class="character"></div>
==css代码==
div.character{
    width:100px;
    height:100px;
    background:red;
    transition:1s all ease;
    transform-origin:left top;
}
div.character:hover{
    transform:rotate(45deg)
}
transform-origin的值可以用英文，具体的px值或 %表示

本文标题:常用CSS技巧总结

文章作者:北京大医同盟-技术部

发布时间:2016年01月10日 - 11时21分

最后更新:2017年12月11日 - 10时56分

原始链接:http://blog.cnlod.com/2016/01/10/css-skills/

许可协议: "署名-非商用-相同方式共享 3.0" 转载请保留原文链接及作者。

文章目录
  1. 1. 重置css样式
  2. 2. 给input的placeholder设置颜色
  3. 3. CSS强制文字换行或不换行，是否显示省略号
  4. 4. 清除浮动
  5. 5. 让元素水平垂直居中
  6. 6. 用图片代替文字
  7. 7. 清除图片下方出现几像素的空白间隙
  8. 8. 背景色渐变
  9. 9. 背景图大小
  10. 10. 滤镜效果
  11. 11. 蒙版效果
  12. 12. 文字描边
  13. 13. 盒子阴影
  14. 14. 文字阴影
  15. 15. 旋转中心控制点