4

CSS Tricksによると、次のCSS構文は左境界線のグラデーションになります。

.left-to-right {
border-width:3px 0 3px 3px;
-webkit-border-image: 
    -webkit-gradient(linear, 100% 0, 0 0, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
-webkit-border-image: 
    -webkit-linear-gradient(right, black, rgba(0, 0, 0, 0)) 1 100%;
-o-border-image:
         -o-linear-gradient(right, black, rgba(0, 0, 0, 0)) 1 100%;
-moz-border-image:
       -moz-linear-gradient(right, black, rgba(0, 0, 0, 0)) 1 100%;   
}

要素の下部にある境界線のグラデーションを取得しようとしています。

これを変えてみました

    border-width:3px 0 3px 3px;

これに

border-width:0 0 3px 0;

これ

border-width:0 3px 3px 3px;

そしてそれは機能しません、誰かがその下の境界線を機能させるのを手伝ってくれるでしょうか？

これを行うには、WebKitブラウザーが必要になる場合があります。

これは、作業するためのフィドルです。http://jsfiddle.net/HsTcf/

ありがとう。

4

2 に答える 2

10 
border-width: 0 0 3px 0;

正しい。

ただし、次の変更を行う必要がありました。

... -gradient(right, ...

に変更する必要がありました

... -gradient(top, ...

と1 100%;に100% 1;。

デモ：jsfiddle.net/HsTcf/3

于 2012-10-14T05:38:21.070 に答える
1

下の境界線で機能する別の方法を次に示します。これは、サイトの例からの完全なクラス宣言です。

#header_bg {
    position: fixed;
    top: 0px;
    width: 100%;
    height: 121px;
    top: 0px;
    background-color: #fff;
    box-shadow: 0 0 7px rgba(0, 0, 0, 0.1) !important;
    z-index: 10;
}
<div id="header_bg"></div>

上記では、固定ヘッダーを作成しようとしていると想定しています。もちろん、最も重要な部分はbox-shadowプロパティです。これは、ほとんどの最新のブラウザでも機能します。

于 2014-10-26T22:04:39.380 に答える