見出しの装飾として要素の左側だけ太めのボーダーをつけて、かつグラデーションをかけたかったのですが、border属性には直接グラデーションをかけられなかったので調べました。
結論としては、
以下のHTMLで言うと、h1要素の背景にグラデーションをかけ、span要素の背景は白に設定。
その状態でh1要素の左側にpadding(5pxくらい)を設定すれば、paddingの分だけh1の背景が見えることになる。
見えている部分がh1要素になるので背景にはグラデーションがかかっていることになる。
これがボーダーのように見える。
<h1 class="heading">
<span>見出し①</span>
</h1>
詳細は以下のページ参照。