纯css实现直线渐变

2017-02-28  本文已影响0人  闫涵达人

<html>

<div class="title">

<hr>

<span class="txt">渐变</span>

</div>

<css>

.title{  text-align:center;  white-space:nowrap; }

.title hr{  background-color:#f0eff5; border:medium none; display:inline-block; height:1.4px; margin:10px16px; vertical-align:middle; width:32%;

background-image:linear-gradient(to right,transparent,red,transparent);/*两边渐变*/ }

.title.txt{ display:inline-block; font-size:2rem; vertical-align:middle; }

上一篇下一篇

猜你喜欢

热点阅读