关于css3:CSS线性渐变的使用

41次阅读

共计 992 个字符，预计需要花费 3 分钟才能阅读完成。

<style type="text/css">
.horizontal-stripes{
    width: 200px;
    height: 200px;
    margin-bottom: 20px;
    color: #fff;
    /* 原理：#f60 占 50%，从 0%~50% 都是纯 #f60；渐变色从 #f60(起始色) 50% 处开始适度到 #333(完结色) 50% 处，起点也是 50%，因而相当于没有适度；起始色与完结色还剩下 50%，这剩下的 50% 区域按完结色平均分配 */
    background-image: linear-gradient(#f60 50%, #333 50%);
    background-size: 100% 20px;
}
    
.veritcal-stripes{
    width: 200px;
    height: 200px;
    margin-bottom: 20px;
    color: #fff;
    background-image: linear-gradient(to right, #f60 50%, #333 50%);
    background-size: 20px 100%;
}
</style>

<body>
    <div class="horizontal-stripes"> 横向条纹 </div>
    <div class="veritcal-stripes"> 垂直条纹 </div>
</body>

其实这个边框并不完满，将高度调高后会变成下图这样，有晓得解决的高手请指导下：

<style>
    .box{
        position: relative;
        width: 50%;
        height: 150px;
        margin: 50px auto;
        background-color: #eee;
    }
    .box::after{
        position: absolute;
        bottom: 0;
        left: 0;
        content: ' ';
        width: 100%;
        height: 4px;
        background-image: repeating-linear-gradient(-45deg, 
                                                    #ff6c6c 0, #ff6c6c 20%, 
                                                    transparent 20%, transparent 25%, 
                                                    #1989fa 25%, #1989fa 45%, 
                                                    transparent 45%,transparent 50%);
        background-size: 140px;
    }
</style>

<body>
    <div class="box"></div>
</body>

正文完