css3实战

前言

工作中我们经常会碰到一些看似简单的UI设计效果，但是敲完代码回看的时候总感觉写的太冗余的情况；不想多写dom,又不想切图，下面的几种效果巧用css3帮你"偷懒"。

1. text-shadow实现3D立体文字

<style>
.text {
    font-size: 30px;
    text-shadow: 0 1px 0 #ccc,
                 0 2px 0 #c9c9c9, 
                 0 3px 0 #bbb,
                 0 4px 0 #b9b9b9,
                 0 5px 0 #aaa,
                 0 6px 1px rgba(0, 0, 0, 0.1),
                 0 0 5px rgba(0, 0, 0, 0.1),
                 0 1px 3px rgba(0, 0, 0, 0.3),
                 0 3px 5px rgba(0, 0, 0, 0.2),
                 0 5px 10px rgba(0, 0, 0, 0.25),
                 0 10px 10px rgba(0, 0, 0, 0.2),
                 0 20px 20px rgba(0, 0, 0, 0.15);
    }
</style>
 <div class="text">这是3D文字</div>

2. 伪类+box-reflect

<style>
    .box3 {
        position: relative;
        width: 200px;
        height: 100px;
        background-color: #192b44;
    }
    .box3::after {
        content: "";
        display: block;
        position: absolute;
        right: 5px;
        top: 5px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #0d87c9;
        -webkit-box-reflect: below 70px;
    }
    .box3::before {
        content: "";
        display: block;
        position: absolute;
        left: 5px;
        top: 5px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #0d87c9;
        -webkit-box-reflect: below 70px;
    }
</style>
<div class="box3"></div>

3.外角边框

<style>
.outer-corner {
    width: 200px;
    padding: 5px;
    background: linear-gradient(to left, #ff0000, #ff0000) left top no-repeat,
                linear-gradient(to bottom, #ff0000, #ff0000) left top no-repeat,
                linear-gradient(to left, #ff0000, #ff0000) right top no-repeat,
                linear-gradient(to bottom, #ff0000, #ff0000) right top no-repeat,
                linear-gradient(to left, #ff0000, #ff0000) left bottom no-repeat,
                linear-gradient(to bottom, #ff0000, #ff0000) left bottom no-repeat,
                linear-gradient(to left, #ff0000, #ff0000) right bottom no-repeat,
                linear-gradient(to left, #ff0000, #ff0000) right bottom no-repeat;
    background-size: 3px 28px, 28px 3px, 3px 28px, 28px 3px;
}

.box {
    height: 190px;
    background-color: yellow;
    border: 1px solid blue;
}
</style>
<div class="outer-corner">
    <div class="box"></div>
</div>

4.内角边框

<style>
.box2 {
    width: 200px;
    padding: 3px;
    background-color: yellow;
    border: 1px solid blue;
}
.inner-corner {
    height: 190px;
    background: linear-gradient(to left, #ff0000, #ff0000) left top no-repeat,
                linear-gradient(to bottom, #ff0000, #ff0000) left top no-repeat,
                linear-gradient(to left, #ff0000, #ff0000) right top no-repeat,
                linear-gradient(to bottom, #ff0000, #ff0000) right top no-repeat,
                linear-gradient(to left, #ff0000, #ff0000) left bottom no-repeat,
                linear-gradient(to bottom, #ff0000, #ff0000) left bottom no-repeat,
                linear-gradient(to left, #ff0000, #ff0000) right bottom no-repeat,
                linear-gradient(to left, #ff0000, #ff0000) right bottom no-repeat;
    background-size: 3px 28px, 28px 3px, 3px 28px, 28px 3px;
}
</style>
<div class="box2">
    <div class="inner-corner"></div>
</div>