添加 CSS
- 使用 text-align、background、padding-top、color、width 和 height 属性设置 <h1> 元素的样式。
- 按照上述语法添加 box-shadow 属性。
h1 {
text-align: center;
background: #c4c4c4;
padding-top: 50px;
color: #000000;
width: 400px;
height: 120px;
box-shadow: -8px 0px 8px #000000;
}
这是完整的代码。
在元素左侧添加框阴影的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
h1 {
text-align: center;
background: #c4c4c4;
padding-top: 50px;
color: #000000;
width: 400px;
height: 120px;
box-shadow: -8px 0px 8px #000000;
}
</style>
</head>
<body>
<h1>onitroad</h1>
</body>
</html>
在元素底部添加框阴影的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
h1 {
text-align: center;
background: #c4c4c4;
padding-top: 50px;
color: #000000;
width: 400px;
height: 120px;
box-shadow: 0 10px 10px #000000;
}
</style>
</head>
<body>
<h1>onitroad</h1>
</body>
</html>
仅在元素的一侧添加框阴影时，焦点必须位于最后一个值（传播半径）上。
它在水平和垂直方向上减小了框阴影的整体大小。
现在，我们将展示另一个示例，其中我们使用“inset”值在框内创建阴影，因为默认情况下阴影放置在框外。
在元素内添加框阴影的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
h1 {
text-align: center;
background: #c4c4c4;
padding-top: 50px;
color: #000000;
width: 400px;
height: 120px;
box-shadow: 0px 10px 20px #000000 inset;
}
</style>
</head>
<body>
<h1>onitroad</h1>
</body>
</html>
在我们的最后一个示例中，我们在每个呈现元素的一侧同时使用外部和内部阴影。
添加外部和内部阴影的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
body {
background: #ccc;
padding: 20px;
}
.left {
float: left;
margin-left: 20px;
}
.box {
width: 110px;
height: 110px;
background: #fff;
color: #9e9e9e;
margin: 0 auto;
margin-bottom: 20px;
text-align: center;
line-height: 100px;
}
.shadow-bottom {
box-shadow: 0 8px 10px -6px #000000;
}
.shadow-top {
box-shadow: 0 -8px 10px -6px #000000;
}
.shadow-left {
box-shadow: -8px 0 10px -6px #000000;
}
.shadow-right {
box-shadow: 8px 0 10px -6px #000000;
}
.inner-shadow-bottom {
box-shadow: inset 0 8px 10px -6px #000000;
}
.inner-shadow-top {
box-shadow: inset 0 -8px 10px -6px #000000;
}
.inner-shadow-left {
box-shadow: inset 8px 0 10px -6px #000000;
}
.inner-shadow-right {
box-shadow: inset -8px 0 10px -6px #000000;
}
</style>
</head>
<body>
<div class="left">
<div class="shadow-bottom box">bottom</div>
<div class="shadow-top box">top</div>
<div class="shadow-left box">left</div>
<div class="shadow-right box">right</div>
</div>
<div class="left">
<div class="inner-shadow-bottom box">top inset</div>
<div class="inner-shadow-top box">bottom inset</div>
<div class="inner-shadow-left box">left inset</div>
<div class="inner-shadow-right box">right inset</div>
</div>
</body>
</html>
要在元素的一侧设置 box-shadow，请使用 box-shadow 属性。
该属性有四个长度参数和一个颜色。
使用 box-shadow 属性遵循以下语法：
box-shadow: h-offset v-offset blur spread color;
h-offset 水平设置阴影。
正值设置右侧阴影，负值设置左侧阴影。
v-shadow 垂直设置阴影。
正值设置框下方的阴影，负值设置框上方的阴影。
blur 是一个可选属性，用于模糊 box-shadow。
传播设置阴影大小。
color 是一个可选属性，用于设置阴影颜色。
让我们从在元素的左侧创建一个阴影开始。
请按照以下步骤操作。
创建 HTML
- 将 <h1> 元素放在 <body> 标签内。
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
</head>
<body>
<h1>onitroad</h1>
</body>
</html>
日期：2020-06-02 22:14:53 来源：oir作者：oir