box-shadow修改元素的阴影效果要方便得多,因为box-shadow可以修改六个参数,得到不同的效果。下面结合一些简单的案例来对box-shadow属性进行演示说明。

1.单边阴影效果

定义元素的单边阴影效果和调协border的单边边框颜色是相似的,例如:

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box-shadow {
width: 200px;
height: 100px;
border-radius: 5px;
border: 1px solid #ccc;
margin: 20px;
}
.top {
box-shadow: 0 -2px 0 red;
}
.right {
box-shadow: 2px 0 0 green;
}
.bottom {
box-shadow: 0 2px 0 blue;
}
.left {
box-shadow: -2px 0 0 orange;
} </style> </head>
<body>
<div class="box-shadow top"></div>
<div class="box-shadow right"></div>
<div class="box-shadow bottom"></div>
<div class="box-shadow left"></div>
</body>
</html>

效果如图3-38所示。

这个案例中,使用box-shadow给元素设置了顶边、右边、底边和左边的单边阴影效果。主要通过box-shadow的水平和垂直阴影的偏移量 来实现,其中x-offset为正值时,生成右边阴影,反之为负值时,生成左边阴影;y-offset为正值时,生成底部阴影,反之为负值时生成顶部阴 影。此例中是一个单边实影投影效果(阴影模糊半径为0),但是如果阴影的模糊半径不是0,上面的方法还能不能实现单边阴影效果呢?不急着来回答,在上面的 实例中添加一个模糊半径,例如:

 .top {
box-shadow: 0 -2px 5px red;
}
.right {
box-shadow: 2px 0 5px green;
}
.bottom {
box-shadow: 0 2px 5px blue;
}
.left {
box-shadow: -2px 0 5px orange;
}

图3-39说明,这个效果并不是理想的单边阴影效果,当box-shadow添加了5px阴影模糊半径后,阴影不再是实影投影,阴影清晰度向外扩散,更具阴影的效果。但造成了另一个问题,给元素其他三个边加上淡淡的阴影效果,可这并不是设计需要的效果。

那究竟要怎么做呢?此时,box-shadow属性中的阴影扩展半径(spread-radius)会是一个很关键的属性,要实现单边阴影效果,必须配上这个属性(除单边实影之外)。

 .top {
box-shadow: 0 -4px 5px -3px red;
}
.right {
box-shadow: 4px 0 5px -3px green;
}
.bottom {
box-shadow: 0 4px 5px -3px blue;
}
.left {
box-shadow: -4px 0 5px -3px orange;
}

上面的代码调整了阴影的位移量,新增了box-shadow的扩展半径,最终效果如图3-40所示。

注意 各浏览器下显示效果略有细节差别。

      图3-40

CSS3------box-shadow,即单边阴影效果设置的更多相关文章

  1. css3 box

    一.box-shadow介绍 box-shadow属性向box添加一个或多个阴影. 语法: box-shadow: offset-x offset-y blur spread color inset; ...

  2. box-shadow 制作单边阴影效果,不影响其它边的效果

    box-shadow 制作单边阴影效果,不影响其它边的效果:  https://blog.csdn.net/u010289111/article/details/53171128 CSS 样式实现单边 ...

  3. Virtual Box中 CentOS双网卡设置

    Virtual Box中 CentOS双网卡设置:   在Virtual Box中安装CentOS x86-64 6.4(final),配置了双网卡,eth0 为桥接模式 , eth1为内网模式   ...

  4. 如何设置box shadow的透明度

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-04-24) 今天发现使用box-shadow属性,可以很好的给div添加阴影效果,但是添加的效果如果是: -moz-box- ...

  5. 浅谈 css3 box盒子模型以及box-flex的使用

    display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分.   一.使 ...

  6. CSS3教程:Transform的perspective属性设置

    1 2   <div id="animateTest" style="-webkit-transform: perspective(400px) rotateY(4 ...

  7. css3 Box model 与 Box-sizing

    1.Box Model(盒模型) CSS中的Box Model分为两种:第一种是W3C的标准模型,另一种是IE的传统模型.它们的相同之处是对元素的width.height.padding.border ...

  8. Virtual Box 下Ubuntu桥接网络设置

    转自:http://os.51cto.com/art/200908/144564.htm 一般而言,安装完VirtualBox设定网路时选择默认的NAT模式,Guest就可顺利联网了,但是这种方式比较 ...

  9. android文字阴影效果设置

    <TextView android:id="@+id/tvText1" android:layout_width="wrap_content" andro ...

随机推荐

  1. dom的节点操作

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. java中的byte有什么作用?

    byte即字节的意思,是java中的基本类型,用心申明字节型的变量. 通常在读取非文本文件时(如图片,声音,可执行文件)需要用字节数组来保存文件的内容,在下载文件时,也是用byte数组作临时的缓冲器接 ...

  3. lspci - 列出所有PCI设备

    总览 SYNOPSIS lspci [options] 描述 DESCRIPTION lspci 是一个用来显示系统中所有PCI总线设备或连接到该总线上的所有设备的工具. 为了能使用这个命令所有功能, ...

  4. MFC学习笔记3---使对话框风格与系统统一

    有一件郁闷了我很久的事情,在VS中编辑对话框或者点击预览时都是以Win7风格体现的按钮及对话框: 点击上图测试对话框: 然而生成的应用程序却是这样的: 这样人很不爽啊,按钮风格回到了N年前的版本,复古 ...

  5. centos 7 安装相关环境

    How To Create a Sudo User on CentOS 7 https://www.digitalocean.com/community/tutorials/how-to-create ...

  6. 使用Python发送企业微信消息

    准备工作: 到企业微信官网,注册一个企业:登录企业微信后台,创建一个“自建”应用, 获取企业ID.agentid.secret这3个必要的参数:在企业微信的通讯录中,创建多个测试账号:在手机端安装“企 ...

  7. CentOS7 编译安装python3.6.8(升级python)

    1.安装依赖包和需要用到的工具 yum -y install wget openssl openssl-devel 这里如果不升级openssl,安装后pip安装模块可能会出错.点我查看pip安装模块 ...

  8. 012-linux系统管理——进程管理与工作管理

    linux系统管理——进程管理 top 命令是使用 top - :: up :, user, load average: 0.06, 0.60, 0.48 #五分钟钱,十分钟前,十五分钟前负载的值根据 ...

  9. MySQL高可用集群方案

    一.Mysql高可用解决方案 方案一:共享存储 一般共享存储采用比较多的是 SAN/NAS 方案. 方案二:操作系统实时数据块复制 这个方案的典型场景是 DRBD,DRBD架构(MySQL+DRBD+ ...

  10. MySQL简版(二)

    第一章 表的约束 1.1 概念 对表中的数据进行限定,保证数据的正确性.有效性和完整性. 1.2 分类 主键约束:primary key. 非空约束:not null. 唯一约束:unique. 外键 ...