Css基础教程(二十二)

实现变色边框
Css边框综合案例
实例源码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>实现变色边框效果</h1>
<hr>
<br>
<div class="card">
    <div class="container">
        北国风光，千里冰封，万里雪飘。
        望长城内外，惟余莽莽；大河上下，顿失滔滔。
        山舞银蛇，原驰蜡象，欲与天公试比高。
        须晴日，看红装素裹，分外妖娆。
        江山如此多娇，引无数英雄竞折腰。
        惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。
        一代天骄，成吉思汗，只识弯弓射大雕。
        俱往矣，数风流人物，还看今朝。
    </div>
</div>

<style>
    h1 {
        text-align: center;
    }
    .card {
        margin: 0px auto;
        width: 300px;
        background: repeating-linear-gradient(
                -45deg,
                #eb542d,
                #eb542d 10px,
                #fff 10px,
                #fff 20px,
                #75adf8 20px,
                #75adf8 30px,
                #fff 30px,
                #fff 40px
        ) -20px -20px /200% 200%;
        padding: 5px;
        transition: 0.8s;
    }

    .container {
        padding: 10px;
        background: #FFF;
        cursor: pointer;
    }

    .card:hover {
        box-shadow: 0px 0px 20px rgba(0,0,0,0.5);
        transition: 0.5s;
        background-position: 0 0;
    }
</style>
</body>
</html>
运行效果：