[CSS] box-shadow

Jeiniยท2024๋…„ 3์›” 21์ผ
0

๐Ÿ“„ HTML / CSS

๋ชฉ๋ก ๋ณด๊ธฐ
3/3

๐Ÿ“Œ box-shadow: none | x-position y-position blur spread color | inset | initial | inherit

  • none : ๊ทธ๋ฆผ์ž ํšจ๊ณผ๋ฅผ ์—†์•ค๋‹ค.
  • x-position : ๊ฐ€๋กœ ์œ„์น˜์ด๋‹ค. ์–‘์ˆ˜๋ฉด ์˜ค๋ฅธ์ชฝ์—, ์Œ์ˆ˜๋ฉด ์™ผ์ชฝ์— ๊ทธ๋ฆผ์ž๊ฐ€ ๋งŒ๋“ค์–ด์ง„๋‹ค. (ํ•„์ˆ˜)
  • y-position : ์„ธ๋กœ ์œ„์น˜์ด๋‹ค. ์–‘์ˆ˜๋ฉด ์•„๋ž˜์ชฝ์—, ์Œ์ˆ˜๋ฉด ์œ„์ชฝ์— ๊ทธ๋ฆผ์ž๊ฐ€ ๋งŒ๋“ค์–ด์ง„๋‹ค. (ํ•„์ˆ˜)
  • blur : ๊ทธ๋ฆผ์ž๋ฅผ ํ๋ฆฟํ•˜๊ฒŒ ๋งŒ๋“ ๋‹ค. ๊ฐ’์ด ํด ์ˆ˜๋ก ๋”์šฑ ํ๋ ค์ง„๋‹ค.
  • spread : ์–‘์ˆ˜๋ฉด ๊ทธ๋ฆผ์ž๋ฅผ ํ™•์žฅํ•˜๊ณ , ์Œ์ˆ˜๋ฉด ์ถ•์†Œํ•œ๋‹ค.
  • color : ๊ทธ๋ฆผ์ž ์ƒ‰์„ ์ •ํ•œ๋‹ค.
  • inset : ๊ทธ๋ฆผ์ž๋ฅผ ์š”์†Œ์˜ ์•ˆ์ชฝ์— ๋งŒ๋“ ๋‹ค.
  • initial : ๊ธฐ๋ณธ๊ฐ’์œผ๋กœ ์„ค์ •ํ•œ๋‹ค.
  • inherit : ๋ถ€๋ชจ ์š”์†Œ์˜ ๊ฐ’์„ ์ƒ์†๋ฐ›๋Š”๋‹ค.

โœ” ์ฐธ๊ณ 
: https://inpa.tistory.com/entry/CSS-%F0%9F%92%8D-%EA%B7%B8%EB%A6%BC%EC%9E%90box-shadow-%EB%94%94%EC%9E%90%EC%9D%B8-%F0%9F%96%8C%EF%B8%8F-%EB%AA%A8%EC%9D%8C#box-shadow_%EC%83%9D%EC%84%B1%EA%B8%B0

profile
Fill in my own colorful colors๐ŸŽจ

0๊ฐœ์˜ ๋Œ“๊ธ€