lexi

i like breaking computers

  • it/its, #[deprecated] she/her
  • ./a.out

i like rust, nix, linux, infosec, webdev and i shitpost a lot. ctf player and so-called "security researcher". aroace, agender, nb, nd, disabled, &, ΘΔ :3 🏳️‍⚧️ 🟨⬜️🟪⬛️

picrew: #1322863


the MDN article about box-shadow has an interesting section

from MDN: box-shadow - CSS

Setting zero for offset and blur

When the x-offset, y-offset, and blur are all zero, the box shadow will be a solid-colored outline of equal-size on all sides. The shadows are drawn back to front, so the first shadow sits on top of subsequent shadows. When the border-radius is set to 0, as is the default, the corners of the shadow will be, well, corners. Had we put in a border-radius of any other value, the corners would have been rounded.

We added a margin the size of the widest box-shadow to ensure the shadow doesn't overlap adjacent elements or go beyond the border of the containing box. A box-shadow does not impact box model dimensions.

HTML

<div><p>Hello World</p></div>

CSS

p {
box-shadow: 0 0 0 2em #F4AAB9,
0 0 0 4em #66CCFF;
margin: 4em;
padding:1em;
}

Result

Hello World

that is an interesting color scheme. wonder where they found that


You must log in to comment.

in reply to @lexi's post: