css-渐变色 横线竖线

渐变横线 竖线

html

<template> <div class="login"> <div class="boxs"> <div class="boxx"></div> <div class="child"> <div class="left"></div> <div class="right"></div> </div> <div class="box"></div> <div class="child"> <div class="left"></div> <div class="right"></div> </div> <div class="box"></div> <div class="child"> <div class="left"></div> <div class="right"></div> </div> </div> </div> </template>

css

.boxs { width: 600px; height: 300px; border: 1px solid #ccc; } .child { width: 50px; height: 100px; } /* 竖线 */ .box { width: 100%; height: 1px; background: -webkit-linear-gradient(left, rgb(94, 38, 38) -4%, #195B9C 50%, rgb(46, 214, 136) 100%); } /* 横线 */ .boxx { position: absolute; left: 300px; width: 1px; height: 296px; background: linear-gradient( 244deg, rgba(25, 91, 156, 0.00) 0%, #195B9C 48%, rgba(25, 91, 156, 0.04) 100% ); }

效果如图：