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. c# 数据库基础（将连接字符串写到配置文件中）

    数据库 操作步骤 一,添加一个配置文件 内容 <?xml version="1.0" encoding="utf-8" ?> <configu ...

  2. git合并丢失代码问题分析与解决(错误操作导致)

    问题描述 我们在主干dev和branch1分支上进行并行开发.当要把branch1功能的代码合并到dev上时,发现dev上开发的部分功能代码找不到了. 那么,是在branch1上,作了删除提交导致的吗 ...

  3. maven项目pom.xml报错： Failure to transfer org.apache.maven.plugins:maven-surefire-plugin:pom:2.7.1 from

    转自:https://blog.csdn.net/wolf1213hao/article/details/53413093

  4. [七月挑选]使用idea创建spring boot 项目

    title: 使用idea创建spring boot 项目 参考lindaZ的IntelliJ IDEA 创建spring boot 的Hello World 项目 1.Open IDEA,choos ...

  5. layoutSubviews何时调用的问题(原文：http://www.cnblogs.com/pengyingh/articles/2417211.html)

    今天跟旺才兄学习了一下UIView的setNeedsDisplay和setNeedsLayout方法.首先两个方法都是异步执行的.而setNeedsDisplay会调用自动调用drawRect方法,这 ...

  6. 02python程序设计基础——字符串

    字符串方法 format 1.替换字段名 在最简单的情况下,只需向 format 提供要设置其格式的未命名参数,并在格式字符串中使用未命名字段.此时,将按顺序将字段和参数配对.你还可给参数指定名称,这 ...

  7. noip2017简要题解。

    重新写了一下去年的题来看看自己到底是有多傻逼. 小凯的疑惑 打表. 时间复杂度 搞了一大坨题面,但是真正有用的信息只有几个: 判断他给你的复杂度是多少. 判断当前循环进不进的去. 判断当前循环产生的贡 ...

  8. Windows Server2008R2蓝屏，分析dmp文件

    使用Windbp PreView打开dmp文件后,在命令栏输入如下命令: !analyze -v 解析结果中蓝色字体为错误原因分析

  9. div中放入一个img元素导致div高度会多出几个像素

    在写代码的时候经常遇到这样一个问题,如果div里嵌套一个img元素且div的高度是由img的高度来撑开,那么div的高度总会比img的高度多3px.好了,废话不多说,直接给大家上代码. html代码: ...

  10. 【leetcode】540. Single Element in a Sorted Array

    题目如下: 解题思路:题目要求时间复杂度是O(logN),可以尝试使用二分查找法.首先数组是有序的,而且仅有一个元素出现一次,其余均为两次.我们可以先找到数组最中间的元素,记为mid.如果mid和mi ...