0

エッチングされた線を作成するための一般化可能なソリューションを開発したいと思います。目標は、エッチングが必要な配色ごとに密接に関連する色を手動で選択する必要がないようにすることです。この問題は、背景の色に対するくぼみ部分の色が、3 次元効果を作成するためにある程度重要であるようです。

以下は青色の例です (コメント バブルの上/数字「11」の下の行)。使用する必要があると思いますbox-shadowが、これが最善の方法かどうかはわかりません。

box-shadow を使用する必要がある場合、たとえば灰色の線が青い線でも機能するような CSS 値を設定する方法を知っている人はいますか?

ここに画像の説明を入力

4

3 に答える 3

3

基になる色を暗く/明るくする半透明の黒/白の色 (を使用) の境界線を使用できます。rgba

http://dabblet.com/gist/4182495の例

:after/を使用して疑似要素を追加する:beforeと、第 2 レベルの境界線などを追加する際に特別な力が得られます。

于 2012-12-01T14:08:19.940 に答える
1

Chrome Web 開発者ツールを使用して見つけた、そのコメント インジケーターの CSS を少し簡略化したものを次に示します。

.media-bar .count-badge {
    padding: 0 7px;
    background: #1C5380;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 1px 1px rgba(0, 0, 0, 0.2);
    border-radius: 12px;
}

ページにアクセスして count-badge 要素を調べると、box-shadow スタイルのオンとオフを切り替えることができ、インセット効果がどのように作成されるかがわかります。

于 2012-12-01T13:10:26.213 に答える
0

私は2つの境界線が一緒にあると思います:

border-bottom: 1px solid #1C5380;
border-top: 1px solid rgba(255, 255, 255, 0.12);
于 2012-12-01T13:19:28.267 に答える