css条纹背景

吃饭了吗

已于 2022-02-22 14:28:21 修改

阅读量269

点赞数

文章标签： css css3 html

于 2022-02-22 11:15:08 首次发布

本文链接：https://blog.csdn.net/weixin_41824429/article/details/123064082

版权

1、横条纹

在这里插入图片描述

<div class="box box2"></div>
<style>
    .box2 {
        background: linear-gradient(#fb3 25%, #58a 0, #58a 50%,#fb3 0, #fb3 75%, #58a 0);
        background-size: 30px 30px;
    }

    .box {
        width: 200px;
        height: 100px;
        margin-bottom: 20px;
    }
</style>

2、斜条纹

在这里插入图片描述

<div class="box box2"></div>
<style>
    /* 使用 linear-gradient */
	.box2 {
	    background: linear-gradient(45deg,#fb3 25%, #58a 0, #58a 50%,#fb3 0, #fb3 75%, #58a 0);
	    background-size: 42px 42px;
	}
	/* 使用 repeating-linear-gradient  */
	.box2 {
	    /* background: repeating-linear-gradient(45deg,#fb3,#fb3 15px,#58a 0, #58a 30px); */
	    /* 简化语法 */
        background: repeating-linear-gradient(45deg,#fb3 0 15px,#58a 0 30px);
	}
	/* 二者结合：当为45°斜条纹的时候建议二者结合，通过重复线性渐变来简化贴片的代码  */
     .box2 {
         background: repeating-linear-gradient(45deg, #fb3 0 25%, #58a 0 50%);
         background-size: 42px 42px;
     }
    .box {
        width: 200px;
        height: 100px;
        margin-bottom: 20px;
    }
</style>

3、60°斜条纹

在这里插入图片描述

<div class="box box2"></div>
<style>
	/* 使用 repeating-linear-gradient  */
	.box2 {
        background: repeating-linear-gradient(60deg, #fb3 0 15px, #58a 0 30px);
	}
    .box {
        width: 200px;
        height: 100px;
        margin-bottom: 20px;
    }
</style>