>  기사  >  웹 프론트엔드  >  CSS3에서 box-shadow는 무엇을 의미합니까?

CSS3에서 box-shadow는 무엇을 의미합니까?

青灯夜游
青灯夜游원래의
2022-02-28 16:50:156807검색

CSS3에서 "box-shadow"는 요소에 테두리 그림자를 추가하는 새로운 속성인 "상자 그림자"를 의미합니다. 이 속성은 상자에 하나 이상의 그림자를 추가할 수 있습니다. 구문은 "box-shadow: 수평 그림자 수직"입니다. 그림자 흐림 거리 크기 색상 삽입;".

CSS3에서 box-shadow는 무엇을 의미합니까?

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

CSS3에서 box-shadow는 무엇을 의미합니까?

CSS3에서 "box-shadow"는 "상자 그림자"를 의미하며 요소에 테두리 그림자를 추가하는 새로운 속성입니다.

CSS3에서 box-shadow는 무엇을 의미합니까?

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

참고: border-image-* 속성을 사용하여 아름답고 확장 가능한 버튼을 만드세요!

구문: ​​

box-shadow: h-shadow v-shadow blur spread color inset;

box-shadow 상자에 하나 이상의 그림자를 추가합니다. 이 속성은 쉼표로 구분된 그림자 목록으로, 각각 2~4개의 길이 값, 선택적 색상 값 및 선택적 inset 키워드로 지정됩니다. 생략된 길이의 값은 0입니다.

  • h-섀도우가 필요합니다. 수평 그림자의 위치입니다. 음수 값이 허용됩니다.

  • v-섀도우가 필요합니다. 수직 그림자의 위치입니다. 음수 값이 허용됩니다.

  • 흐림 선택사항. 퍼지 거리.

  • 확산은 선택사항입니다. 그림자의 크기.

  • 색상은 선택사항입니다. 그림자의 색상입니다. CSS 색상 값을 참조하세요.

  • 삽입은 선택사항입니다. 외부 그림자(시작)를 내부 그림자로 변경합니다.

다음은 제가 모두를 위해 수행한 몇 가지 작은 테스트입니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style> 
div
{
	width:300px;
	height:100px;
	background-color:yellow;
	box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>

<div></div>

</body>
</html>

실행 결과:
CSS3에서 box-shadow는 무엇을 의미합니까?

"폴라로이드" 사진을 만들고 사진을 회전하는 방법도 연습했습니다. 예:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style> 
body
{
	margin:30px;
	background-color:#E9E9E9;
}

div.polaroid
{
	width:294px;
	padding:10px 10px 20px 10px;
	border:1px solid #BFBFBF;
	background-color:white;
	/* Add box-shadow */
	box-shadow:2px 2px 3px #aaaaaa;
}

div.rotate_left
{
	float:left;
	-ms-transform:rotate(7deg); /* IE 9 */
	-webkit-transform:rotate(7deg); /* Safari and Chrome */
	transform:rotate(7deg);
}

div.rotate_right
{
	float:left;
	-ms-transform:rotate(-8deg); /* IE 9 */
	-webkit-transform:rotate(-8deg); /* Safari and Chrome */
	transform:rotate(-8deg);
}
</style>
</head>
<body>

<div class="polaroid rotate_left">
<img src="pulpitrock.jpg" alt="" width="284"    style="max-width:90%">
<p class="caption">The pulpit rock in Lysefjorden, Norway.</p>
</div>

<div class="polaroid rotate_right">
<img src="cinqueterre.jpg" alt="" width="284"    style="max-width:90%">
<p class="caption">Monterosso al Mare. One of the five villages in Cinque Terre.</p>
</div>


</body>
</html>

실행 결과는 다음과 같습니다.

CSS3에서 box-shadow는 무엇을 의미합니까?

·박스 그림자에는 내부 그림자, 외부 그림자, 삼면 그림자, 양면 그림자, 단면 그림자 등 다양한 종류의 상자 그림자 그림자가 있습니다. 양면 그림자, 서양 획... ···,

의미:

CSS3에서 box-shadow는 무엇을 의미합니까? 예:

<div class="flex">
  <div class="flex-item">
    <h3>内阴影示例</h3>
    <div class="box boxshadow1"></div>
  </div>
  <div class="flex-item">
    <h3>3边内影示例</h3>
    <div class="box boxshadow2"></div>
  </div>
  <div class="flex-item">
    <h3>外阴影示例</h3>
    <div class="box boxshadow3"></div>
  </div>
  <div class="flex-item">
    <h3>右下外阴影示例</h3>
    <div class="box boxshadow4"></div>
  </div>
  <div class="flex-item">
    <h3>扩大阴影示例</h3>
    <div class="box boxshadow5"></div>
  </div>
  <div class="flex-item">
    <h3>半透明阴影色示例</h3>
    <div class="box boxshadow6"></div>
  </div>
</div>

css:

.flex{display:flex;flex-wrap:wrap;} 
.flex-item{margin-right:30px;}

.box {  background-color: #CCCCCC; border-radius:10px; width: 200px; height: 200px;  }
.boxshadow1{ box-shadow:inset 0px 0px 5px 1px #000; }
.boxshadow2{ box-shadow:inset 0 1px 2px 1px #000; }
.boxshadow3{box-shadow:0 0 10px #000;}
.boxshadow4{box-shadow:2px 2px 5px #000;}
.boxshadow5{box-shadow:0 0 5px 15px #000;}
.boxshadow6{box-shadow: 12px 12px 2px 1px rgba(0, 0, 255, .2);}

실행 결과:

CSS3에서 box-shadow는 무엇을 의미합니까?

(동영상 공유 학습: css 동영상 튜토리얼 , 웹 프론트엔드 입문 튜토리얼 )

위 내용은 CSS3에서 box-shadow는 무엇을 의미합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.