CSS 그림자 효과: CSS 테두리 그림자를 설정하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

CSS 그림자 효과: CSS 테두리 그림자를 설정하는 방법은 무엇입니까?

不言

풀어 주다： 2018-09-05 17:20:06

원래의

10470명이 탐색했습니다.

웹 디자인 과정에서 디자인한 웹 페이지를 더욱 아름답게 만들기 위해 웹 페이지에 몇 가지 특수 효과를 설정해야 하는 경우가 많습니다. 이 글에서는 CSS를 통해 테두리에 그림자 효과를 설정하는 방법을 소개합니다. 그림자 효과를 사용하면 프레임이 더욱 입체적으로 디자인됩니다. 이제 CSS 테두리 그림자 효과를 설정하는 방법을 자세히 살펴보겠습니다.

테두리 그림자를 설정할 때 필수 속성은 box-shadow입니다. box-shadow는 상자에 하나 이상의 그림자를 추가할 수 있습니다. 아래에서 구체적인 예를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<head>
<style> 
body{margin:30px;background-color:#E9E9E9;}
div.polaroid{width:294px;padding:10px 10px 20px 10px;border:1px solid #BFBFBF;background-color:green;
/* 设置阴影效果 */
box-shadow:5px 5px 6px #090;}
div.rotate_left
{float:left;
-ms-transform:rotate(7deg); /* IE 9 */
-moz-transform:rotate(7deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
-o-transform:rotate(7deg); /* Opera */
transform:rotate(7deg);}
}
</style>
</head>
<body>
<div class="polaroid rotate_left">
<img src="/i/ballade_dream.jpg" alt="郁金香" width="284"    style="max-width:90%" />
<p class="caption">鲜花郁金香，花名：Ballade Dream。</p>
</div>
</body>
</html>

로그인 후 복사

효과는 다음과 같습니다.

CSS 그림자 효과: CSS 테두리 그림자를 설정하는 방법은 무엇입니까?

프레임에 그림자 효과를 추가하면 더욱 입체적이고 아름답습니다. ...^@^ )

설명: 위 코드에서 box-shadow 뒤에 4개의 속성 값이 있다는 것을 알 수 있습니다.

box-shadow 속성 값의 의미를 살펴보겠습니다. (권장: CSS 테두리 속성 예)

box-shadow는 상자에 하나 이상의 그림자를 추가합니다.

이 속성은 쉼표로 구분된 그림자 목록이며, 각 그림자는 2~4개의 길이 값, 선택적 색상 값 및 선택적 삽입 키워드로 지정됩니다. 생략된 길이의 값은 0입니다.

값	의미
h-shadow	이 필요합니다. 수평 그림자의 위치입니다. 음수 값이 허용됩니다.
v-shadow	필수입니다. 수직 그림자의 위치입니다. 음수 값이 허용됩니다.
blur	선택 사항입니다. 퍼지 거리.
확산	선택사항. 그림자의 크기.
색상	선택사항. 그림자의 색상입니다.
삽입	선택사항. 외부 그림자(시작)를 내부 그림자로 변경합니다.