css3：box-shadow ボーダーシャドウ属性の詳細説明 value_html/css_WEB-ITnose

はしがき

本来はすべてUSBフラッシュドライブに直接入れていたのですが、残念ながら昨夜仕事を終えてUSBフラッシュドライブを家に持ち帰ったところ、USBのカードスロットの磁気ストリップがはがれてしまっていたことに気づきました。インターフェイスが脱落していました。 。ということで、10月に作ったものはすべてなくなってしまいました。 。この記事もその被害者の1つです。なので、今後は利便性を気にする必要はなくなり、すべてをコンピューター上に置いたほうが安全です。

CSS3 ボーダー プロパティの最後のレッスン: box-shadow ボーダー シャドウ効果。英語の文字通りの意味では、このプロパティはボーダー シャドウではなく、CSS モデルのボーダー シャドウです。ただし、中国へのコピーは、常に私たちの読書習慣に準拠している必要があります。CSS で最も重要かつ基本的なことは、ボックス モデルに関するものです。各要素はボックスであり、各ボックスには目に見えない境界線があり、境界線の内側または外側にぼやけたシャドウ効果が必要な場合、使用する属性に関係なく、常にこのボックス シャドウ属性が発生します

学びやすいように、すべての CSS ボーダー属性を以下にリストしました。学ぶかどうかはあなた次第です

、参照のみ:

border-image ボーダー画像

border-radius 丸いボーダー

- moz-border-* -Firefox 専用の色

昨夜、ある質問について考えていました。初心者でも検索したり入力したりできるチュートリアルがたくさんあるのに、なぜ自分でコードを書き直す必要があるのでしょうか。これは典型的な楊白老ではないでしょうか？しばらく考えていましたが、突然、なぜだろうということが分かりました。一度、二度、三度、あるいは数え切れないほど見るよりも、落ち着いて自分で分析して学ぶことができれば、百倍良いと思うからです。実践が真実をテストするための唯一の基準です。やったことがない場合は、あまり話しても無駄です、先輩が言った、彼が言った、彼が言った、彼だけがそれを言ったのを聞いたからです。あなたについて？同氏が言及したプロセスが合理的で正しいかどうかを慎重に分析したかどうかは不明だ。ですから、私は他の人のアイデアを広める者にはなりたくないのです。

私たちが勉強するのは、給料を増やすためだけではなく、もっと重要なことに、人生でほんの数年経つと、本当に何もありません。建国記念日に帰省した際、中学校の同級生が薬物乱用で自殺したと聞き、人生のはかなさを嘆くと同時に、時間の大切さも実感しました。

愚痴は終わりました、さあ本題に入りましょう。

box-shadow の仕様

box-shadow は、ボックスの外側または内側の影の効果を定義します。ボックスを 1 つ以上の影で装飾できますが、それらを区別するには「,」を使用します。以下は w3c 仕様です

none | && [ gt;ブラー半径>??? ] なしパーセント:N/A計算値:

