CSS3에서 상자 그림자를 사용하여 테두리 그림자를 만드는 방법은 무엇입니까? (코드 튜토리얼)-CSS 튜토리얼-php.cn

CSS3에서 상자 그림자를 사용하여 테두리 그림자를 만드는 방법은 무엇입니까? (코드 튜토리얼)

云罗郡主

풀어 주다： 2018-10-23 16:59:35

앞으로

2547명이 탐색했습니다.

이 기사에서는 CSS3에서 상자 그림자를 사용하여 테두리 그림자를 만드는 방법을 설명합니다. (코드 튜토리얼)에는 특정 참고 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

box-shadow 속성 소개

테두리 그림자는 매우 일반적인 특수 효과입니다.

과거 CSS2.1에서는 위 그림처럼 요소에 테두리 그림자를 추가하려면 배경 이미지를 통해서만 가능했습니다.

CSS3에서는 box-shadow 속성을 사용하여 요소에 그림자 효과를 쉽게 추가할 수 있습니다.

구문:

box-shadow：x-shadow  y-shadow  blur  spread  color  inset;

로그인 후 복사

설명:

(1) x-shadow: 수평 그림자(X축)의 위치를 설정합니다. 음수 값을 사용할 수 있습니다.

(2) y-shadow: 그림자의 위치를 설정합니다. 수직 그림자(y축)), 음수 값을 사용할 수 있습니다.

(3) 흐림: 그림자 흐림 반경을 설정합니다.

(4) 확산: 반경을 확장하고 그림자의 크기를 설정합니다. color: 그림자의 색상을 설정합니다.

(6 ) inset: 이 매개변수는 기본적으로 설정되지 않습니다. 기본값은 외부 그림자이고 삽입은 내부 그림자를 의미합니다.

예:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 box-shadow属性</title>
    <style type="text/css">
    #div1
    {
        width:200px;
        height:100px;
        border:1px solid silver;
        box-shadow:5px 5px 8px red;
    }
    </style>
</head>
<body>
    <div id="div1">
    </div>
</body>
</html>

로그인 후 복사

브라우저의 미리보기 효과는 다음과 같습니다.

CSS3에서 상자 그림자를 사용하여 테두리 그림자를 만드는 방법은 무엇입니까? (코드 튜토리얼)

수평 그림자 위치 x-shadow 및 수직 그림자 위치 y-shadow

수평 그림자 위치 x-shadow 및 수직 그림자 위치 y-shadow 속성 값, 단위는 px, em, 백분율 등이 가능합니다. 음수 값도 허용됩니다.

예:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 box-shadow属性</title>
    <style type="text/css">
    #div1
    {
        width:200px;
        height:100px;
        border:1px solid silver;
        box-shadow:-5px -5px 8px red;
    }
    </style>
</head>
<body>
    <div id="div1">
    </div>
</body>
</html>

로그인 후 복사

브라우저에서 미리보기 효과는 다음과 같습니다.

CSS3에서 상자 그림자를 사용하여 테두리 그림자를 만드는 방법은 무엇입니까? (코드 튜토리얼) 위는 CSS3에서 box-shadow를 사용하여 테두리 그림자를 만드는 방법입니다. (코드 튜토리얼) 전체 소개,