border、outline、boxshadowのあれらの事とどのように内凹円をします

5914 ワード
border html css
border
枠線は、Webページを美化し、スタイルを強化する最も一般的な手段の一つです.例:

    .text {
    width: 254px;
    height: 254px;
    background-color: #33AAE1;
    border: 10px solid #03D766;
}

但有些时候，我们的需求是给一个容器加上多重边框，最容易想到的是给它多加一层标签：


    




.text-outborder {
    width: 274px;
    height: 274px;
    border: 10px solid #03D766;
}

.text {
    margin: auto;
    width: 254px;
    height: 254px;
    background-color: #33AAE1;
    border: 10px solid #03D766;
}

不过有些时候，我们可能无法修改结构，或者修改结构的成本很高，此时就需要我们在纯 CSS 层面解决这个问题。

outline

这时候可以通过 outline 属性来解决：

.text {
    width: 254px;
    height: 254px;
    background-color: #33AAE1;
    border: 10px solid #03D766;
    outline: 10px solid #BC9E9C;
}

線の利点は、枠線と同様に、破線などの様々な線型を設定できることです.
.text {
    width: 254px;
    height: 254px;
    background-color: #33AAE1;
    border: 10px solid #03D766;
    outline: 5px dashed #CE843B;
}

興味深いことに、outline-offsetのプロパティがあり、線のオフセット量を制御することができます.
.text {
    width: 254px;
    height: 254px;
    background-color: #33AAE1;
    border: 20px solid #03D766;
    outline: 5px dashed #FFF;
    outline-offset: 10px;
}
outlineを拡張できます
outline-offset
さらに、outline-offsetは負の値をサポートし、outlineをborderの上に重ねることができる.
.text {
    width: 254px;
    height: 254px;
    background-color: #33AAE1;
    border: 20px solid #03D766;
    outline: 5px dashed #FFF;
    outline-offset: -12px;
}

この特性を利用して多くの面白い効果を遊ぶことができます.
ただし、ストロークには欠陥があります.この容器自体にフィレットがある場合、ストロークはフィレットに完全にフィットしません.現在、すべてのブラウザの動作は次のとおりです.
box-shadow
フィレットを使用する必要がある場合は、別の方法を探さなければなりません.次に、box-shadowのプロパティを考えました.
投影は通常、次のように設定されます.
box-shadow: 0 5px 5px #000;

前の3つの長さの値に、もう1つの色の値を加えます.
最初の2つの長さ値はそれぞれ水平方向と垂直方向に投影されるオフセット量を表し、3番目の長さ値は投影されるぼかし半径(すなわちぼかしの程度)を表す.色の値は投影の色です.
最初の3つの値をゼロに設定すると、実際には何の効果もありません.投影がずれたりぼやけたりしなければ、ちょうどこの要素自体にしっかりと隠されているからです.
box-shadow 4番目の長さ値
多くの人が知らないかもしれませんが、投影には4番目の長さ値もあります.この値は、投影が外側に広がる度合いを示します.
box-shadow: 0 0 0 10px #FF0000;

これにより、投影は要素の下から一周します.
投影については、誰もが知っている特性ではありません.投影プロパティは実際にリストを受け入れることができ、多層投影を一度に与えることができます.
.text {
    width: 254px;
    height: 254px;
    background-color: #33AAE1;
    border: 20px solid #03D766;
    border-radius: 50px;
    box-shadow: 
        0 0 0 10px #FB0000,
        0 0 0 20px #FBDD00, 
        0 0 0 30px #00BDFB;
}

