[css] 使用css3實現(xiàn)一個斑馬線的效果

@ferrinweb 如果需要很多或者無限擴展的斑馬線，你這個方案就有缺點了 @cxwht 你的方案需要增加額外的元素，不太理想 最好的辦法是用漸變背景實現(xiàn) linear-gradient( [ [ <angle> | [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+); /*角度|方向、開始顏色 開始位置、結(jié)束顏色 結(jié)束位置*/ 我們將開始位置與結(jié)束位置設(shè)置為相等或大于，就可以得到條紋圖案。示例：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; }/*計算準(zhǔn)確的15px寬斜條紋*/ {background: linear-gradient(45deg,#fb3 25%, #58a 0, #58a 50%,#fb3 0, #fb3 75%, #58a 0);background-size: 42.43px 42.43px; } 更好的斜向條紋 /*循環(huán)漸變實現(xiàn)斜條紋*/ {background: repeating-linear-gradient(45deg,#fb3, #fb3 15px, #58a 0, #58a 30px); }/*兩種方式結(jié)合*/ {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); }

個人簡介

我是歌謠，歡迎和大家一起交流前后端知識。放棄很容易，
但堅持一定很酷。歡迎大家一起討論

主目錄

與歌謠一起通關(guān)前端面試題

總結(jié)

以上是生活随笔為你收集整理的[css] 使用css3实现一个斑马线的效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。