집 > 기사 > 웹 프론트엔드 > CSS3를 활용한 그림자 효과 구현 예

CSS3를 활용한 그림자 효과 구현 예

小云云원래의: 2017-11-20 17:14:092303검색

CSS3는 CSS 기술의 업그레이드 버전이며 CSS3 언어 개발은 모듈화를 향해 발전하고 있습니다. 이전 사양은 모듈로서 너무 크고 복잡했기 때문에 더 작은 모듈로 세분화되었고 더 많은 새로운 모듈이 추가되었습니다. 이러한 모듈에는 상자 모델, 목록 모듈, 하이퍼링크 방법, 언어 모듈, 배경 및 테두리, 텍스트 효과, 다중 열 레이아웃 등이 포함됩니다. 이번 장에서는 간단한 CSS3 그림자 효과 예제를 알려드리겠습니다. CSS3의 Shadow 속성을 사용하여 웹페이지 요소에 그림자 효과를 추가할 수 있습니다. 그러나 이 기능은 Firefox 3.5, Safari 3.1 +, Google Chrome 등 CSS3를 지원하는 브라우저에서만 작동합니다.

css3의 그림자 속성을 활용하는 방법에 대해 이야기해보겠습니다.

css3 섀도우는 주로 box-shadow 속성의 구문 형식을 사용합니다.

box-shadow: f65652876579e614b30129b34738ac78 b10fb37415d019cfffa8c4d7366c607f

각각의 의미 위의 속성 값은 다음과 같습니다.

horizontal(수평): 수평 오프셋 그림자를 지정합니다. 양수 값(예: 5px)은 그림자를 오른쪽으로 이동하고, 음수 값(예: - 10px)은 그림자를 왼쪽으로 치우칩니다.
vertical: 수직 오프셋 그림자를 지정합니다. 양수 값(예: - 5px)은 상자 아래쪽에 그림자를 만들고, 음수 값(예: - 10px)은 그림자를 위쪽으로 치우칩니다.
흐림: 연화 반경을 설정합니다. 기본값은 0이며, 이는 흐림이 없음을 의미합니다. 양수 값은 흐림을 증가시키고 음수 값은 실제로 그림자를 축소시킵니다. 이 속성의 기본값은 0입니다.
clolor(색상): 그림자 색상을 설정하는 색상 값입니다.

알림: 이 속성은 그림, Div, SPAN, P 태그 등과 같은 모든 요소에 추가될 수 있습니다.

특정 그림자 예시를 살펴보겠습니다. 다음은 효과 및 특정 코드의 예시입니다.

<html xmlns="http://www.phpernote.com/">
<head>
<title>CSS3阴影效果实例</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#shadow {
box-shadow: 10px 10px 5px #888888;
width:500px;
padding:5px;
text-align:center;
font-size:20px;
background:#21759b;
margin:0 auto;
color:#ffffff;
}
</style>
</head>
<body>
<div id="shadow">矩形的 CSS3 的阴影</div>
</body>
</html>

위는 CSS3에 대한 간단한 튜토리얼입니다. 모두에게 도움이 되기를 바랍니다.

CSS3를 활용한 그림자 효과 구현 예

관련 기사