一つの要素にCSSだけでどれだけ枠線を引けるかチャレンジ

一つの要素にCSSだけでどれだけ枠線を引けるかチャレンジのアイキャッチ画像

要素に枠線を引く方法はいくつかありますが、今回は異なるプロパティでどれだけ枠線を引けるか挑戦してみました。

疑似要素はなし。

html

<div class="box"></div>

css

.box {
width: 250px;
height: 250px;
background-color: #f0f0f0;
border: solid #ddd 4px;
outline: solid #aaa 4px;
background-image: linear-gradient(#999, #999 8px,transparent 8px),
linear-gradient(-90deg,#999, #999 8px,transparent 8px),
linear-gradient(90deg,#999, #999 8px,transparent 8px),
linear-gradient(0deg,#999, #999 8px,transparent 8px);
box-shadow: 8px 8px #666, -8px -8px #666, 8px -8px #666, -8px 8px #666,inset 4px 4px #666,inset -4px -4px #666,inset 4px -4px #666,inset -4px 4px #666;
}

結果↓↓

5本!!

てかbox-shadowとlinear-gradientは何回でも使えるので、やろうと思えば何本でも引けるか。

まだあるかな?挑戦者求む。