枠線、アウトライン、ボックスシャドウと凹円の作り方_html/css

ボーダー

ボーダーは、Web ページを美しくし、スタイルを強化するために最も一般的に使用される手段の 1 つです。例:

<div class="text"></div>    .text {    width: 254px;    height: 254px;    background-color: #33AAE1;    border: 10px solid #03D766;}

ログイン後にコピー

しかし、場合によっては、コンテナーに複数の境界線を追加する必要がある場合があります。最も簡単に考えられるのは、コンテナーにラベルのレイヤーを追加することです。 🎜>

<div class="text-outborder">    <div class="text"></div></div>.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;}

ログイン後にコピー

ストロークの利点の 1 つは、境界線に似ていることです。破線などのさまざまな線の種類を設定します。

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

ログイン後にコピー

興味深いことに、ストロークのオフセットを制御できるアウトラインオフセット属性もあります。

.text {    width: 254px;    height: 254px;    background-color: #33AAE1;    border: 20px solid #03D766;    outline: 5px dashed #FFF;    outline-offset: 10px;}

ログイン後にコピー

アウトラインを拡張できます:

outline-offset

また、outline-offset は負の値もサポートしており、アウトラインは重ね合わせ境界線の上:

.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 つの長さの値と色の値。

最初の 2 つの長さの値は、それぞれ水平方向と垂直方向の投影のオフセットを表し、3 番目の長さの値は投影のブラー半径 (つまり、ブラーの程度) を表します。カラー値は投影の色です。

最初の 3 つの値をゼロに設定しても、実際には何の効果もありません。投影がオフセットもブラーもされていない場合、投影は要素自体によって完全にブロックされるためです。

box-shadow の 4 番目の長さの値

多くの人は知らないかもしれませんが、シャドウも 4 番目の長さの値を持つことができるということです。この値は、投影が外側に拡張する範囲を表します。

box-shadow: 0 0 0 10px #FF0000;

ログイン後にコピー

このようにして、投影は要素の下部から出現します。

射影に関して、あまり知られていないもう 1 つの機能は、射影属性が実際にリストを受け入れることができ、次のように一度に複数の射影レイヤーを与えることができることです。

.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 層以上の「境界線」効果が得られます。

ドロップシャドウのもう 1 つの利点は、その拡張効果が要素自体の形状に基づいていることです。要素が長方形の場合は、より大きな長方形に拡張され、要素の角が丸い場合は、拡張されて角が丸い形状になります。

メモ

ストロークと投影はレイアウトに影響しないため、この要素と他の要素の相対位置が重要な場合は、これらの余分な「境界線」にマージンやその他の方法を追加する必要があります。他の要素で覆われないようにスペースを確保します。

したがって、この意味では、インライン投影を使用する方が良い選択肢のように思えます。インラインドロップシャドウを使用するとドロップシャドウが要素内に表示されるため、パディングを使用して要素内のこれらの追加の「境界線」に必要なスペースを吸収でき、処理が容易になります。

凹円

タブページはよく知られており、よく使用される UI 要素です。

詳しく見てみましょう:

このラベルは非常に美しく、非常に本物のように見えるように丸い角を使用しています。ラベルスタイル。ただし、下部の 2 つの直角が少し硬いように見えることにも気付きました。

したがって、デザイナーが当初期待していた効果は次のようになります:

][14]

これはより自然です。しかし、これを達成するのは難しそうです！

私たちの主な困難はここです:

この特殊な形状をどのように実現するか?

ズームインして見てみましょう:

まず、写真を使用することを考えます。これは確かに可能ですが、画像には制限があるため、完全に CSS を使用して実行する方が良いでしょう。

それでは、次にその形状を分析しましょう。実際には、90°の扇形に切り取られた正方形です。そこで、正方形を作成し、背景色を使用して扇形を作成し、それを重ね合わせてみました。

うまくいくようです。しかし、これは嘘です！

複雑な背景に置くと、その秘密がすぐに明らかになります - 扇形の部分は透明ではありません:

凹型の丸い角を実現する方法

そこで、私たちの質問は、CSS を使用して凹型の丸い角を実現する方法になります。

通常の凸型の丸い角についてはすでによく知っていますが、丸い角属性を使用して次のことを行うことができます。

しかし、必要なのは凹型の形状です。。

这是一个实实在在的需求，于是有开发者曾经提议，扩展圆角属性，让它支持负值。如果是负值，圆角就不再是外凸的，而是内凹的。这个提议听起来似乎很有道理，语法设计也很紧凑。

但实际上它的语义不够准确。因此 CSS 工作组并没有接受这个提议，并未将它纳入标准。

这条路走不通，我们还需要继续探索。

我们顺着这个方向，头脑中很自然地会迸出这个疑问：CSS中还有和圆形有关的属性吗？

答案当然是有！

径向渐变

“径向渐变” 特性就是跟圆形有关的。

线性渐变

不过它稍稍有些复杂。在讲解径向渐变之前，我们先来看一看比较简单的 “线性渐变”。

说到渐变，那自然需要有一个容器。然后，还需要有两种颜色。渐变的颜色设置我们称之为 “色标”——每个色标不仅有颜色信息，还有位置信息。

我们给起点和终点的色标分别设置颜色，就可以得到一条渐变图案：

接下来，关于渐变，我们其实可以设置不止两个色标。比如我们可以在中央再增加一个色标。请注意我们特意选择了跟起点色标一样的颜色。我们得到的效果如下：

我们发现，渐变只发生在颜色不同的色标之间。如果两个色标的颜色相同，则它们之间会显示为一块实色。

好的，我们继续增加色标。这次我们在渐变地带的中央增加一个色标，且让它的颜色和终点色标相同：

根据上面的经验，这个结果正是我们所预料的——渐变只发生在颜色不同的色标之间。

接下来，我们玩点更特别的，我们把中间的两个色标相互靠近直至重合，会发生什么？

实际上这个渐变也会趋向于零。也就是说，虽然这本质上仍然是一个 “渐变” 图案，但经过我们的精心设计之后，我们最终得到了两个纯色的色块条纹。

如果我们把终点颜色换为透明色……

我们甚至还会得到实色和透明色间隔的条纹。

再来看径向渐变

好的，接下来我们来看径向渐变。它稍稍有些复杂，但原理是一样的。

同样，我们需要有一个容器。但对径向渐变来说，顾名思议，所有色标是排布在一条半径上的。也就是说，我们还需要有一个圆心。默认情况下，圆心就是这个容器的正中心：

而这条半径就是圆心指向容器最远端的一条假想的线：

接下来，我们要设置一些色标：

说到这里，就要讲解一下径向渐变的特别之处。所有色标的颜色变化推进不是像线性渐变那样平行推进的，而是以同心圆的方式向外扩散的——就像水池里被石子激起的涟漪那样。

看到这个色标的分布，我们应该可以想像出线性渐变的结果是什么；但这里我们把它按照径向渐变的特征来推演一下，实际上最终的效果是这样的：

我们把所有辅助性的标记都去掉，只留下渐变图案：

这是一个穿了个窟窿的实色背景。很好玩是吧？不过不要忘了我们是为什么来到这儿的——我们是为了得到一个内凹圆角的形状。

细心的朋友可能已经发现了，我们需要的东西已经出现了：

接下来，我们调整一下圆心的位置和容器的尺寸，就可以得到这个内凹圆角的造型了。

内凹圆具体代码例子

具体代码例子如下：

.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%;      );}

ログイン後にコピー