css3: 阴影 text-shadow、box-shadow

__畫戟__

已于 2022-05-03 15:02:19 修改

阅读量148

点赞数 1

分类专栏： CSS 文章标签： css3 css text-shadow box-shadow css3 阴影

于 2022-05-03 14:55:12 首次发布

本文链接：https://blog.csdn.net/qq_41887214/article/details/124554446

版权

CSS 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

文章目录

文字阴影 text-shadow
- 示例
- - 水平偏移阴影
  - 垂直偏移阴影
盒子阴影 box-shadow

文字阴影 text-shadow

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

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊的距离。
color	可选。阴影的颜色。参阅 CSS 颜色值。

示例

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .hello {
        text-align: center;
        font-size: 100px;
    }
  </style>
</head>
<body>
  <p class="hello">Hello world !</p>
</body>
</html>

在这里插入图片描述

水平偏移阴影

text-shadow: 3px 0px 3px red;	text-shadow: -3px 0px 3px red;

垂直偏移阴影

text-shadow: 0px 3px 3px red;	text-shadow: -3px 0px 3px red;

盒子阴影 box-shadow

语法

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

值	说明
h-shadow	必需的。水平阴影的位置。允许负值
v-shadow	必需的。垂直阴影的位置。允许负值
blur	可选。模糊距离
spread	可选。阴影的大小
color	可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset	可选。从外层的阴影（开始时）改变阴影内侧阴影

示例

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>box-shadow</title>
  <style>
    .box {
        width: 200px;
        height: 200px;
        margin: 0 auto;
        background-color: olivedrab;
    }
  </style>
</head>
<body>
 <div class="box"></div>
</body>
</html>