css3中阴影分为几类-前端问答-PHP中文网

css3中阴影分为几类

青灯夜游

发布： 2022-03-18 17:51:55

原创

3132人浏览过

css3中阴影分为2类：1、文本阴影，设置语法“text-shadow:水平位置垂直位置模糊距离颜色;”；2、盒子阴影，设置语法“box-shadow:水平位置垂直位置模糊距离 spread 颜色 inset;”。

css3中阴影分为几类

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

CSS3中阴影分为两种：文本阴影text-shadow和盒子阴影box-shadow，这两个属性可以在不添加背景图片的情况下实现阴影的效果，在我们美化网页时提供了很大的便利。那么这两个属性分别怎么用呢？

1. text-shadow

该属性的语法规范是text-shadow: 1px 1px 1px #666;

立即学习“前端免费学习笔记（深入）”；

在讲css阴影属性之前我们先来了解一下阴影有关的常识。

阴影的产生是光照在物体上，会在背光的地方产生阴影。

如下图，是像右和向下产生的阴影：

在这里插入图片描述

下图是向上和向左的阴影

在这里插入图片描述

下面再来看text-shadow属性，属性包括四个值，第一个值是阴影的水平偏移量，第二个值表示垂直偏移量，第三个值表示阴影发散范围，第四个值表示阴影颜色。

一，默认向右和向下的阴影使用正值，向左和向上使用负值。

text-shadow: 1px 1px 1px #666;表示向右和向下偏移一个像素的阴影，text-shadow: -1px -1px 1px #666;表示向左和向上偏移的阴影。text-shadow: 0px 0px 1px #666;表示不偏移，这个时候四周会有同等的阴影，如下图

在这里插入图片描述

二，多组属性值可以用逗号隔开

text-shadow: 1px 1px 1px #666，-1px -1px 1px #666;表示四周都有偏移一个像素的阴影。

利用text-shadow属性我们可以制作精美的凹凸文字效果。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            background-color: #cccccc;
        }
        p{
            text-align: center;
            font-size: 60px;
            margin-top: 50px;
            font-weight: bold;
            color: #cccccc;
        }
        .tu{
            text-shadow: -1px -1px 1px #fff,1px 1px 1px #000;
        }
        .ao{
            text-shadow: 1px 1px 1px #fff,-1px -1px 1px #000;
        }
    </style>
</head>
<body>
        <p>好好学习</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/xiazai/code/11134">
                            <img src="https://img.php.cn/upload/webcode/000/000/001/176509080292391.jpg" alt="衣购网站项目(三层开发)源码">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/xiazai/code/11134">衣购网站项目(三层开发)源码</a>
                            <p>商品查询功能提供了一个快速查看商品的途径。商品查询分为基本查询和高级查询。基本查询：提供关键字和商品大类两种条件的查询，用户可以只填写关键字或者选择商品大类或者关键字和商品大类都填写来查询商品。高级查询：提供关键字，商品大类，商品小类，商品价格范围四种条件的查询，用户可以任意填写其中一种或几种的查询条件来查询想要了解的商品信息。商品查询功能大大的方便了用户，提高了网站的用户体验。（5）帮助系统模块</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="衣购网站项目(三层开发)源码">
                                <span>0</span>
                            </div>
                        </div>
                        <a href="/xiazai/code/11134" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="衣购网站项目(三层开发)源码">
                        </a>
                    </div>
                
        <p>天天向上</p>
</body>
</html>

登录后复制

运行如下：

在这里插入图片描述

2. box-shadow

box-shadow和文字阴影的属性很相似，一个是给文字加阴影，一个是给容器加阴影。

box-shadow的六个值，如下：

h-shadow 水平阴影的位置，值可以为负数（不可省略）
v-shadow 垂直阴影的位置，值可以为负数（不可省略）
blur 模糊的距离（可选）
spread 阴影的距离（可选）
color 阴影的颜色（可选）
inset 将外部阴影(outset)改成内部阴影（可选）

none 默认值（box-shadow:none 可以取消边框的阴影效果）

注释：可向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由（2~4）个长度值、1个可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

实例：添加多个阴影样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>css3边框阴影</title>
    <style>
    #box1{ 
                margin-top: 100px;
        margin-left:100px; 
        background-color: #fff;
        width: 100px;
        height: 100px;
             box-shadow:
        2px 2px 10px red,
        5px 5px 20px blue;
        }
        </style>
</head>
 <body>
    <div id="box1"></div>
</body>
</html>

登录后复制

运行效果
在这里插入图片描述