web-dev-qa-db-ja.com

異なる色の二重罫線

Photoshopを使用すると、2つの異なる色の要素に2つの異なる境界線を配置できます。それにより、要素を使って多くの動的な日陰効果を作成できます。 Photoshopエフェクトを使用しても、Drop ShadowとInner Shadowで管理できます。

Webデザインの問題で、下の画像のようなデザインがある場合、CSSでどのように実現できますか？本当に可能ですか？
border with different color

注：白い要素に2つの境界線を付けています。外側の境界線は白で、内側の境界線は灰色がかっています。一緒に、動的な外観を作成して、はめ込み要素のように感じ、白い要素は枕に型押しされます。だから、少しです：

div.white{
   border: 2px solid white;
   border: 1px solid grey;
}

しかし、あなたはそれが二重宣言であり、無効であることを知っています。では、CSSでこのようなことをどのように管理できますか？

border-style: doubleを配置すると、単一のdouble境界線に2つの異なる色を渡すことはできません。

div.white{
       border: double white grey;
}

また、LESS CSSプリプロセッサにも精通しています。そのため、CSSプリプロセッサを使用してそのようなことが可能であれば、お知らせください。

cssborderless
42
Mayeenul Islam

または、擬似要素を使用してそうすることができます:)擬似要素ソリューションの利点は、実際の境界から任意の距離で内側の境界を離すために使用できることです。 。マークアップ：

body {
  background-image: linear-gradient(180deg, #ccc 50%, #fff 50%);
  background-repeat: no-repeat;
  height: 100vh;
}
.double-border {
  background-color: #ccc;
  border: 4px solid #fff;
  padding: 2em;
  width: 16em;
  height: 16em;
  position: relative;
  margin: 0 auto;
}
.double-border:before {
  background: none;
  border: 4px solid #fff;
  content: "";
  display: block;
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  pointer-events: none;
}
<div class="double-border">
  <!-- Content -->
</div>

互いに連続する（それらの間にスペースがない）境界線が必要な場合は、複数のbox-shadow宣言（コンマで区切る）を使用してそうすることができます。

body {
  background-image: linear-gradient(180deg, #ccc 50%, #fff 50%);
  background-repeat: no-repeat;
  height: 100vh;
}
.double-border {
  background-color: #ccc;
  border: 4px solid #fff;
  box-shadow:
    inset 0 0 0 4px #eee,
    inset 0 0 0 8px #ddd,
    inset 0 0 0 12px #ccc,
    inset 0 0 0 16px #bbb,
    inset 0 0 0 20px #aaa,
    inset 0 0 0 20px #999,
    inset 0 0 0 20px #888;
  /* And so on and so forth, if you want border-ception */
  margin: 0 auto;
  padding: 3em;
  width: 16em;
  height: 16em;
  position: relative;
}
<div class="double-border">
  <!-- Content -->
</div>
77
Terry

私は、単に機能するcss 2プロパティの輪郭を使用します。これを確認してください。シンプルで、アニメーション化も簡単です。

.double-border {
  display: block;
  clear: both;
  background: red;
  border: 5px solid yellow;
  outline: 5px solid blue;
  transition: 0.7s all ease-in;
  height: 50px;
  width: 50px;
}
.double-border:hover {
  background: yellow;
  outline-color: red;
  border-color: blue;
}
<div class="double-border"></div>
16
David Felipe Camargo Polo

Terryが示唆するpseudo-elementの使用には、1つのPROと1つのCONがあります。

  1. PRO-pseudo-elementは古いIEでもサポートされているため、ブラウザ間の互換性に優れています。
  2. CON-追加の（生成された場合でも）要素を作成する必要があり、その事実は定義されています疑似要素。

とにかく素晴らしいソリューションです。

その他の解決策：

IE9以降の互換性を受け入れることができる場合（ IE8はこれをサポートしていません ）、他の2つの方法で望ましい結果を得ることができます。

  1. outlineプロパティとborderおよび単一のinsetbox-shadowを組み合わせて使用​​する
  2. 2つのbox-shadowをborderと組み合わせて使用​​します。

ここでjsFiddle withTerry 'sこれらの他の可能な解決策を並べて示す修正コード。各プロパティの主な固有のプロパティは次のとおりです（その他は.double-borderクラスで共有されます）：

.left
{
  outline: 4px solid #fff;
  box-shadow:inset 0 0 0 4px #fff;
}

.right
{
  box-shadow:0 0 0 4px #fff, inset 0 0 0 4px #fff;
}

LESSコード：

LESSのようなプリプロセッサを使用することについて、考えられる利点を求めました。この特定のケースでは、ユーティリティはそれほど優れていませんが、とにかく何かを最適化して、@ variableで色とborder/ouline/shadowを宣言できます。

ここで、LESSで宣言されたCSSコードの例（色と境界線幅の変更が非常に迅速になります）：

@double-border-size:4px;
@inset-border-color:#fff;
@content-color:#ccc;

.double-border 
{
  background-color: @content-color;
  border: @double-border-size solid @content-color;
  padding: 2em;
  width: 16em;
  height: 16em;
  float:left;
  margin-right:20px;
  text-align:center;
}

.left
{
  outline: @double-border-size solid @inset-border-color;
  box-shadow:inset 0 0 0 @double-border-size @inset-border-color;
}

.right
{
  box-shadow:0 0 0 @double-border-size @inset-border-color, inset 0 0 0 @double-border-size @inset-border-color;
}
5
Luca Detomi

多分アウトラインプロパティを使用する

    <div class="borders">
      Hello
    </div>

    .borders{
    border: 1px solid grey; 
    outline: 2px solid white;
     }

https://jsfiddle.net/Ivan5646/5eunf13f/

4
Ivan

css3を使用してbox-shadowを使用して無限の境界線を追加できます。1つのdivに複数の境界線を適用する場合、コードは次のようになります。

div {
    border-radius: 4px;
    /* #1 */
    border: 5px solid hsl(0, 0%, 40%);

    /* #2 */
    padding: 5px;
    background: hsl(0, 0%, 20%);

    /* #3 
    outline: 5px solid hsl(0, 0%, 60%); */

    /* #4 AND INFINITY!!! (CSS3 only) */
    box-shadow:
        0 0 0 10px red,
        0 0 0 15px orange,
        0 0 0 20px yellow,
        0 0 0 25px green,
        0 0 0 30px blue;
}
2
Piyush Dholariya

アウトラインオフセットでアウトラインを使用できます

<div class="double-border"></div>
.double-border{
background-color:#ccc;
outline: 1px solid #f00;
outline-offset: 3px;
}
2
sameeuor

以下の構造を試して、2色の境界線を適用します。

<div class="white">
    <div class="grey">
    </div>
</div>

.white
{
    border: 2px solid white;   
}

.grey
{
    border: 1px solid grey;   
}
1
Kishori

CSS擬似要素とともにborderプロパティとbox-shadowプロパティを使用して、トリプルボーダーのような効果を実現できます。 divの下部に3つの境界線を作成する方法については、以下の例をご覧ください。

.triple-border:after {
    content: " ";
    display: block;
    width: 100%;
    background: #FFE962;
    height: 9px;
    padding-bottom: 8px;
    border-bottom: 9px solid #A3C662;
    box-shadow: -2px 11px 0 -1px #34b6af;
}
<div class="triple-border">Triple border bottom with multiple colours</div>

位置合わせを正しく行うには、値をいじる必要があります。ただし、柔軟性を高めることもできます。疑似セレクターではなく適切な要素に属性の一部を配置した場合、4つの境界線。

0
Muhan Alim