3.纯 CSS 创作一个容器厚条纹边框特效

原文地址：3.纯 CSS 创作一个容器厚条纹边框特效

没有啥好点子呀，不爽

HTML代码：

<div class="box">

        <div class="content">

              <h2>What is Lorem Ipsum?</h2>

              <p>Mauris volutpat risus quis nisi tempus hendrerit. Nullam nisi urna, suscipit quis risus sed, congue congue quam. Morbi sit amet suscipit ex. Vivamus vel nulla ac libero volutpat ultrices.    </p>

       </div>

</div>

css代码：

/* 内容居中显示： */

html,body,

.box .content {

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

}

/* 画条纹背景： */

.box {

    width: 300px;

    height: 300px;

    /* linear-gradient的解说： http://www.runoob.com/cssref/func-linear-gradient.html */

    background: linear-gradient(

        -45deg,

        white 0%,

        white 25%,

        hotpink 25%,

        hotpink 50%,

        white 50%,

        white 75%,

        hotpink 75%,

        hotpink 100%

    );

    background-size: 10%;

    box-sizing: border-box;

    padding: 15px;

    animation: animate 2s linear infinite;

}

.box .content {

    background-color: white;

    flex-direction: column;

    box-sizing: border-box;

    padding: 30px;

    text-align: center;

    font-family: sans-serif;

}

.box,

.box .content {

    box-shadow: 0 0 2px deeppink,

                0 0 5px rgba(0, 0, 0, 1),

                inset 0 0 5px rgba(0, 0, 0, 1);

    border-radius: 10px;

}

.box .content h2 {

    color: deeppink;

}

.box .content p {

    color: dimgray;

}

@keyframes animate {

    from {

        background-position:;

    }

    to {

        background-position: 10%;

    }

}

3.纯 CSS 创作一个容器厚条纹边框特效的相关教程结束。