<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>p115</title>
<style>
.box-shadow1{
box-shadow:0px 0px 1000px 50px yellow;
width:300px;
height:200px;
margin:200px auto;
border:1px solid black;
text-align:center;
}
p{
text-shadow:2px 2px 3px skyblue;
}
</style>
</head>
<body>
<div class="box-shadow1">
<p>方块阴影属性</p>
</div>
</body>
</html>
box-shadow 和 text-shadow 是 CSS 属性，分别用于给元素盒子和文本添加阴影效果。以下是这两个属性的基本用法：
box-shadow
box-shadow 属性用于在元素的边框外部添加阴影效果。其基本语法如下：
css复制代码
box-shadow: h-offset v-offset blur spread color inset; |
h-offset：水平阴影的位置。正值将阴影放在元素右边，负值放在左边。v-offset：垂直阴影的位置。正值将阴影放在元素底部，负值放在顶部。blur：模糊距离。其值越大，阴影边缘就越模糊。spread：阴影的尺寸。正值会增加阴影的扩展范围，负值会减小阴影的尺寸。color：阴影的颜色。inset：如果设置了这个值，阴影会在元素内部绘制，而不是外部。
示例：
css复制代码
div { | |
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75); | |
} |
text-shadow
text-shadow 属性用于给文本添加阴影效果。其基本语法如下：
css复制代码
text-shadow: h-offset v-offset blur color; |
h-offset：水平阴影的位置。正值将阴影放在文本右边，负值放在左边。v-offset：垂直阴影的位置。正值将阴影放在文本底部，负值放在顶部。blur：模糊距离。color：阴影的颜色。
示例：
css复制代码
h1 { | |
text-shadow: 2px 2px 4px #000000; | |
} |
在这个例子中，h1 元素的文本将具有一个向右和向下偏移2像素，模糊度为4像素的黑色阴影。
这两个属性都支持多阴影效果，你可以通过逗号分隔每个阴影定义来添加多个阴影。例如：
css复制代码
div { | |
box-shadow: 3px 3px 5px 6px #ccc, -3px -3px 5px 6px #f00; | |
} | |
h1 { | |
text-shadow: 3px 3px 5px #000, -3px -3px 5px #f00; | |
} |
316
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
