본문 바로가기

Tech/HTML CSS

box-shadow 로 그림자효과 내기

 

div{
  box-shadow:inset 4px 4px 4px #000;
}

 

inset을 설정해주면 그림자가 안쪽에 생성된다 

숫자로 된 속성값은 순서대로 세로, 가로, 흐리게 값이다.

 

세로, 가로값은 필수 값이라서 꼭 작성해야한다. 

 

그리고 마지막에 색상코드 값을 작성해주면 된다. 

 

 

See the Pen Untitled by 김채영 (@cherryat) on CodePen.

 

 

 

 

보라색 상자로 만들어본 예제이다 

 

 

 

 

 

'Tech > HTML CSS' 카테고리의 다른 글

og 태그로 링크 미리보기 만들기  (0) 2022.06.28
AOS.js (Animate On Scroll) 를 사용해보자  (0) 2022.04.28
gooey filter 를 응용한 메뉴 버튼 만들기  (1) 2022.04.01
gooey filter  (1) 2022.03.30