CSS学習カラー：ウィンドウとカラー：currentColor_html/css

CSS学習カラー：ウィンドウとカラー：currentColor_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:17:55

オリジナル

1285 人が閲覧しました

1. 見落とされやすい属性

color: currentColor

color: window

これを読んだ後、私は目のように感じます明るいですしかし、私は color: currentColor というものがあることすら知りませんでした。好奇心を抑えられず、すぐに情報を読み、上記の属性の違いを確認しました。次に編集者が学習後の理解をお話します

1. color: currentColor

currentColor キーワードの値は color 属性値の計算値です。 currentColor キーワードが color 属性自体に適用される場合、それは color と同等になります。属性は color 属性の値です。上記のコードの color 属性定義が削除された場合、color には継承があるため、境界線の色は

親要素

の計算された色の値に依存します。要素に色が指定されていない場合、親要素は親の親から継承します。ドキュメントのルートノードの HTML タグが色を指定するまでは、ブラウザのデフォルトの色を使用します。例:

   div { border: 1px solid; color: red; }

ログイン後にコピー

ここを見て、currentColor の役割をすでに理解していると思います。currentColor の使用方法を見てみましょう。まず、その互換性を見てみましょう。IE9 以降と互換性があります。グラデーション、svg、アニメーションなどの場合、以下はグラデーションを例にします:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style type="text/css">    .mm{        color:currentColor;    }    </style></head><body>    <div class="box">        <div class="mm">sdfsdfsdf</div>    </div></body></html>

ログイン後にコピー

　<div class="box"></div>

ログイン後にコピー

効果は図に示すとおりです:

2、color: window

.box{  height:100px;  color: #3CAADB;  background-image: linear-gradient(to right, #fff, currentColor 100%);}

ログイン後にコピー

システムのデフォルト設定のテキスト Color: (none) also It is White

効果は次のとおりです:

図に示すように、color:window はシステムのデフォルトの色を取得します。システムのデフォルトの文字色の変更

結論：知らないうちに動いていたこの一年で、何も知らない初心者から少しは知っている初心者になりました。それを考えると本当に悲しいです。技術専門家が自らの学習体験を時折共有しているのを見ていると、あらゆる点で彼らを崇拝することしかできません。今日は勇気を出して、私が日々の仕事で遭遇する問題と要約を共有します。私はまだ非常に不安です...記事を書くのは皆さんが私を撫でてくれることを願っています。それが正しくない場合は、メッセージを残すか、私の QQ グループ 519875573 に参加して、みんなでコミュニケーションをとり、一緒に進歩できることを願っています。