CSS3에서 그림자 효과를 만드는 방법에 대한 자세한 설명 [코드 예]-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS3에서 그림자 효과를 만드는 방법에 대한 자세한 설명 [코드 예]

藏色散人

Sep 04, 2018 pm 04:11 PM

주요 웹사이트를 탐색하다 보면 가끔 다양한 입체적인 사진을 보게 될 것입니다. 이러한 사진은 분명히 사람들의 관심을 끌 수 있습니다. 따라서 이러한 사진 디스플레이의 경우 일부 친구들은 분명히 PS art가 디자인한 것이라고 생각할 것입니다. 물론 PS는 강력한 도구이므로 이런 효과를 만드는 것은 쉽습니다.

그러나 이 기사에서는 그림자를 만드는 더 좋고 빠른 방법을 소개할 것입니다. CSS3 스타일 속성을 사용하여 다양한 상자 그림자를 만드는 것입니다. 웹 페이지를 직접 개발할 때 CSS3 Create에서 box-shadow 속성을 마스터할 수 있습니다. 다양한 그림자 효과.

아래에서는 구체적인 boxshadow 그림자 효과 예시 코드를 통해 하나씩 자세히 소개하겠습니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>boxshadow阴影效果实例</title>
    <style>
        .demo1{
            width:100px;
            height:100px;
            background-color: #3262ff;
             box-shadow: 5px 5px 5px black;
        }
        .demo2{
            margin-top: 20px;
            width:100px;
            height:100px;
            background-color: #ccccff;
            box-shadow: 5px 5px 5px 5px black;
        }
        .demo3{
            margin-top: 20px;
            box-shadow: 8px 8px 8px -8px black;
            width:100px;
            height:100px;
            background-color: #1094f2;
        }
        .demo4{
            margin-top: 20px;
            box-shadow: 5px 0px 5px -5px black, -5px 0px 5px -5px black;
            width:100px;
            height:100px;
            background-color: #a7fcff;
        }
        .demo5{
            margin-top: 20px;
            box-shadow: 8px 0px 8px -8px black;
            width:100px;
            height:100px;
            background-color: #029789;
        }
    </style>
</head>
<body>
<div class="demo1">demo1</div>
<div class="demo2">demo2</div>
<div class="demo3">demo3</div>
<div class="demo4">demo4</div>
<div class="demo5">demo5</div>
</body>
</html>

로그인 후 복사

브라우저를 통해 위 코드에 액세스하면 아래와 같은 효과가 나타납니다.

CSS3에서 그림자 효과를 만드는 방법에 대한 자세한 설명 [코드 예]

그런 다음 사진을 결합하여 코드와 함께 자세히 소개하겠습니다. Demo1은 일반적인 div 블록 그림자 효과를 보여줍니다. 모두가 box-shadow 속성을 알아차렸을 것입니다. boxshadow는 상자 그림자를 의미합니다. 즉, CSS3에서는 box-shadow 값을 제어하여 다양한 그림자 효과를 얻을 수 있습니다. 1에서 box-shadow의 값은 5px 5px 5px black입니다. 이는 각각 가로 x축 오프셋, 세로 y축 오프셋, 흐림 반경 및 그림자 색상을 나타냅니다.

demo2의 box-shadow 값은 5px 5px 5px 5px black입니다. 여기서는 각각 x축의 수평 오프셋 양, y축의 수직 오프셋 양, 흐림 반경, 그림자 반경 및 그림자 색상. 여기서 그림자 반경은 양수 값입니다!

데모3의 box-shadow 값은 8px 8px 8px -8px black입니다. 여기서 그림자 반경은 음수 값입니다!

데모4의 box-shadow 값은 5px 0px 5px -5px 검정, -5px 0px 5px -5px 검정입니다. 여기서 효과는 양측 그림자 효과입니다.

demo5의 box-shadow 값은 8px 0px 8px -8px black입니다. 여기에 표시된 것은 단면 그림자 효과입니다.

흐림 반경을 0으로 설정하면 흐릿한 효과가 없으며, 값이 클수록 흐릿해집니다. 그림자 반경 값을 양수로 설정하면 전체 그림자가 확장되고, 값이 음수로 설정되면 축소됩니다.

위는 CSS3에서 boxshadow의 구체적인 사용법, 즉 boxshadow 속성을 사용하여 다양한 그림자 효과를 설정하는 방법을 소개한 것입니다. 예를 들어, 상자 그림자 왼쪽에 그림자가 생기지 않게 하고, 상자 그림자에 단면 그림자를 만들고, 상자 그림자의 모든 면에 그림자를 드리우는 등의 효과를 얻을 수 있습니다.

이 기사에는 참고할만한 가치가 있습니다. 도움이 필요한 친구들에게 도움이 되기를 바랍니다!

위 내용은 CSS3에서 그림자 효과를 만드는 방법에 대한 자세한 설명 [코드 예]의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

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