CSS3盒阴影 box-shadow

HTML5学堂:CSS3 的 box-shadow 有点类似于 text-shadow,只不过不同的是 text-shadow 是对象的文本设置阴影,在移动端我可以使用盒阴影来代替边框的效果,而 box-shadow 是给对象实现图层阴影效果。谢谢~~

CSS3阴影种类

可以分文字阴影和盒模型阴影。而本章主要讲的是盒阴影 (box-shadow),盒阴影与文本阴影一样,都可以代替具有阴影效果的图片,减少对服务器的请求压力!而使用方面来说,CSS3 的 box-shadow 有点类似于 text-shadow,只不过不同的是 text-shadow 是对象的文本设置阴影,而 box-shadow 是给对象实现图层阴影效果。当然我们有时候会用盒阴影来代替边框,这是因为盒阴影是不占物理空间的,而边框会,导致了移动端设置自适应宽度受到了影响,那么接下来我们来看看盒阴影的使用!

盒阴影

box-shadow基本语法:

box-shadow:none|shadow[,shadow]*
shadow=length{2,4}&&color?

默认值:none

语法分析:

none:无阴影

第1个长度值:阴影水平偏移值。可为负值

第2个长度值:阴影垂直偏移值。可为负值

第3个长度值:可选,阴影模糊值。不允许负值

第4个长度值:可选,阴影外延值。不允许负值

color:设置对象的阴影的颜色。可以使用16进制颜色值,也可以使用英文单词,还可以采用rgba的表示法。

语法符号含义:

语法符号含义:

“[]”代表“可选”

“|”代表“或”

“{}”里的数字代表属性值的数量范围

“?”代表“一次”

“*”表示可出现多次

CSS3盒阴影 应用

我们可以通过盒阴影制作漂亮的按钮效果。接下来我们就来举几个例子,实战一下~

结构代码:

  1. <div class="h5course">欢迎沟通交流~HTML5学堂</div>

升高元素:

样式代码:

.h5course {
width: 500px;
padding: 30px;
background: #333;
color: #fff;
box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5),
         0 1px 4px rgba(0, 0, 0, 0.3),
         0 0 60px rgba(0, 0, 0, 0.1) inset;
font-size: 40px;
font-weight: bold;
font-family: "微软雅黑";
}    

效果如下图:

升高元素具有的效果就是让人感觉立体的,而且给人一个错觉,跟背景不是同一层面上。通常此效果可以用在按钮没被点击的效果上。同时要注意在使用多层次的阴影时还需注意一个细节问题,如果前面的阴影模糊值小于后面的阴影模糊值,那么前面的显示在后面之上,如果前面阴影的模糊值大于后面的阴影模糊值,那么前面的阴影将遮住后面的阴影效果。

内嵌效果:

样式代码:

.h5course {
position: relative;
width: 500px;
padding: 30px;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(44,160,202)),
         color-stop(1, rgb(62,184,229)) );
color: #fff;
border-radius: 10px;
box-shadow: inset 0px 0px 6px 3px #666;
font-size: 40px;
font-weight: bold;
font-family: "微软雅黑";
cursor: pointer;
}

效果如下图:

内阴影效果其实运用于凹陷的效果,一般来说,如果有一个效果设置凸显样式,通过点击实现凹陷的效果,那么点击鼠标的动作非常有质感。是一种按钮常用的方法,接下来我们看如何实现按钮的一些点击效果~

按钮效果:

样式代码:

.h5course {
position: relative;
width: 500px;
padding: 30px;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(44,160,202)), color-stop(1, rgb(62,184,229)) );
color: #fff;
border-radius: 10px;
box-shadow: inset 0px 1px 0px #2ab7ec,
         0px 5px 0px 0px #156785,
         0px 10px 5px #999;
font-size: 40px;
font-weight: bold;
font-family: "微软雅黑";
cursor: pointer;
}

查看效果:

按钮效果的一个原理就是通过盒阴影升高效果,让元素具有立体感,而通过active 伪类设置位置向下移动,阴影的偏移值和模糊值发生改变,造成点击被按下的感觉。代码如下:

.h5course:active {
top: 3px;
box-shadow: inset 0px 1px 0px #2ab7ec,
          0px 2px 0px 0px #156785,
          0px 5px 3px #999;
}

同样的大家可以试着改变不同的偏移值,具有不同的视觉效果~。

兼容性:

IE8以及IE8以下版本浏览器不支持

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2015-12-17

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏超然的博客

css 定位

正常文档流模式下,后面的dom元素覆盖前面的,如果将前面的元素设置了relative将提升它自身的层级

911
来自专栏marsggbo

”盒模型“之如何防止边框和内边距把元素撑开

在我们讨论宽度的时候,我们应该讲下与它相关的一个重点知识:盒模型。当你设置了元素的宽度,实际展现的元素却能够超出你的设置:因为元素的边框和内边距会撑开元素。看下...

1816
来自专栏前端知识分享

第20天:京东nav、footer部分制作

cursor:pointer; 鼠标变成小手 cursor:default;小白 cursor:move;移动 cursor:text;文本输入

571
来自专栏HTML5学堂

浮动之后的那些事儿 - 清浮动操作

本文内容概要: 1 上周作业讲解 2 浮动之后的特性 3 如何清浮动 4 实例操作 上周我们讲解了如何去实现页面的简单布局,用了三种基本的CSS选择器来控制标签...

3638
来自专栏从零开始学 Web 前端

从零开始学 Web 之 CSS(一)选择器

CSS 全称为 Cascading Style Sheets,中文翻译为“层叠样式表”,简称 CSS 样式表,所以称之为层叠样式表(Cascading Styl...

724
来自专栏前端儿

谈谈CSS的浮动问题

浮动元素脱离文档流,不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框则停留。

561
来自专栏糊一笑

深入常用CSS声明(一) —— Background

一直对一些自己常用的css声明掌握得不是很全,只知道常用的一些属性和值,但是对于其他的用法确实一知半解,这篇文章旨在扫盲,先不说有多深的理解,至少做到能够看到这...

2725
来自专栏web

关于border边框重叠颜色设置问题

1284
来自专栏程序员互动联盟

【专业技术】CSS作用及用法

层叠样式表(Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的...

3407
来自专栏偏前端工程师的驿站

CSS魔法堂:Box-Shadow没那么简单啦:)

前言  说起box-shadow那第一个想法当然就是用来实现阴影,其实它还能用于实现其他好玩的效果的,本篇就打算说说box-shadow的那些事。 二话不说看效...

21010

扫描关注云+社区