【CSS】斑马纹背景

今天记录一下——CSS斑马纹背景实现
CSS斑马纹背景实现有两种不同的实现方法(还有多的方法大家快分享给我)1、背景的 liner-gradient ;2、设置伪类 nth-of-type(even)/nth-child(even) 的背景颜色。根据条纹形状不同来使用不同方法

竖状、横状
在这里插入图片描述
这两种形状能用两种方法实现,但是根据业务不同使用方法也不同:
1、每行条纹上,需要有内容展示,如下
①表格,每行内容互不相干,内容一行展示完毕;此时使用CSS伪类方法方便简洁
②多行内容展示,如下图,此时使用background:liner-gradient来实现,同时需要注意的是background-size需要是line-height2倍

在这里插入图片描述
可以看到内容贴着斑马纹底部,不美观我们怎么解决问题呢?不告诉你,自己研究,毕竟不是科普博客,自己多思考总是好的。提示一下和背景设置有关。

2、斜条纹
在这里插入图片描述
毫无疑问,这个肯定是背景做的,难不成把div搞成斜的吗。。参考代码:

background: linear-gradient(
        45deg,
        #cc95c0 25%,
        #dbd4b4 0,
        #dbd4b4 50%,
        #cc95c0 0,
        #cc95c0 75%,
        #dbd4b4 0
  );

使用repeat-liner-gradient效果更佳

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值