box-shadow의 값을 조절하여 입체감 있는 구를 만들어 보았습니다.
See the Pen box-shodow attribute by ziziziczic (@ziziziczic) on CodePen.
box-shadow : x값 y값 blur값 그림자두께 색상 ;
box-shadow 안에 inset 값은 내부 그림자를 셋팅하기 위함입니다.
그림자를 여러개 사용하길 원할 경우 , 쉼표를 찍고 , 값을 반복해서 사용하면 됩니다.
예시 : box-shadow : x값 y값 blur값 그림자두께 색상 , x값 y값 blur값 그림자두께 색상 , x값 y값 blur값 그림자두께 색상 ; // 3개의 그림자가 생성됨.
'html&css' 카테고리의 다른 글
| css로 가로 스크롤 가능한 이미지 리스트 만들기 (0) | 2022.01.03 |
|---|---|
| 미디어 쿼리를 지원하지 않는 브라우저에 대응하려면? respond.js 사용하기 (0) | 2021.01.23 |
| line-height=1 이 의미하는 바는? (0) | 2020.12.26 |
| 테두리에 애니메이션을 적용해보자 (0) | 2020.12.24 |
| data- 속성 사용하기 (0) | 2020.12.17 |
댓글