CSS3에 구현된 그림자 속성은 무엇입니까?-프런트엔드 Q&A-php.cn

CSS3에 구현된 그림자 속성은 무엇입니까?

青灯夜游

풀어 주다： 2022-02-25 18:20:46

원래의

13899명이 탐색했습니다.

css3에 구현된 그림자 속성은 다음과 같습니다: 1. 텍스트 그림자 효과를 얻을 수 있는 text-shadow 속성 2. 테두리 그림자 효과를 얻을 수 있는 box-shadow 속성 3. 함께 사용해야 하는 필터 속성 drop-shadow() 함수를 사용하면 이미지에 그림자 효과를 설정할 수 있습니다.

CSS3에 구현된 그림자 속성은 무엇입니까?

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

css3은 그림자 속성을 구현합니다

1. text-shadow 속성---텍스트 그림자 효과를 구현합니다.

text-shadow 속성은 그림자가 있는 텍스트를 설정하는 데 사용됩니다. 거리와 그림자 색상.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css设置文本阴影效果</title> 
        <style> 
            h1 { 
                color: red; 
                text-shadow: 3px 5px 5px #656B79; 
            }
        </style> 
    </head> 
    <body> 
        <h1>文本阴影！</h1>
    </body> 
</html>

로그인 후 복사

CSS3에 구현된 그림자 속성은 무엇입니까?

2. box-shadow 속성 - 테두리 그림자 효과를 얻기 위해

box-shadow 속성은 텍스트 상자에 그림자를 적용할 수 있으며 그림자의 픽셀 길이, 너비 및 흐림 거리도 설정할 수 있습니다. 그림자 색상 그대로.

box-shadow는 요소에 그림자를 추가하여 하나 이상의 추가를 지원할 수 있습니다.

box-shadow: X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色 投影方式;

로그인 후 복사

매개변수:

CSS3에 구현된 그림자 속성은 무엇입니까?

참고: 삽입은 첫 번째 또는 마지막 매개변수에 쓸 수 있으며 다른 위치는 유효하지 않습니다.

그림자 흐림 반경:

이 매개변수는 선택사항입니다. 값이 0이면 그림자에 흐림 효과가 없음을 의미합니다. 값이 클수록 그림자의 가장자리가 더 흐릿해집니다.

css 코드:

#box{
     width:50px;
     height:50px;
     background:#fff;
     box-shadow:4px 4px 15px #666;
 }

로그인 후 복사

효과:

CSS3에 구현된 그림자 속성은 무엇입니까?

그림자 확장 반경:

이 매개변수는 선택 사항이며 값은 양수 또는 음수일 수 있습니다. 값이 양수이면 전체 그림자가 확장되고, 그렇지 않으면 값은 음수일 때 감소합니다.

css 코드:

#box{
     width:50px;
     height:50px;
     background:#fff;
     box-shadow:4px 4px 15px -3px #666;
}

로그인 후 복사

효과:

CSS3에 구현된 그림자 속성은 무엇입니까?

X축 오프셋 및 Y축 오프셋 값을 음수로 설정할 수 있습니다.

X축 오프셋은 음수입니다.

#box{
    width:50px;
    height:50px;
    background:#fff;
    box-shadow:-5px 5px 5px #666;
}

로그인 후 복사

효과:

CSS3에 구현된 그림자 속성은 무엇입니까?

Y축 오프셋이 음수:

#box{
    width:50px;
    height:50px;
    background:#fff;
    box-shadow:5px -5px 5px #666;
}

로그인 후 복사

효과:

CSS3에 구현된 그림자 속성은 무엇입니까?

외부 그림자:

#box{
     width:50px;
     height:50px;
     background:green;
     box-shadow:5px 4px 10px #666;
}

로그인 후 복사

효과:

내부 그림자:

#box{
     width:50px;
     height:50px;
     background:#fff;
     box-shadow:5px 4px 10px #666 inset;
}

로그인 후 복사

효과:

여러 그림자 추가:

#box{
     width:50px;
     height:50px;
     background:#fff;
     box-shadow:5px 4px 10px #666 inset,
                3px 3px 5px pink,
                6px 4px 2px green;
}

로그인 후 복사

효과:

CSS3에 구현된 그림자 속성은 무엇입니까?

3. 필터 속성

필터 속성은 drop-shadow()와 함께 사용될 때 요소의 시각적 효과(일반적으로 CSS3에 구현된 그림자 속성은 무엇입니까? )를 정의합니다. 기능 이미지에 그림자 효과를 설정하기 위해 함께 사용됩니다.

filter:drop-shadow(h-shadow v-shadow blur spread color);

로그인 후 복사

그림자는 이미지 아래에 합성되고 흐림 효과가 있을 수 있으며 특정 색상으로 칠할 수 있는 마스크의 오프셋 버전입니다. 이 함수는 "inset" 키워드가 허용되지 않는다는 점을 제외하고 유형(CSS3 컨텍스트에 정의됨)의 값을 허용합니다. 이 기능은 기존의 box-shadow box-shadow 속성과 매우 유사합니다. 차이점은 필터를 통해 일부 브라우저는 더 나은 성능을 위해 하드웨어 가속을 제공한다는 것입니다. 매개변수는 다음과 같습니다.

h-shadow v-shadow (필수)
섀도우 오프셋을 설정하는 두 개의 값입니다. 수평 방향 거리를 설정합니다. 음수 값은 요소의 왼쪽에 그림자가 나타나게 하며, 음수 값은 요소 위에 그림자가 나타나게 합니다. 에 가능한 단위를 확인하세요.
두 값이 모두 0이면 그림자가 요소 바로 뒤에 나타납니다( 및/또는 가 설정된 경우). 블러 효과가 있을 것입니다).
(선택 사항)
이것은 세 번째 코드> 값이 클수록 그림자가 더 흐려집니다. 음수 값은 허용되지 않습니다. 설정하지 않으면 기본값은 0입니다(그림자의 경계가 매우 선명함).
查看该值可能的关键字和标记。若未设定，颜色值基于浏览器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中，会应用colorcolor属性的值。另外, 如果颜色值省略，WebKit中阴影是透明的。

<!DOCTYPE html>
<html>
<head>
<style>
img {
    -webkit-filter: drop-shadow(8px 8px 10px red); /* Chrome, Safari, Opera */
    filter: drop-shadow(8px 8px 10px red);
}
</style>
</head>
<body>

<p>给图像设置一个阴影效果:</p>

<img src="pineapple.jpg" alt="Pineapple" width="300"    style="max-width:90%">

</body>
</html>

로그인 후 복사

CSS3에 구현된 그림자 속성은 무엇입니까?