クリエイター：コーディング備忘録ブログ

RSS

コーディング

グラデーションのあるボーダー作成

2017.02.02

・ボーダーにはグラデーションがかけられないので、:before , :after を使う

→heightを決めて、バックグラウンドにグラデーションをかけて疑似的にボーダーのグラデーションに見せる

.example:before{
    content:"";
    display:block;
    height:1px;
    width:100%;
    background: -webkit-gradient(linear, left top, right bottom, from(#f00), to(#00f));
    background: -moz-linear-gradient(left, #f00, #00f);
    background: linear-gradient(left, #f00, #00f);
}

1

2

3

4

5

6

7

8

9

.example:before{

content:"";

display:block;

height:1px;

width:100%;

background: -webkit-gradient(linear, left top, right bottom, from(#f00), to(#00f));

background: -moz-linear-gradient(left, #f00, #00f);

background: linear-gradient(left, #f00, #00f);

}

【CSS3】border要素にグラデーションを施す方法

この記事を見た人は次の記事も見ています。

dropdown-menu

前の記事

counter-increment

次の記事

コメント

0 コメント
0 トラックバック

この記事へのコメントはありません。

最近の投稿

アーカイブ

RELATED

コーディング

並んだ要素の最後のスタイルを適用しない

2017.05.11

コーディング

flex-directionを指定した時のIE11で表示くずれ

2018.11.16

コーディング

文字を縦書きにする

2017.09.08

コーディング

タクソノミーページで一番下の子孫要素を取得する方法

2018.11.30

コーディング

URLを正規化　WordPress

2018.07.31

コーディング

@mixin

2018.10.25