これにより、2層を超える「枠線」効果が得られます.
投影のもう一つの利点は,その拡張効果が要素自身の形状に基づいていることである.要素が矩形であれば、拡張するとより大きな矩形になります.要素にフィレットがある場合は、フィレットも拡張されます.
注意事項
ストロークと投影はレイアウトに影響しないため、この要素と他の要素の相対的な位置関係が重要であれば、他の要素に覆われないように、外距離などの方法でこれらの多くの「枠」のために位置を空ける必要があります.
したがって,この意味では,埋め込み投影を用いることがよりよいようである.埋め込み投影は投影を要素の内部に表示するため、要素の内部で追加の「枠線」に必要な空間を内側の余白で消化し、処理を容易にすることができます.
内凹円
ラベルページはよく知られていますが、一般的なUI要素です.
近づいてみましょう
このラベルはやはりきれいで、私たちは円角で本当のラベルの造形に近いように見えます.しかし、底の2つの直角が少し硬く見えることにも気づきました.
デザイナーが期待していた効果はこうだったのかもしれません
これで自然に多くなります.しかし、これは実現しにくいようですね.
私たちの難点は主にここにあります.
この特殊な形はどのように実現しますか?
拡大してみましょう
まず、画像を使うことを考えるかもしれません.これはもちろん可能ですが、画像にはいろいろな限界があります.CSSで完全に実現したほうがいいです.
では、次にその形状を分析してみましょう.実は四角い形で、90°の扇形を掘っています.そこで四角形を作成し、背景色で扇形を重ねてみました.
よさそうですね.しかし、これは嘘ですね.
複雑な背景の下に置くと、すぐにバレてしまいます.扇形の部分は透明ではありません.
インサイドフィレットの実装方法
したがって,我々の問題はCSSを用いて内凹角角をどのように実現するかということになる.
通常の外凸のフィレットについては、フィレットアトリビュートを使用すると、よく知られています.
しかし、私たちに必要なのは内凹の円角形状です.
これは現実的なニーズであり、開発者が提案したように、フィレット属性を拡張して負の値をサポートします.負の値であれば、フィレットは外凸ではなく、内凹になります.この提案は理にかなっているように聞こえ、文法設計もコンパクトだ.
しかし、実際には意味が正確ではありません.そのためCSSワークグループはこの提案を受け入れず、基準に入れなかった.
この道は通れないので,私たちはまだ探求を続けなければならない.
私たちはこの方向に沿って、頭の中で自然にこの疑問を爆発させます:CSSの中で円形と関係のある属性がありますか?
答えはもちろんあります!
ラジアルランプ
[放射状グラデーション](Radial Gradient)プロパティは円に関係しています.
せんけいランプ
しかし、それは少し複雑です.ラジアルグラデーションを説明する前に、簡単な「リニアグラデーション」を見てみましょう.
グラデーションといえば、自然に容器が必要です.そして、2色が必要です.グラデーションの色設定は「スケール」と呼ばれます.各スケールには色情報だけでなく、位置情報もあります.
始点と終点の色標に色を設定すると、グラデーションパターンが得られます.
次に、グラデーションについては、実際には2つ以上のスケールを設定することができます.例えば、中央にもう一つの色標を追加することができます.私たちがわざわざ起点の色標と同じ色を選んだことに注意してください.私たちが得た効果は次のとおりです.
グラデーションは色の異なるスケールの間でのみ発生することが分かった.2つのカラーラベルの色が同じ場合、それらの間に実色が表示されます.
はい、色標を増やし続けます.今回はグラデーション地帯の中央に色標を追加し、終点の色標と同じ色にしました.
上記の経験によれば、この結果は私たちが予想したものです.グラデーションは色の異なる色標の間でしか発生しません.
次に、私たちはもっと特別なことをして、私たちは中間の2つの色標を互いに接近して重なるまで、何が起こりますか?
実際にはこのグラデーションもゼロに向かう傾向にあります.すなわち,これは本質的に依然として「グラデーション」パターンであるが,我々の丹念な設計を経て,最終的に2つの純色のカラーブロックストライプを得た.
ゴールカラーを透明色に変えたら...
実色と透明色の間隔の縞も得られます.
半径方向のグラデーションを見てみましょう
はい、次に半径方向のグラデーションを見てみましょう.少し複雑ですが、原理は同じです.
同じように、容器が必要です.しかし、半径方向のグラデーションでは、すべての色標が半径に配置されていることが不思議です.つまり、私たちはまだ丸い心が必要です.既定では、中心はこの容器の中心です.
この半径は、円心が容器の最遠端を指す仮想的な線です.
次に、いくつかのカラースケールを設定します.
ここまで言うと、ラジアルグラデーションの特別なところを説明します.すべての色標の色変化の推進は線形グラデーションのように平行に推進されるのではなく、池の中で石に刺激されたさざ波のように同心円で外に拡散する.
このスケールの分布を見ると、線形グラデーションの結果が何なのか想像できるはずです.しかし、ここでは半径方向のグラデーションの特徴に基づいて推論しますが、実際には最終的な効果はこうです.
私たちはすべての補助的なマークを消して、グラデーションのパターンだけを残します.
これは穴をあけた実色の背景です.楽しかったでしょ?しかし、私たちがなぜここに来たのか忘れないでください.私たちは内凹の円角の形を得るためです.
注意深い友达はすでに発見したかもしれませんが、私たちに必要なものはすでに現れています.
次に、中心の位置と容器のサイズを調整して、この内凹角角の造形を得ることができます.
内凹円具体コード例
具体的なコード例は以下の通りです.
.text {
    width: 254px;
    height: 254px;
    background:
      -moz-radial-gradient(
          100% 0%, 
          rgba(255, 255, 255, 0) 0%,
          rgba(255, 255, 255, 0) 71%,
          #0059FF 0%;
      );
}

内凹円完成
このテクニックを利用して、私たちは純粋なCSSで最終的にこの不可能に見える「丸いラベルページ」の効果を実現しました!
テキストリンク:https://github.com/cssmagic/blog/issues/54#rd
守望者脱出C++プログラム
C言語の関数呼び出し規則