css3中阴影的表示方法有哪些

发布时间:2022-03-19 09:37:39 作者:iii
来源:亿速云 阅读:257

这篇文章主要介绍“css3中阴影的表示方法有哪些”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“css3中阴影的表示方法有哪些”文章能帮助大家解决问题。

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

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

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

1. text-shadow

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

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

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

如下图,是像右和向下产生的阴影:

css3中阴影的表示方法有哪些

下图是向上和向左的阴影

css3中阴影的表示方法有哪些

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

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

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

css3中阴影的表示方法有哪些

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

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>
        <p>天天向上</p>
</body>
</html>

运行如下:

css3中阴影的表示方法有哪些

2. box-shadow

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

box-shadow的六个值,如下:

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>

运行效果
css3中阴影的表示方法有哪些

关于“css3中阴影的表示方法有哪些”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注亿速云行业资讯频道,小编每天都会为大家更新不同的知识点。

推荐阅读:
  1. css3实现盒子阴影效果的方法
  2. css3中怎么设置文字阴影的方法

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css3

上一篇:css对seo有没有影响

下一篇:Python的sys模块有什么用

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》