前端开发_HTML5_CSS部分-阴影(shadow)

阴影(shadow)

1.引入

我们接下来学习一种比较特殊的样式特效——阴影。

2.阴影(shadow)

(1)、概述:所谓的阴影就是我们日常生活中缩减到的一种特殊的影子效果。

(2)、阴影分类:阴影大概可以分为:文字阴影(text-shadow)、盒子阴影(box-shadow)。

3.文字阴影(text-shadow)

(1)、文字阴影是正对文字产生的一种特效。

(2)、文字阴影相关的语法以参数说明

文字阴影语法以及相关属性:text-shadow:h-shadow v-shadow blur color;参数详解:h-shadow：阴影的水平距离
v-shadow: 阴影的垂直距离blur: 阴影的模糊半径color: 阴影的颜色

(3)、文字阴影代码实现以及实现效果

<style type="text/css">p{font-size: 28px;font-family: "宋体";text-shadow: 3px 3px 5px black;}
</style>
<body><p>蜀道难</p>
</body>

4.盒子阴影(box-shadow)

(1)、概述:盒子阴影是一种比较特殊的阴影，是正对于盒子模型产生的阴影方式。

(2)、盒子阴影的一般可以分为三类:普通的阴影、外阴影和内部阴影。下面我们将逐步讲解这三种阴影的详细内容。

(3)、盒子的普通阴影效果(box-shandow)

①、相关语法

普通阴影语法box-shadow:h-shadow v-shadow blur spread color;参数说明:h-shadow:阴影的水平距离v-shadow:阴影的垂直距离blur:阴影的模糊半径spread:阴影的大小color:阴影的颜色

②、盒子阴影代码实现以及实现效果

<style type="text/css">.box1{font-size: 28px;font-family: "宋体";color: red;line-height: 200px;text-align: center;border: 1px solid black;height: 200px;width: 200px;box-shadow: 10px 10px 15px 20px green;
}
</style><body><div class="box1">盒子1</div>
</body>

(4)、盒子的外阴影、内阴影效果(box-shandow)

①、相关语法

内外阴影语法box-shadow:阴影类型 x-offset y-dffset 阴影的模糊半径 阴影的扩展半径  color;参数说明:阴影类型:一般默认使用的是外阴影，如果要设置内阴影，则设置参数的值为"inset"。x-offset:设置水平方向(x轴方向)的偏移量。y-offset:设置垂直方向(y轴方向)的偏移量。阴影的模糊半径:模糊半径是指模糊效果，其值越大，阴影的边缘就越模糊。阴影的扩展半径:扩展半径值指定阴影的延申扩大还是缩小，正值表示扩大，负值表示缩小。阴影的颜色:设置阴影的颜色。

②、内、外阴影代码实现以及实现效果

<style type="text/css">div {font-size: 28px;font-family: "宋体";color: red;border: 1px solid black;height: 200px;width: 200px;float: left;margin-left: 50px;text-align: center;}.box1 {box-shadow:inset 0px 0px 10px 20px green;}.box2 {box-shadow: 0px 0px 10px 20px green;}
</style>
<body><div class="box1">设置内阴影</div><div class="box2">设置外阴影</div>
</body>

注意:

值得注意的是一般情况，我们设置内阴影和外阴影的时候，x轴、y轴的偏移量都设置为0。

前端开发_HTML5_CSS部分-阴影(shadow)相关推荐

前端开发_HTML5_CSS部分-动画特效(animation)
动画特效(animation) 1.引入我们之前学习了过渡的特效,那么接下来我们一起来学习一下另一种比较特殊的特效动画. 2.动画特效(animation) (1).概述:CSS 可使用animat ...
前端开发_HTML5_CSS部分-背景(background)
背景(background) 1.引入为了更好对内容有更好的颜色搭配和设置,我们可以使用背景做一些美化效果,那么接下来我们一起学习以下背景相关的属性. 2.背景(background)相关的属性样式 ...
前端开发_HTML5_CSS部分-边框(border)
边框样式 1.概述我们之前已经把CSS的选择器学习了一遍,接下来,我们就一起来学习一下一些常见的样式属性,我们从边框样式开始学习. 2.边框样式 CSS中使用关键字border实现指定元素边框的样式 ...
前端开发_HTML5_CSS部分-过渡特效(transition)
过渡特效(transition) 1.引入 CSS3除了可以实现传统意义上的样式之外,还提供了一些比较特殊的特效,那么下面我们一起来学习一下这一些特效.学习完这一些特效将会更加丰富我们的页面美化效果. ...
前端开发_HTML5_CSS部分(四)
一.CSS相关的特性 1.引入在上一次课中,我们讲解了如何使用选择器的使用,能够通过选择器给不同的标签添加不同的样式信息.接下来,我们讲解以下CSS中存在的一些样式的特性,这些特性将更好的解决我们理 ...
前端开发_HTML5_CSS部分-display属性
display属性 1.引入上几次课程的学习我们学习了一个比较重要的概念:盒子模型,下面我们来学习一个比较重要的属性:display,该属性是一个比较特殊的属性,它可以通过属性值控制元素是否显示,也 ...
前端开发_HTML5_CSS部分(一)
一.如何快速的学习CSS内容? 1.精确给页面元素设置样式,掌握三种选择方式. 2.掌握页面每一类型的元素常用的属性内容. 3.像记单词一样记住每一个样式设置之后产生的特效. ...
前端开发_HTML5_CSS部分-列表属性(list-style)
列表属性(list-style) 1.引入我们之前在学习标签的时候学习了列表相关的标签,主要有三个:ul-li(无序列表).ol-li(有序列表).dl-dt-dd(定义列表),那么下面我们来学习一 ...
【学习笔记】前端开发面试锦集
链接地址:https://microzz.com/2017/02/10/interview/ 前端还是一个年轻的行业,新的行业标准, 框架, 库都不断在更新和新增,正如赫门在2015深JS大会上的&l ...
前端开发工程师面试题2
前端开发工程师面试题2 1.Doctype作用? 严格模式与混杂模式如何区分?它们有何意义? (1). 声明位于文档中的最前面,处于标签之前.告知浏览器的解析器,用什么文档类型规范来解析这个文档. ...

前端开发_HTML5_CSS部分-阴影(shadow)

阴影(shadow)

前端开发_HTML5_CSS部分-阴影(shadow)相关推荐

最新文章

热门文章