TA貢獻(xiàn)1890條經(jīng)驗(yàn) 獲得超9個(gè)贊
/* S 這里是容器的樣式 - 不需要理會 */
.dash-line {
width: 100%;
height: 50px;
}
/* E 這里是容器的樣式 - 不需要理會 */
/* S 這里是波浪線的樣式 - 重點(diǎn) */
.dash-line {
background: linear-gradient(30deg, transparent 0, transparent 5px, blue 5px, blue 25px, transparent 25px, transparent 30px, red 30px, red 50px, transparent 50px, transparent 55px) repeat-x;
background-size: 100px 3px;
}
/* E 這里是波浪線的樣式 - 重點(diǎn) */
<div class="dash-line"></div>
TA貢獻(xiàn)1831條經(jīng)驗(yàn) 獲得超10個(gè)贊
可以使用 linear-gradient 完成。
<div class="dash-line"></div>
<style>
? .dash-line {
? ? width: 500px;
? ? height: 100px;
? ? background: linear-gradient(30deg, transparent 0, transparent 5px, blue 5px, blue 25px, transparent 25px, transparent 30px, red 30px, red 50px, transparent 50px, transparent 55px) repeat-x;
? ? background-size: 100px 3px;
? ? background-color: #eee;
? ? background-position: bottom;
? }
</style>
舉報(bào)