这篇文章主要介绍“css3中阴影的表示方法有哪些”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“CSS3中阴影的表示方法有哪些”文章能帮助大家解决问题。
这篇文章主要介绍“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阴影属性之前我们先来了解一下阴影有关的常识。
阴影的产生是光照在物体上，会在背光的地方产生阴影。
如下图，是像右和向下产生的阴影：
下图是向上和向左的阴影
下面再来看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>
<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>运行效果
关于“css3中阴影的表示方法有哪些”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注编程网VUE频道，小编每天都会为大家更新不同的知识点。
--结束END--
本文标题: css3中阴影的表示方法有哪些
本文链接: https://www.lsjlt.com/news/94605.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0