4

CSSだけを使用して、中央から外側ではなく、右から左にグラデーションを使用して境界線の下部を作成できるかどうかを知りたいと思います。

答えを探していたところ、JSFiddleリンクが見つかりました。これは、上から下に透明な境界線のグラデーションを付けることができることを示しています。

方法1 /*背景のグラデーションのみを使用*/

.one { 
    width: 400px;
    padding: 20px 25px;
    border-top: 5px solid #000;
    margin: 40px auto;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));
    background-image: -webkit-linear-gradient(#000, transparent);
    background-image:
        -moz-linear-gradient(#000, transparent),
        -moz-linear-gradient(#000, transparent)
    ;
    background-image:
        -o-linear-gradient(#000, transparent),
        -o-linear-gradient(#000, transparent)
    ;
    background-image: 
        linear-gradient(#000, transparent),
        linear-gradient(#000, transparent)
    ;
    -moz-background-size:5px 100%;
    background-size:5px 100%;
    background-position:0 0, 100% 0;
    background-repeat:no-repeat;
}

方法2 /*疑似要素と背景グラデーションを使用する*/

.two {
    position: relative;
    width: 400px;
    padding: 20px;
    border: 5px solid transparent;
    border-top-color: #000;
    margin: 40px auto;
}

.two:before,
.two:after {
    content: "";
    position: absolute;
    top: -5px;
    bottom: -5px;
    left: -5px;
    width: 5px;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));
    background-image: -webkit-linear-gradient(#000, transparent);
    background-image: -moz-linear-gradient(#000, transparent);
    background-image: -o-linear-gradient(#000, transparent);
    background-image: linear-gradient(#000, transparent);
}

.two:after {
    left: auto;
    right: -5px;
}

上記のCSSがどのようにページに方向を知らせているのか理解できません。これはほんの少しの単純で見過ごされている編集であると思いますが、現時点では見つけることができないようです。したがって、この質問をします。助けを求めるために。

境界線が破線または点線の場合にこれが機能するかどうかも知りたいですか？

事前のヘルプやアドバイスをありがとうございます。

よろしく、ティム

4

2 に答える 2

6

注-CSSを編集して、境界線の幅だけでなく、要素の幅全体にグラデーションが広がるようにしました。

これは私が思いついたものであり、多かれ少なかれh3nが提案しているものであり、より多くのベンダー固有のプロパティが入力されています。

border-right: 5px solid #000; /* Don't forget to modify to the right border. */
background-image: 
    -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));
background-image: 
    -webkit-linear-gradient(180deg, #000, transparent),
    -webkit-linear-gradient(180deg, #000, transparent)
;
background-image: 
    -moz-linear-gradient(180deg, #000, transparent),
    -moz-linear-gradient(180deg, #000, transparent)
;
background-image:
    -o-linear-gradient(180deg, #000, transparent),
    -o-linear-gradient(180deg, #000, transparent)
;
background-image: 
    linear-gradient(90deg, #000, transparent),
    linear-gradient(90deg, #000, transparent)
;
-moz-background-size: 100% 5px; /* This get flipped. */
background-size: 100% 5px; /* This get flipped. */
background-position: 0 0, 0 100%; /* The last argument gets flipped. */
background-repeat: no-repeat;

http://jsfiddle.net/vqnk9/1548/

MDNには、このクロスブラウザの処理方法に関する合理的なチュートリアルもあります。

ここでよく見ると、ベンダー以外の人がの代わりにをbackground-image使用していることに気付くかもしれません。私の当初の考えは、もちろんそれは私にはどういうわけか理にかなっています（？）が、なぜそれらが異なるのかについては、ここにW3仕様があります（この違いの背後にある理由については最後の引用を参照してください）：90deg180deg-90deg

4.1.1。linear-gradient（）構文

線形グラデーションの構文は次のとおりです。

<linear-gradient> = linear-gradient(
    [ [ <angle> | to <side-or-corner> ] ,]? 
    <color-stop>[, <color-stop>]+
)

<side-or-corner> = [left | right] || [top | bottom]

関数の最初の引数はグラデーションラインを指定します。グラデーションラインはグラデーションに方向を与え、カラーストップの配置方法を決定します。省略できます。その場合、デフォルトで「下へ」になります。

グラデーションラインの方向は、次の2つの方法で指定できます。

角度を使用する

この議論の目的のために、「0度」は上向きであり、正の角度は時計回りの回転を表すので、「90度」は右向きを指します。

キーワードを使用する

引数が「上へ」、「右へ」、「下へ」、または「左へ」の場合、グラデーションの角度はそれぞれ「0度」、「90度」、「180度」、または「270度」になります。 。

代わりに、引数が「左上へ」などのボックスのコーナーを指定する場合、グラデーションラインは、指定されたコーナーと同じ象限を指し、隣接する2つのコーナーと交差するラインに垂直になるように角度を付ける必要があります。グラデーションボックス。これにより、50％でのカラーストップが2つの隣接するコーナーと交差します（例を参照）。

グラデーションボックスの中心から開始して、指定された角度で両方向に線を延長します。終点は、グラデーションラインに垂直に引かれた線が指定された方向でグラデーションボックスのコーナーと交差するグラデーションライン上のポイントです。開始点は同じように決定されますが、反対方向に決定されます。

そして、MDNから、学位が異なる理由に関するいくつかの管理者（Appleのせいですか？）：

最後の意味論的好奇心は、接頭辞付きのバリアントと接頭辞なしの提案の間にまだ存在します。最初のAppleの提案に続いて、構文の接頭辞付きの変形はすべて、<angle>極角のように定義されたものを使用します。つまり0deg、東を表します。0deg CSSの他の部分と一貫性を保つために、仕様では北を表す角度を定義しています。プロパティのプレフィックスバージョンを使用しているサイトが突然破損するのを防ぐために、他の点では上位互換性のある最終構文に適応する場合でも、元の角度定義を保持します(0deg = East)。プロパティのプレフィックスを解除すると、正しい仕様に切り替わります。また、互換性がないため、Geckoは、接頭辞付きのtoキーワードを含む構文と含まない構文の両方をサポートします。ここでも、接頭辞を外すと、キーワードのない構文は削除されます。

于 2013-03-26T01:01:11.110 に答える
0

少なくともwebkitの場合、これは角度を右から左に設定します。-webkit-linear-gradient（180deg、black、white）

于 2013-03-26T00:44:24.450 に答える