だいぶ以前に「border要素にグラデーションを施す方法」という記事を公開しましたが、それとほぼ同じテクニックで、「border:dashed;」や「border:dotted;」をグラデーション処理させる方法を考えてみました。
理論としては、親要素に「position:relative;」を指定して、疑似要素:beforeでボーダーを引き、さらに疑似要素:afterで背景色と同じグラデーション処理を施します。
具体的なコードは次のようになりますね。
.border-dashed { padding:0; margin:0; position:relative; } .border-dashed:before, .border-dashed:after { position:absolute; left:0; right:0; bottom:0; display:block; content:''; height:1px; } .border-dashed:before { border-bottom:1px dashed #000; } .border-dashed:after { background:-webkit-linear-gradient( left, white, rgba(255, 255, 255, 0)); background:linear-gradient( to right, white, rgba(255, 255, 255, 0)); }
HTML側では、ボーダー・グラデーションを実装したい要素に「class=”border-dashed”」を指定すればOKです。
<p class="border-dashed">この要素にボーダーを引きます。</p>
下記URLにサンプルを用意しました。
SAMPLE : https://on-ze.com/demo/css3-border-dashed-gradient/
ぜひお試しください!