Help us understand the problem. What is going on with this article?

2重線が重なり合うスタイルを組むには(No 画像, Yes CSS!)

More than 1 year has passed since last update.

borders.png

この画像のように、2重線が少しズレて重なっている枠線の実装に迫られましたが、
通常のborderbox-shadowを少しずつずらせばcssのみで実現できました。
画像も疑似要素も使用してませんよ!!

htmlはごくシンプル。

<div class="box">ここにテキストが入ります。</div>

構造をわかりやすくするために、ここでは枠線の色を3色に塗り替えています。
borders_2.png

  body {
    background-color: #000;
  }
  .box {
    padding: 30px;
    color: #fff;
    border: 1px solid #caa851; //(1)中央の黄色い枠線
    box-shadow: 
                3px 2px 0 1px #000, //(2)右下の赤線を覆う枠線(背景色)
                3px 2px 0 2px red,  //(2)右下の赤い枠線
                -3px -2px 0 1px #000, //(3)左上の青線を覆う枠線(背景色)
                -3px -2px 0 2px blue; //(3)左上の青い枠線
  }

(1)の中央枠線から、(2)右下・(3)左上にそれぞれズラしたbox-shadowでさらに覆うことで2重の枠線っぽく描画しています。

参考サイト

CSSで2重線を付ける方法と注意点

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした