HTML의 그림자 스타일 코드는 무엇입니까
- 青灯夜游원래의
- 2022-09-23 16:32:135132검색
스타일 코드: 1. 텍스트 그림자 스타일 "text-shadow: h-shadow v-shadow 흐림 색상;" 2. 테두리 그림자 스타일 "box-shadow: h-shadow v-shadow 흐림 확산 색상 삽입;"; , 그림 그림자 스타일 "filter:drop-shadow(h-shadow v-shadow 흐림 확산 색상);".
이 튜토리얼의 운영 환경: 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>文本阴影！</h1>
</body>
</html>Rendering:
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>效果图：
3、图片阴影样式
在html中，可使用filter属性来实现带阴影样式的边框。
filter 属性定义了元素(通常是)的可视效果，当和drop-shadow()函数一起使用，可给图像设置一个阴影效果。
filter:drop-shadow(h-shadow v-shadow blur spread color);
阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本。 函数接受
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="pineapple.jpg" alt="Pineapple" width="300" style="max-width:90%">
</body>
</html>
（学习视频分享：css视频教程）
위 내용은 HTML의 그림자 스타일 코드는 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!