html+css渐变（条纹/方格）_css条纹渐变-优快云博客

本文介绍了如何使用CSS的linear-gradient和radial-gradient创建条纹和方格效果，通过透明色和角度控制视觉样式。示例代码包括线性渐变和径向渐变的使用，展示不同角度和颜色组合的实现效果。

代码来自收集

linear-gradient 线性渐变
radial-gradient 径向渐变
transparent 透明色
deg 角度从下0度左下角45度左90度（依次类推）

例子：
html

        <div class="horizontal stripes"></div>
        <div class="vertical stripes"></div>
        <div class="picnic stripes"></div>
        <div class="angled stripes"></div>
        <div class="angled-135 stripes"></div>
        <div class="checkered stripes"></div>

css

.stripes {
    height: 250px;
    width: 375px;
    float: left;
    margin: 10px;
    background-size: 50px 50px;/* 控制条纹的大小 */
    box-shadow: 1px 1px 8px gray;
}
.horizontal {
    background-color: #0ae;							/*rgba颜色 50%范围*/
    background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
}
.vertical {
    background-color: #f90;
    background-image: linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
}
.picnic {
    background-color: white;
    background-image: linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)), linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
}
.angled {
    background-color: #ac0;
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
}
.angled-135 {
    background-color: #c16;
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
}
.checkered {
    background-image: linear-gradient(45deg, #555 25%, transparent 25%, transparent), linear-gradient(-45deg, #555 25%, transparent 25%, transparent), linear-gradient(45deg, transparent 75%, #555 75%), linear-gradient(-45deg, transparent 75%, #555 75%);
}

效果：在这里插入图片描述
例2：
html

<div class="test1"></div>
<div class="test2"></div>
<div class="test3"></div>

css

    div {
            width: 200px;
            height: 200px;
            display: inline-block;
        }

        .test1,
        .test2 {
            background-image: linear-gradient(45deg, #0ae 25%, transparent 25%), linear-gradient(-45deg, #ac0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, blue 75%), linear-gradient(-45deg, transparent 75%,gray 75%);
        }

        .test2 {
            background-size: 20% 20%;
        }
          .test3 {
            background-size: 100px 100px;
            background-position: 0 0, 50px 50px;
            background-image: linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%, #000),
                linear-gradient(45deg, #000 26%, transparent 26%, transparent 74%, #000 74%, #000);
        }