1

DIV オブジェクトの境界線に水平方向の左から右へのグラデーション フェードがある効果を作成しようとしています。グラデーションのパースペクティブは、(上下だけでなく) すべての境界線を包含する必要があります。

これまでに出くわしたすべてのドキュメントは、垂直方向に行う方法を説明しています

ありがとう

4

3 に答える 3

3

他のすべての回答は、CSS ジェネレーターを示しています。

Colorzillaはベンダー プレフィックスの適用に優れていますが、その中核となる CSS は非常にシンプルです。ただし、このシナリオではボーダーの代わりに疑似要素を使用することで、ブラウザー間の互換性を向上させることができると私は信じています。これは私がそれを行う方法です：

簡単な div から始めます。

<div class="top-gradient-border">
    Lorem ipsum
</div>

基本的な CSS:

.top-gradient-border {
    width: 200px;
    height: 30px;
    /*other irrelevant styling in here*/
}

グラデーション ボーダーを追加します (この例では、 a に対してそれを行う方法を示しborder-top、他の辺の疑似要素を変更します)。

.top-gradient-border::before {
    content: "";
    background-image: linear-gradient(to right, white, black);
    height: 1px; /*for horizontal border; width for vertical*/
    display: block;
}

CSS グラデーションの詳細については、CSS-Tricksを参照してください。

于 2014-08-12T19:28:15.793 に答える
1

Colorzilla では、CSS を使用してグラデーションを生成できます。グラフィック ファイルは必要ありません。また、多くのブラウザーで確実に動作します。

http://www.colorzilla.com/gradient-editor/

于 2012-04-16T17:25:02.557 に答える
-1

フォトショップ

しかし、これをチェックしてください。それはあなたのためにトリックを行うかもしれません（およびそのGUI）

コロジラ

于 2012-04-16T17:23:23.977 に答える