CSS를 사용하여 텍스트 그림자를 만드는 것이 이미지에 적합합니까?

青灯夜游
풀어 주다: 2022-09-06 17:29:51
원래의
1043명이 탐색했습니다.

해당 사항 없음, 텍스트 그림자 "text-shadow"는 텍스트에만 적용할 수 있으며 이미지에는 작동하지 않습니다. 그림에 그림자 효과를 추가하려면 두 가지 방법이 있습니다. 1. 상자 그림자 테두리 그림자를 사용합니다. "상자 그림자: 수평 그림자 수직 그림자 흐림 확산 색상 삽입" 2. 필터 필터를 사용합니다. 구문 "filter:drop -shadow(수평 그림자 수직 그림자 흐림 확산 색상);".

CSS를 사용하여 텍스트 그림자를 만드는 것이 이미지에 적합합니까?

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

Css 생성 텍스트 그림자가 이미지에는 작동하지 않습니다.

텍스트 그림자 "text-shadow"는 텍스트 텍스트에만 적용할 수 있으며 이미지에는 작동하지 않습니다.

    css文本阴影text-shadow  

文本阴影!

CSS를 사용하여 텍스트 그림자를 만드는 것이 이미지에 적합합니까?
로그인 후 복사

CSS를 사용하여 텍스트 그림자를 만드는 것이 이미지에 적합합니까?

텍스트에는 그림자 효과가 있는 것을 볼 수 있지만 사진에서는 그렇지 않습니다.

이미지에 그림자 효과를 추가하려면 두 가지 방법이 있습니다:

  • box-shadow attribute

  • filter:drop-shadow()

다음에 소개하겠습니다

1. box -shadow 속성을 사용하세요.

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

구문:box-shadow: h-shadow v-shadow 흐림 확산 색상 삽입;box-shadow: h-shadow v-shadow blur spread color inset;

  • h-shadow 必需。水平阴影的位置。允许负值。

  • v-shadow 必需。垂直阴影的位置。允许负值。

  • blur 可选。模糊距离。

  • spread 可选。阴影的尺寸。

  • color 可选。阴影的颜色。请参阅 CSS 颜色值。

  • inset 可选。将外部阴影 (outset) 改为内部阴影。

示例:

     
CSS를 사용하여 텍스트 그림자를 만드는 것이 이미지에 적합합니까?
로그인 후 복사

CSS를 사용하여 텍스트 그림자를 만드는 것이 이미지에 적합합니까?

2、使用filter:drop-shadow()

filter 属性定义了元素(通常是CSS를 사용하여 텍스트 그림자를 만드는 것이 이미지에 적합합니까?)的可视效果(例如:模糊与饱和度)。

drop-shadow()可给图像设置一个阴影效果。阴影是合成在图像下面,可以有模糊度的,可以以特定颜色画出的遮罩图的偏移版本。

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

h-shadow 필수입니다. 수평 그림자의 위치입니다. 음수 값이 허용됩니다.CSS를 사용하여 텍스트 그림자를 만드는 것이 이미지에 적합합니까?

v-shadow 필수입니다. 수직 그림자의 위치입니다. 음수 값이 허용됩니다.

흐림 선택사항. 퍼지 거리. 확산 선택사항. 그림자의 크기. 색상은 선택사항입니다. 그림자의 색상입니다. CSS 색상 값을 참조하세요. 삽입 선택 사항입니다. 외부 그림자(시작)를 내부 그림자로 변경합니다. 예:
img { -webkit-filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, .5)); /*考虑浏览器兼容性:兼容 Chrome, Safari, Opera */ filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, .5)); }
로그인 후 복사
2. png2. 필터 사용:drop-shadow() 필터 속성은 요소(일반적으로 CSS를 사용하여 텍스트 그림자를 만드는 것이 이미지에 적합합니까?)의 시각적 효과(예: 흐림 및 채도)를 정의합니다. drop-shadow()는 이미지에 그림자 효과를 설정할 수 있습니다. 그림자는 이미지 아래에 합성되며 흐릿해질 수 있으며 특정 색상으로 칠할 수 있는 매트의 오프셋 버전입니다. 구문: filter:drop-shadow(h-shadow v-shadow Blur Spread color);예: rrreee(동영상 공유 학습: 웹 프론트엔드 개발 )

위 내용은 CSS를 사용하여 텍스트 그림자를 만드는 것이 이미지에 적합합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
css
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!