CSS 그림자 효과: CSS 테두리 그림자를 설정하는 방법은 무엇입니까?
- 不言원래의
- 2018-09-05 17:20:0610508검색
웹 디자인 과정에서 디자인한 웹 페이지를 더욱 아름답게 만들기 위해 웹 페이지에 몇 가지 특수 효과를 설정해야 하는 경우가 많습니다. 이 글에서는 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>효과는 다음과 같습니다.
프레임에 그림자 효과를 추가하면 더욱 입체적이고 아름답습니다. ...^@^ )
설명: 위 코드에서 box-shadow 뒤에 4개의 속성 값이 있다는 것을 알 수 있습니다.
box-shadow 속성 값의 의미를 살펴보겠습니다. (권장: CSS 테두리 속성 예)
box-shadow는 상자에 하나 이상의 그림자를 추가합니다.
이 속성은 쉼표로 구분된 그림자 목록이며, 각 그림자는 2~4개의 길이 값, 선택적 색상 값 및 선택적 삽입 키워드로 지정됩니다. 생략된 길이의 값은 0입니다.
| 값 |
의미 |
| h-shadow |
이 필요합니다. 수평 그림자의 위치입니다. 음수 값이 허용됩니다. |
| v-shadow |
필수입니다. 수직 그림자의 위치입니다. 음수 값이 허용됩니다. |
| blur |
선택 사항입니다. 퍼지 거리. |
| 확산 |
선택사항. 그림자의 크기. |
| 색상 | 선택사항. 그림자의 색상입니다. |
| 삽입 |
선택사항. 외부 그림자(시작)를 내부 그림자로 변경합니다. |
각 속성 값의 의미를 살펴보면 위 예시에서 설정한 그림자 효과를 알 수 있습니다. box-shadow 속성 뒤의 4가지 속성 값은 h-shadow, v-shadow 입니다. , 흐림, 색상.
CSS에서 얻을 수 있는 멋진 효과가 많이 있습니다. CSS 그림자 효과에 대해 더 알고 싶다면 PHP 중국어 웹사이트의 CSS3 최신 버전 참조 매뉴얼
CSS3 최신 버전 참조를 참조하세요. manual
관련 권장 사항 :
CSS3 입력 상자 그림자 효과 및 기타 그림자 효과_html/css_WEB-ITnose
css Shadow_html/css_WEB-ITnose가 필요한 효과
위 내용은 CSS 그림자 효과: CSS 테두리 그림자를 설정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!