属性名:	属性値:
属性値の詳細説明: 1. inset オプションの値、デフォルトの影はボックスの外側にあります insetを使用すると、境界線または透明な境界線が指定されている場合でも、影はボックスの内側にあります。まだ存在しています。 2. これらは、影のオフセットを設定するために使用されます。 offset-x は影の水平方向の変位を設定します。負の値の場合、影は境界線の左側にあります。offset-y は影の垂直方向の変位を設定します。国境の頂上にある。以下に示すように、数学の数値軸を使用してこれを理解することができるはずです: 水平方向の原点は境界線の左上隅を開始点とし、x は水平方向の変位、Y は垂直方向の変位です。階下にデモがあるそうです↓ 3. ぼかしの半径を指定します。 は負の値を許可しません 、0に設定すると影は付きませんぼかし、そうでない場合は、より大きな値を設定すると、境界線の影がぼやけます。階下にデモがあるそうです↓ 4. 0 に設定すると影を拡大しません。それを減らします。下の階にデモがあるそうです↓ それぞれの値の書き方が違う デモは以下の通りです 統一され、境界線と幅が共通の書き方になっています width:200px;height:50px; border:10px solid #F00;margin:25px;语法如下：inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]* 10px 10px #CCC, two値 -10px 10px #CCC、水平方向の変位は負です 10px -10px #CCC、垂直方向の変位は負です 10px 10px 0 #CCC、ぼかし半径は 0、値は 負にすることはできません 10px 10px 10px #CCC、ぼかし半径は10ピクセルです 10px 10px 0 10px #CCC、拡張値は正です、影は10pxだけ外側に拡張します 10px 10px 0 -5px #CCC、拡張値は負です、影は内側に縮小します。 インセット 10px 10px 10px 10px #CCC、インセットを使用します 10px 10px 0 10px #CCC 10px 10px 10px 20px #CCC 複数の影 PS これには何か意味があると言う人もいるでしょう。 PS 鶏と羽の関係でやります。 。 えー。 。 。これは本当に些細なことです。どういう言い方をするかというと、PS にはレイヤー投影エフェクト機能があることは皆さんご存知です: 投影をクリックすると、投影設定ボックスがポップアップします このように、実際にはそれらの関係は見えません。具体的な関係は何ですか。その秘密を知るには、英語版の PS に切り替えることができます W3C 仕様を誤って読んだことがある人なら、その距離についてよく知っているでしょう。 、写真の見開きとサイズ これらは英語ではある程度馴染みがあります。 そして、PS を使用して同様の長い影効果を作成しました。 次に、投影におけるこれらの設定についてはよくご存じだと思います。そうです。PS の投影設定の距離は、CSS 構文では であり、水平方向の変位と垂直方向の変位を表します。スプレッドは、サイズを拡大するための構文では です。 、サイズはブラー半径 です しかし、実際に分析したところ、ブラー半径サイズが 0 の場合、PS のスプレッド拡張サイズはサイズの影響を受けます。図に示すように、効果はありません: ただし、次のコードのような CSS の場合は異なります: 10px 10px 0 10px #333、水平方向と垂直方向の変位 10px、ぼかし半径 0、拡張 10px ぼやけていても 半径の値は0ですが、拡大サイズを指定すると、拡大された影は元の影に沿って指定値だけ外側に拡大されます。 PS の拡張サイズはぼかしの半径に基づいていますが、CSS はボックスの外側の境界線に基づいて拡張されます。デザインドラフトで拡張とぼかし半径を使用すると、CSS を記述するときに拡張を 2 倍にして同様の効果を実現できます。たとえば、デザインドラフトが の場合、CSS 値は次のようになります: 10px 10px 10px 0 左の写真はデザイン案、右の写真はCSS画像です これがレンダリングです 角度（角度）について、私が理解しているのはこれです この角度をよりよく理解するために、太陽の位置を使用できます。結局のところ、太陽が出れば自然に投影が行われるというたとえです。 PS の角度 0° では、太陽が海面から出てきたばかりで、図の背後に投影されています。このとき、投影された水平変位 offset-x は負で、offset-y は 0 です。このとき、太陽は午前9時の方向に昇ったばかりで、投影図はまだ後方の地面にあります。このとき、投影図の水平変位はオフセット-xです。は負であり、垂直変位 offset-y は正です。 PS で 90° の角度、このとき、太陽は私たちの上空に輝いており、私たちの足の裏に投影されます。投影された水平変位オフセット-x: 0、垂直変位オフセット-y は正です。 PS で 135°の角度で、太陽は午後 3 時にあり、人の前の地面に投影されます。このとき、投影は影の起源、つまり です。水平方向の変位は offset-x: 0、垂直方向の変位は offset-y: 0 です。 PS の 180° の角度では、この時点で太陽が沈みます。これは、太陽が沈んだ方向とはまったく反対です。見えないかもしれませんが、この時点で投影された水位オフセット x は正であり、垂直です。太陽が沈んだ後、ランプのある太陽と比べてみましょう。 PS の 225° の角度で、光は南西から私たちを照らし、北東に投影されます。このとき、水平変位 offset-x は正であり、垂直変位 offset-y は負です。 PS で 270° の角度、これは、光が南方向から当たる場合、投影は北方向にあり、投影の水平変位は 0、垂直変位は負です 角度 315° では、 PS では、光は南東方向から照射され、投影は北西方向にあり、投影の水平方向の変位は負、垂直方向の変位は負です。写真の灰色の左上隅は、負の値を使用するか正の値を使用するかをすぐに思い出せない場合は、CSS3 でボックスシャドウを変更し、光源と比較して、どこから輝いているかを判断します。投影位置について。 アプリケーション デザイン案を入手したところ、そのデザイン案では投影法が使用されていることがわかりました。 CSS の記述にどのような値が使用されているかがわからない場合は、デザイン ドラフトの関連するプロジェクション設定を直接確認することで、たとえば、どのような値がデザインに使用されたかを理解できます。 , 以下はデザイン案です 単にbox-shadowを使って影効果を作成するだけで、その値が具体的に何を意味するのか分からない場合は、見たときにおおよその値で書くしかありません。設計草案、それについては後で話しましょう。まあ、この計画は非常に大きいですが、私の設計草案はそれほど大きくありません。したがって、1 つずつ調整する必要があります。最初から撮影を濡れて言葉を発しないままにしておいてはどうでしょうか。その後、次のように投影値を計算できます: 写真から、さまざまな値を確認できます。 PS投影によると、水平変位オフセット-x:0、垂直変位オフセット-y:0、ぼかし半径が5px、拡大サイズが5px、色が#555であることがわかります。以上より、CSSを書くときは原則として展開サイズが1倍になるので、CSSコードは 0 0 5px 0 #555 左の画像が元の画像、右の画像がCSS画像です と結論付けることができます。 それで、学習しましたか？ あとがき はぁ、やっとボー​​ダー属性が完成しました、覚えるのに時間がかかったみたいですね。一度に一歩ずつ進めてください。 。とりあえずはここまでです。えーっと、モバイル版について言及するのを忘れていました。 。現時点では、5S と IOS8 ではすべてが正常です。あなたの携帯電話システムが上記の小さなデモのシャドウ効果を確認できない場合は、コメントでその旨を伝えてください。ちなみに、上記の -moz、-o- およびその他のプライベート プレフィックスは追加していません。 参考文献: http://www.w3.org/TR/css3-background/#the-border-radius https://developer.mozilla.org/en-US/docs/Web/CSS /境界半径