問題描述

前端小白，實在不知道怎么描述這個效果，只知道后面那條線可以用gradient去實現看看，求大神指點！謝謝!

問題解答

不用樓上這么復雜

HTML:

<p>電影</p>

CSS:

p{ font-size: 30px;}p::before,p::after{ content: ''; margin: 0 10px; height: 20px; display: inline-block; vertical-align: -0.2ex; border-left: 1px solid red;}p::after{ width: 150px; background: linear-gradient(to right,red,transparent) bottom/100% 1px no-repeat;}

這里主要是 background 的屬性的問題，這里用到的格式如下：

background: background-image background-position/background-size background-repeat;回答2：

文字前后的修飾 分別使用偽元素實現通過設置偽元素的border屬性

<style type='text/css'>*{ margin: 0; padding: 0; border: 0; }p{ display: inline-block; width: 75px; height: 50px; font-size: 30px; line-height: 50px; color: #000; }p:before{content:’|’;font-size:15px;color:red;}#span1{ display: inline-block; width: 1px; height: 15px; background: red; }#span2{ display: inline-block; width: 150px; height: 1px; border-left: 1px solid red; background: -moz-linear-gradient(left, red, #fff); background: -webkit-linear-gradient(left, red, #fff); background: -o-linear-gradient(left, red, #fff); }</style>

<p>電影</p><span id='span1'></span><span id='span2'></span>

gradient不能給border的顏色漸變，所以就分兩個span來寫，基本實現了，具體樣式值，就自己改吧。還有gradient的兼容性，inline-block間像素的去除方法，再仔細的百度吧。