본 글에서 공유한 내용은 CSS로 테두리 그림자를 구현하는 방법입니다. 내용이 매우 상세해서 도움이 필요한 친구들이 참고할 수 있습니다.
테두리에 그림자를 추가하기 위해 필요한 것은 box-shadow 속성입니다. box-shadow 속성의 구문 형식을 살펴보겠습니다.
box-shadow: (가로 방향의 거리) (세로 방향 거리) 거리) (그림자 흐림) (그림자 크기) (그림자 색상) (그림자 방향)
(그림자 흐림) (그림자 크기) (그림자 색상) (그림자 방향)을 생략하거나 다음 형식을 사용할 수 있습니다. (관련 권장사항: CSS 학습 매뉴얼)
box-shadow: (수평 방향의 거리) (수직 방향의 거리)
box-shadow: (수평 방향의 거리); 수직 방향) ( 그림자 흐림)
box-shadow: (수평 방향의 거리) (수직 방향의 거리) (흐릿한 그림자) (그림자 크기)
box-shadow: (수평 방향의 거리) 방향)(세로 방향의 거리) 거리)(그림자 흐림)(그림자 색상);
box-shadow :(가로 거리)(세로 거리)(그림자 흐림)(그림자 크기)(그림자 색상);
box-shadow :(가로 방향 거리)(세로 방향 거리)(그림자 흐림)(그림자 색상)(그림자 방향);
구문 예:
box-shadow:5px 5px 3px 1px#000000 inset;
코드 예제를 살펴보겠습니다. 자세히:
SimpleShadow.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="SimpleShadow.css" /> </head> <body> <div class="SimpleFrame">php中文网</div> </body> </html>
SimpleShadow.css
body { background-color:#C0C0C0; } .SimpleFrame { background-color: #FFFFFF; margin-left: 128px; margin-top: 64px; width: 128px; height: 220px; box-shadow: 4px 4px 5px #404040; }
효과는 다음과 같습니다.
그림자 효과는 DIV의 컨테이너에 부착되어 그림자를 표시합니다.
그림자 흐림 정도를 설정할 때 CSS 코드를 다음과 같이 변경하세요. # 808080;
숫자가 클수록 그림자의 윤곽이 흐려지고 부드러운 그림자가 나타납니다.
그림자 크기 설정
SimpleShadow.css
body { background-color:#C0C0C0; } .SimpleFrame { background-color: #FFFFFF; margin-left: 128px; margin-top: 64px; width: 128px; height: 220px; box-shadow: 4px 4px 0px #808080; }
그림자의 크기를 지정하면 외부에서 지정한 크기에 따라 그림자가 표시됩니다.
그림자 방향 설정
CSS 코드는 다음과 같습니다.
body { background-color:#C0C0C0; } .SimpleFrame { background-color: #FFFFFF; margin-left: 128px; margin-top: 64px; width: 128px; height: 220px; box-shadow: 4px 4px 5px 10px #404040; }효과는 다음과 같습니다: 그림자가 프레임 내부에 표시됩니다
body { background-color:#C0C0C0; } .SimpleFrame { background-color: #FFFFFF; margin-left: 128px; margin-top: 64px; width: 128px; height: 220px; box-shadow: 4px 4px 5px #404040 inset; }효과는 다음과 같습니다: 그림자가 착색되어 표시됩니다. CSS에 대한 자세한 내용은 PHP 중국어 웹사이트의
CSS Video Tutorial
칼럼을 참조하세요. ! !위 내용은 CSS의 테두리 그림자(box-shadow) 구현 방법 소개(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!