HTML의 그림자 스타일 코드는 무엇입니까-프런트엔드 Q&A-php.cn

文本阴影！

집

웹 프론트엔드

프런트엔드 Q&A

HTML의 그림자 스타일 코드는 무엇입니까

青灯夜游

Sep 23, 2022 pm 04:32 PM

html 그림자

스타일 코드: 1. 텍스트 그림자 스타일 "text-shadow: h-shadow v-shadow 흐림 색상;" 2. 테두리 그림자 스타일 "box-shadow: h-shadow v-shadow 흐림 확산 색상 삽입;"; , 그림 그림자 스타일 "filter:drop-shadow(h-shadow v-shadow 흐림 확산 색상);".

HTML의 그림자 스타일 코드는 무엇입니까

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

html에서는 요소에 그림자 스타일을 추가하는 세 가지 방법이 있습니다.

텍스트 그림자: text-shadow 속성을 사용합니다.
테두리 그림자: box-shadow 속성을 사용합니다.
이미지 그림자: 사용 필터 속성 (drop-shadow() 함수와 함께 사용해야 함)

1. 텍스트 그림자 스타일

HTML에서는 text-shadow 속성을 사용하여 그림자 텍스트를 구현할 수 있습니다. 음영 처리된 텍스트에는 text-shadow 속성이 적용됩니다.

Syntax

text-shadow: h-shadow v-shadow blur color;

로그인 후 복사

Value	Description
h-shadow	필수입니다. 수평 그림자의 위치입니다. 음수 값이 허용됩니다.
v-shadow	필수입니다. 수직 그림자의 위치입니다. 음수 값이 허용됩니다.
blur	선택 사항입니다. 퍼지 거리.
색상	선택사항. 그림자의 색상입니다.

참고: text-shadow 속성은 하나 이상의 그림자 텍스트를 연결합니다. 속성은 2~3개의 길이 값과 선택적 색상 값을 쉼표로 구분하여 지정하는 그림자입니다. 만료된 길이는 0입니다.

예:

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

로그인 후 복사

Rendering:

HTML의 그림자 스타일 코드는 무엇입니까

2. 테두리 그림자 스타일

HTML에서는 box-shadow 속성을 사용하여 그림자 스타일로 테두리를 구현할 수 있습니다. box-shadow 속성은 하나 이상의 드롭다운 섀도우 상자를 설정할 수 있습니다.

Syntax

box-shadow: h-shadow v-shadow blur spread color inset;

로그인 후 복사

Value	Description
h-shadow	필수입니다. 수평 그림자의 위치입니다. 음수 허용
v-shadow	필수입니다. 수직 그림자의 위치입니다. 음수 허용
blur	선택사항입니다. 거리를 흐리게
확산	선택사항입니다. 그림자의 크기
color	는 선택사항입니다. 그림자의 색상입니다.
삽입	선택 사항입니다. 외부 그림자에서 내부 그림자로 그림자 변경(시작 시)

注意：boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。

示例：

<!DOCTYPE html>
<html>
	<head>
		<style>
			div {
				width: 300px;
				height: 100px;
				background-color:red;
				-moz-box-shadow: 10px 10px 5px #888888;
				/* 老的 Firefox */
				box-shadow: 10px 10px 5px #888888;
			}
		</style>
	</head>
	<body>

		<div>边框阴影</div>

	</body>
</html>

로그인 후 복사

效果图：

HTML의 그림자 스타일 코드는 무엇입니까

3、图片阴影样式

在html中，可使用filter属性来实现带阴影样式的边框。

filter 属性定义了元素(通常是 HTML의 그림자 스타일 코드는 무엇입니까 )的可视效果，当和drop-shadow()函数一起使用，可给图像设置一个阴影效果。

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

로그인 후 복사

阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本。函数接受(在CSS3背景中定义)类型的值，除了"inset"关键字是不允许的。该函数与已有的box-shadow box-shadow属性很相似；不同之处在于，通过滤镜，一些浏览器为了更好的性能会提供硬件加速。参数如下：

h-shadow v-shadow (必须)
这是设置阴影偏移量的两个值. 设定水平方向距离. 负值会使阴影出现在元素左边. 设定垂直距离.负值会使阴影出现在元素上方。查看可能的单位.
如果两个值都是0, 则阴影出现在元素正后面 (如果设置了 and/or ，会有模糊效果).
(可选)
这是第三个code>值. 值越大，越模糊，则阴影会变得更大更淡.不允许负值若未设定，默认是0 (则阴影的边界很锐利).
(可选)
这是第四个值. 正值会使阴影扩张和变大，负值会是阴影缩小.若未设定，默认是0 (阴影会与元素一样大小).
注意: Webkit, 以及一些其他浏览器不支持第四个长度，如果加了也不会渲染。
(可选)
查看该值可能的关键字和标记。若未设定，颜色值基于浏览器。在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="/static/imghw/default1.png"  data-src="pineapple.jpg"  class="lazy"   alt="Pineapple"    style="max-width:90%"  style="max-width:90%">

</body>
</html>

로그인 후 복사

HTML의 그림자 스타일 코드는 무엇입니까