2

cssで流れるような画像のような境界線を作成することは可能ですか？ヒントはありがたいです

http://i.stack.imgur.com/rGwQ6.png

ここに画像の説明を入力してください

#sidebar h4, #sidebar-alt h4 {
    background:url('images/widget-title-bg.png'); 
    color: #333333;
    font-size: 22px;
    font-family: Arial, sans-serif;
    font-weight: normal; 
    margin: 0 0 10px 0; 
    padding: 7px 0px 11px 0px; 
    }
4

5 に答える 5

2

編集：あなたのコメントに従っていくつかの変更を加えました。試す：

<h1 id="progress">
    <i></i>Recent Posts
</h1>​
#progress {
    display: block;
    max-width: 200px;
    min-width: 150px;
    position: relative;
    margin: 50px auto 0;
    padding: 0 3px;
    border-bottom: 10px solid #ECECEC;
    font: bold 26px 'Dancing Script', cursive;
}
#progress i {
    display: block;
    position: absolute;
    width: .8em;
    height: 10px;
    left: 0;
    bottom: -10px;
    background-color: #4287F4;
}​

http://jsfiddle.net/userdude/z45QJ/4/

私はposition操作の大ファンではありませんが、すべてのブラウザがこれをほぼ同じようにサポートおよび表示する必要があります。フォントの表示がブラウザによってわずかに異なる可能性があるという唯一の問題が考えられます。ただし、IE7-9は他のすべてをうまく解釈する必要があります。

残念ながら、wuuurld全体がWebKitにありません。

<div id="progress"></div>​

#progress {
    width: 300px;
    height: 10px;
    border: none;
    background-color: #ECECEC;
    border-left: solid #4287F4;
    box-shadow:inset 2px 0 white;
    -webkit-animation: slide 10s linear infinite;
}
@-webkit-keyframes slide {
    from {
        border-left-width: 0;
        width: 300px;
    } to {
        border-left-width: 300px;
        width: 0;
    }
}​

http://jsfiddle.net/userdude/z45QJ/1

双方向に調整することができます。ただし、WebKitブラウザー（Chrome、Safari [？]）でのみ機能します。よろしければ、お知らせください。帰りの旅を追加します。

于 2012-12-31T07:04:29.550 に答える
1

それを行うには4つの方法があります。このJSFiddleで4つの方法を示します。ここに、いくつかの説明があります。

よくわからない場合は、方法Bを使用してください。

方法A

方法Aには、最も互換性があるという利点がありますが、追加のHTMLが必要になるという欠点があります。基本的に、外側のdivに青い境界線を与え、内側のdivに白い境界線を与えます。HTMLは次のようになります。

<div class="methodA">
    <div class="container">
        Method A
    </div>
</div>

CSSは次のようになります。

.methodA {
    border-left: 10px solid blue;
}
.methodA .container {
    height: 100%;
    border-left: 10px solid white;
}

方法B

方法Bには、余分なHTMLがないという利点がありますが、欠点は、バージョン9より前のIEでは機能しないことです。

.methodB {
    border-left: 10px solid blue;
    -webkit-box-shadow: inset 10px 0 white;
    -moz-box-shadow: inset 10px 0 white;
    box-shadow: inset 10px 0 white;
}

CSS3 PIEを使用すると、IEの互換性の問題を軽減できます。これにより、Internet Explorerでボックスシャドウが（他のCSS3機能とともに）動作します。

メソッドCおよびD

このJSFiddleは、他の2つの方法を示していますが、これについてはあまり詳しく説明しませんが...

  • 方法Cは、青い境界線を影にします。その結果、他の要素を「カバー」でき、要素のサイズも変更されます。私はこの解決策が好きではありませんが、それはあなたのために働くかもしれません。また、方法Bの互換性の問題もあります。
  • 方法Dは、要素の内側に2つのdivを配置します。1つは青い境界線用で、もう1つは右の境界線用です。
于 2012-12-31T07:05:52.077 に答える
1

それほど複雑ではなく、追加の HTML は必要ありません。

h4:after {
    display:block;
    content: '';
    height:4px;
    width: 1px;
    border:0px solid #ececec;
    border-left-width: 10px;
    border-left-color:#4287F4;
    border-right-width: 90px;
}​

http://jsfiddle.net/N27CH/

于 2012-12-31T08:04:08.410 に答える
0

HTML5 での「canvas」タグの使い方を調べてみました。これは、グラデーション仕様について非常に有益であり、従来の HTML4 よりも読みやすくなっています。ですから、この質問についても、質問者に HTML5 の「canvas」タグを見てもらいたいと思います。以下のリンクを確認してください。

    Link: http://html5center.sourceforge.net/Using-Unprefixed-CSS3-Gradients-in-Modern-Browsers

    Link: http://www.sendesignz.com/index.php/web-development/111-how-to-create-gradient-and-shadow-effect-in-html5-canvas

2番目のリンクはもっと素晴らしいです。乾杯。：）

于 2013-01-04T12:14:05.333 に答える
0

このリンクを確認してください (http://jsfiddle.net/qD4zd/1/) にアクセスしてください。それが役立つかどうかを確認してください。これは、グラデーションの適用について説明します。それがどのように行われるかを見てください。また、ボーダーとして必要な画像を直接使用してみませんか。Cssの「グラデーション」をチェックしてください。これはあなたの質問に答えるかもしれません。

于 2012-12-31T08:22:54.300 に答える