CSS3를 사용하여 끊임없이 변화하는 텍스트 그림자 텍스트 그림자 효과 디자인 달성-CSS 튜토리얼-php.cn

CSS3를 사용하여 끊임없이 변화하는 텍스트 그림자 텍스트 그림자 효과 디자인 달성

高洛峰

풀어 주다： 2017-03-13 17:37:18

원래의

2134명이 탐색했습니다.

이 글에서는 CSS3를 사용하여 끊임없이 변화하는 텍스트 그림자 텍스트 그림자 효과 디자인을 구현하는 관련 정보를 주로 소개합니다. 관심 있는 친구들은

이 기사의 예를 참조할 수 있습니다. 모두를 위해 끊임없이 변화하는 CSS3의 text-shadow 텍스트 그림자 효과 예시를 참고하세요. 구체적인 내용은 다음과 같습니다.

구문:

없음 ||없음|[,]*
또는
없음||[, ]*

값에 대한 간략한 설명:

은 색상을 나타냅니다.

은 부동 소수점 숫자와 단위 식별자(음수가 될 수 있음) 값은 그림자의 수평 확장 거리를 지정합니다.

은 부동 소수점 숫자와 단위 식별자로 구성된 길이 값을 나타내며 음수 값이 될 수 없습니다. , 흐림 효과의 거리를 지정합니다. 흐림 효과만 필요한 경우 처음 두 길이를 0으로 설정하세요.

예:

<style type="text/css">   
p{   
    text-align:center;   
    margin:0;   
    font-family:helvetica,arial,sans-serif;   
    color:#999;   
    font-size:80px;   
    font-weight:bold;   
    text-shadow:0.1em 0.1em #333;//右下角阴影   
    text-shadow:-0.1em -0.1em #333;//左上角阴影   
    text-shadow:-0.1em 0.1em #333;//左下角阴影   
    text-shadow:0.1em 0.1em 0.3em #333;//增加模糊效果的阴影   
    text-shadow:0.1em 0.1em 0.3em black;//定义文本阴影效果   
}   
</style>

로그인 후 복사

CSS3를 사용하여 끊임없이 변화하는 텍스트 그림자 텍스트 그림자 효과 디자인 달성

**간단한 요약: **text-shadow속성 첫 번째 값은 수평 변위를 나타내고, 두 번째 값은 수직 변위를 나타내며, 양수 값은 위쪽 또는 왼쪽을 나타내고, 세 번째 값은 선택 사항입니다. 네 번째 값은 그림자의 색상을 나타냅니다. 이 값은 선택 사항입니다.

예: 그림자를 통해 전경색과 배경색의 대비를 높입니다

p{   
    text-align:center;   
    margin:150px auto;   
    font-family:helvetica,arial,sans-serif;   
    font-size:80px;   
    font-weight:bold;   
    color:#fff;//设置文字颜色   
    text-shadow:0.1em 0.1em 0.3em black;//通过阴影增加前景色和背景色的对比   

}

로그인 후 복사

요약:

그림자 오프셋은 텍스트까지의 거리에서 두 개의 값으로 지정됩니다. 첫 번째 길이 값은 텍스트 오른쪽의 수평 거리를 지정하고, 음수 값은 텍스트 왼쪽에 그림자를 배치합니다. 두 번째 길이 값은 텍스트 하단 가장자리로부터의 수직 거리를 지정합니다. 음수 값은 텍스트 위에 그림자를 배치합니다.

그림자가 오프셋된 후 흐림 반경을 지정할 수 있습니다. 흐림 반경은 흐림 효과의 범위를 지정하는 길이 값입니다.

그림자 효과의 길이 값 앞이나 뒤에 색상 값을 지정할 수도 있습니다. 색상 값은 그림자 효과의 기초로 사용됩니다. 색상을 지정하지 않으면 색상 속성 값이 대신 사용됩니다.

예: 복잡한 텍스트 효과 시뮬레이션

p{   
    text-align:center;   
    margin:0;   
    padding:24px;   
    font-family:helvetica,arial,sans-serif;   
    font-size:80px;   
    font-weight:bold;   
    color:#000;//设置文字颜色   
    background:#000;//设置背景颜色   
    text-shadow:0 0 4px white,    
                0 -5px 4px #ff3,   
                2px -10px 6px #fd3,   
                -2px -15px 11px #f80,   
                2px -25px 18px #f20;//使用阴影叠加出燃烧的文字特效   
}

로그인 후 복사

CSS3를 사용하여 끊임없이 변화하는 텍스트 그림자 텍스트 그림자 효과 디자인 달성