コンテンツ
レンダリング
調色、シャープネスの調整、色の変更の機能を実現します
遭遇した死角
1.<label>は通常<input>と共有されます
アドバンテージ：
- ラベルテキストは、対応するテキスト入力要素に視覚的に関連付けられるだけでなく、プログラムによっても関連付けられます。これは、ユーザーがこのフォーム入力要素に焦点を合わせたときにスクリーンリーダーがラベルを読み取ることができることを意味し、支援技術のユーザーが入力する必要のあるデータを理解しやすくなります。
- 入力要素を直接クリックするのと同じように、関連付けられたラベルをクリックして、入力要素にフォーカスまたはアクティブ化できます。これにより、要素のクリック可能な領域が拡張され、タッチスクリーンデバイスを使用しているユーザーを含むユーザーが要素を簡単にアクティブ化できるようになります。
<label>を<input>要素と一致させるには、<input>にid属性を指定する必要があります。また、<label>には、<input>のIDと同じ値のfor属性が必要です。
にとって
つまり、<label>要素と同じドキュメント内 のラベル関連要素 のIDです。ID値が<label>要素のfor属性の値と同じであるドキュメントの最初の要素は、ラベルに関連付けることができる場合（ラベル付け可能）、関連付けられたラベルを持つコントロールであり、そのラベルはこの<label>要素。要素がタグに関連付けられていない場合、for属性は効果がありません。for属性と同じid値を持つ他の要素がドキュメントにある場合、for属性はそれらの要素に影響を与えません。
注： <label>要素は、for属性と子制御要素を同時に持つことができますが、for属性は制御要素を指す必要があります。
例：
シンプルなラベル
<label>クリックしてください<inputtype=“ text”> </ label>
for属性を使用する
<label for =“ username”>クリックしてください</ label>
<input type =“ text” id =“ username”>
アクセシビリティの問題：
インタラクティブコンテンツ：
label要素内にアンカーやボタンなどのインタラクティブ要素を配置しないでください。これを行うと、ユーザーがラベルに関連付けられたフォーム入力要素をアクティブ化/トリガーすることが難しくなります。
どこ（）
概要
var（）関数は、要素の任意の属性の値の任意の部分を置き換えることができます。var（）関数は、プロパティ名、セレクター、またはプロパティ値以外の他の値として使用することはできません。（これを行うと、無効な構文または変数に関連付けられていない値が生成されることがよくあります。）
文法
メソッドの最初のパラメーターは、置き換えるカスタムプロパティの名前です。関数のオプションの2番目のパラメーターは、フォールバック値として使用されます。最初のパラメーターによって参照されるカスタムプロパティが無効な場合、関数は2番目の値を使用します。
var（<custom-property-name>、<declaration-value> ？）
注：カスタムプロパティのフォールバック値にはカンマを使用できます。たとえば、var（-foo、red、blue）は、フォールバック値として赤と青の両方を指定します。つまり、最初のコンマから関数の終わりまでの値はフォールバックと見なされます。
：rootで定義し、それを使用します
：根 {
--main-bg-color：ピンク;
}
体 {
背景色：var（-main-bg-color）;
}
クリップボードにコピー
最初の値が未定義の場合、フォールバック値が有効になります
/*フォールバック値*/
/*親要素スタイルで値を定義します*/
。成分 {
--text-color：＃080;/*ヘッダーの色が設定されていません*/
}
/ *コンポーネントのスタイルで使用します：* /
.component .text {
color：var（-text-color、black）;/*ここでの色の通常の値--text-color*/
}
.component .header {
color：var（-header-color、blue）;/*ここで色は青にフォールバックします*/
}
フィルター
フィルタ のCSSプロパティは、ぼかしやカラーシフトなどのグラフィック効果を要素に適用します。フィルタは、画像、背景、境界線のレンダリングを調整するためによく使用されます。
opacity（）
opacity（） は、画像の透明度を変換します。amountの値は、変換のスケールを定義します。0％の値は完全に透明であり、100％の値は画像に変化をもたらしません。0％から100％の間の値は、効果の線形乗数です。また、画像サンプルに数値を掛けることと同じです。値が設定されていない場合、値はデフォルトで1になります。この関数は、既存の不透明度プロパティと非常によく似ています。違いは、フィルターを介して、一部のブラウザーがパフォーマンスを向上させるためのハードウェアアクセラレーションを提供することです。
グレースケール（）
grayscale（） 関数は、入力画像のグレースケールを変更します。amountの値は、変換のスケールを定義します。値を100％にすると、画像は完全にグレースケールに変換され、値を0％にすると、画像は変更されません。0％から100％の間の値は、効果の線形乗数です。値が設定されていない場合、デフォルトは0です。
ブラー（）
この画像のぼやけを示します
ソースコード
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>在线图片修饰器 使用JS修饰CSS变量</title>
</head>
<body>
<h2>Update CSS Variables with <span class='h1'>JS</span></h2>
<div class="controls">
<!-- label与input一般同时使用//还有range的特殊操作，左边界与右边界进行设置 value就是位置啊-->
<label for="spacing">Spacing:</label>
<input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
<label for="blur">Blur:</label>
<input id="blur" type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
<label for="base">Base Color</label>
<input id="base" type="color" name="base" value="#ffc600">
</div>
<img src="./留言板.jpg" alt="">
<style>
:root{
--base: #ffc600;
--spacing: 10px;
--blur: 10px;
--grayscale: 0%;
}
img {
padding: var(--spacing);
background: var(--base);
filter: blur(var(--blur)) grayscale(var(--grayscale));
width: 66%;
}
.h1{
color: var(--base);
}
body {
text-align: center;
background: #193549;
color:white;
font-family: 'helvetica neue', sans-serif;
/* 表示了字体的粗细程度 */
font-weight: 100;
font-size: 50px;
}
.controls {
margin-bottom: 50px;
}
input {
width: 100px;
}
</style>
<script>
const inputs = document.querySelectorAll('.controls input');
function handleUpdate() {
const suffix = this.dataset.sizing || '';
// 用于改变CSS样式
document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
}
inputs.forEach(input => input.addEventListener('change',handleUpdate));
inputs.forEach(input => input.addEventListener('mousemove',handleUpdate));
</script>
</body>
</html>