深圳网站设计公司的,软件下载网站建设,上海猎头公司排行榜,cms是什么系统[css] 使用css3实现一个斑马线的效果
ferrinweb 如果需要很多或者无限扩展的斑马线#xff0c;你这个方案就有缺点了
cxwht 你的方案需要增加额外的元素#xff0c;不太理想
最好的办法是用渐变背景实现
linear-gradient( [ [ angle | [top | bottom] || [left | ri…[css] 使用css3实现一个斑马线的效果
ferrinweb 如果需要很多或者无限扩展的斑马线你这个方案就有缺点了
cxwht 你的方案需要增加额外的元素不太理想
最好的办法是用渐变背景实现
linear-gradient( [ [ angle | [top | bottom] || [left | right] ],]? color-stop[, color-stop]);
/*角度|方向、开始颜色 开始位置、结束颜色 结束位置*/
我们将开始位置与结束位置设置为相等或大于就可以得到条纹图案。示例https://codepen.io/xiangshuo1992/pen/qLdWdY 含11个demo水平条纹
{background: linear-gradient(#fb3 33.3%,#58a 0, #58a 66.6%, yellowgreen 0);background-size: 100% 45px;
}
垂直条纹
{background: linear-gradient(to right, /* 或 90deg */#fb3 50%, #58a 0);background-size: 30px 100%;
}
45deg斜条纹
{background: linear-gradient(45deg,#fb3 25%, #58a 0, #58a 50%,#fb3 0, #fb3 75%, #58a 0);background-size: 30px 30px;
}/*计算准确的15px宽斜条纹*/
{background: linear-gradient(45deg,#fb3 25%, #58a 0, #58a 50%,#fb3 0, #fb3 75%, #58a 0);background-size: 42.43px 42.43px;
}
更好的斜向条纹
/*循环渐变实现斜条纹*/
{background: repeating-linear-gradient(45deg,#fb3, #fb3 15px, #58a 0, #58a 30px);
}/*两种方式结合*/
{background: repeating-linear-gradient(45deg,#fb3 0, #fb3 25%, #58a 0, #58a 50%);background-size: 42.43px 42.43px;
}
灵活的同色系条纹
{background: #58a;background-image: repeating-linear-gradient(30deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,.1) 15px,transparent 0, transparent 30px);
}个人简介
我是歌谣欢迎和大家一起交流前后端知识。放弃很容易 但坚持一定很酷。欢迎大家一起讨论
主目录
与歌谣一起通关前端面试题
