CSS技巧

发表于 | 分类于

技巧性的东西就是能让我们灵巧运用

优化显示文本

有时字体并不能在所有设备上都达到最佳的显示

1
2
3
4
5
html {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

页面顶部阴影

给网页顶部添加阴影，使页面顶部与浏览器之间显得有层次感

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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;
}

黑白图像

每当遇到重要事故，需要改变彩色图片成黑白照

1
2
3
4
5
6
7
img.desaturate {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}

文字两端对齐

在写表单的时候总会有不同的文本栏目，比如姓名、手机号码

1
2
3
4
5
6
7
8
9
10
<label>姓名</label>
<label>手机号码</label>
<label>验证码</label>
label {
    margin:10px 0; 
    width:100px;
    border:1px solid red;
    text-align-last: justify;
}

文字竖直排列

有时需要将文字竖直排列时

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class="verticle-mode">
    <h4>咏柳</h4>
    <p>碧玉妆成一树高，<br>万条垂下绿丝绦。<br>不知细叶谁裁出，<br>二月春风似剪刀。</p>
</div>
.verticle-mode {
    writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;      
    writing-mode: vertical-rl;
}
/* IE7比较弱，需要做点额外的动作 */
.verticle-mode {
    *width: 120px;
}
.verticle-mode h4,
.verticle-mode p {
    *display: inline;
    *writing-mode: tb-rl;
}
.verticle-mode h4 {
    *float:right;
}

去掉chrome下input自动补全的黄色背景

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//方法一
input:-webkit-autofill {
    -webkit-box-show:0 0 0px 1000px rgba(255,255,255,.5) inset !important;
}
//方法二
input:-webkit-autofill {
    -webkit-animation-name:autofill;
    -webkit-animation-fill-mode:both;
}
@-webkit-keyframes autofill{
    to{
        color:#FFF;
        background:transparent;
    }
}

使用 :not()

先给每一个菜单项添加边框

1
2
3
.nav li {
    border-right: 1px solid #666;
}

然后再移除最后一个元素

1
2
3
.nav li:last-child {
    border-right: none;
}

可以直接使用 :not() 伪类来应用元素

1
2
3
.nav li:not(:last-child) {
    border-right: 1px solid #666;
}

当然，如果你的新元素有兄弟元素的话，也可以使用通用的兄弟选择符（~）

1
2
3
.nav li:first-child ~ li {
    border-left: 1px solid #666;
}

模糊文本

简单但实用的文本模糊效果

1
2
3
4
.blur {
    color: transparent;
    text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

CSS三角形

上

1
2
3
4
5
6
7
8
9
div.arrow-up {
    width:0px;
    height:0px;
    border-left:5px solid transparent;
    border-right:5px solid transparent;
    border-bottom:5px solid #2f2f2f;
    font-size:0px;
    line-height:0px;
}

下

1
2
3
4
5
6
7
8
9
div.arrow-down {
    width:0px;
    height:0px;
    border-left:5px solid transparent;
    border-right:5px solid transparent;
    border-top:5px solid #2f2f2f;
    font-size:0px;
    line-height:0px;
}

左

1
2
3
4
5
6
7
8
9
div.arrow-left {
    width:0px;
    height:0px;
    border-bottom:5px solid transparent;
    border-top:5px solid transparent;
    border-right:5px solid #2f2f2f; 
    font-size:0px;
    line-height:0px;
}

右

1
2
3
4
5
6
7
8
9
div.arrow-right {
    width:0px;
    height:0px;
    border-bottom:5px solid transparent;
    border-top:5px solid transparent;
    border-left:5px solid #2f2f2f; 
    font-size:0px;
    line-height:0px;
}

CSS3 calc()

1
2
3
4
5
6
7
8
9
.simpleBlock {
    width: calc(100% - 100px);
}
.complexBlock {
    width: calc(100% - 50% / 3);
    padding: 5px calc(3% - 2px);
    margin-left: calc(10% + 10px);
}

伪类清除浮动

1
2
3
4
5
6
7
.clear-float:after{
    content: '';
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}