読者です 読者をやめる 読者になる 読者になる

NO TITLE

WEBデザインとかブログ運営、社会・経済、音楽などなど

一つの要素に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は何回でも使えるので、やろうと思えば何本でも引けるか。

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