其实对于box-shadow,老白我也是一知半解,之前用的时候直接复制已有的,也没有仔细思考过box-shadow的数值分别对应什么,最后导致阴影的边如何自由控制,苦于懒人一个一直没有正式去学习,今天无意中看到以下这篇文章,瞬间清醒有木有,看完整片文章,对于box-shadow阴影四个边的设置完全了如指掌了,再也不怕修改box-shadow了!

对于div边框的阴影一直没有很好地理解,也一直不明白怎么给四个边框分别设置阴影。昨天项目中碰到了这个问题,就认真想了一下,在此总结一二。

首先,还是从官方解释说起。

 网上的解释通常都是什么水平阴影长度、垂直阴影长度,略抽象。根据我的实验和理解,从坐标层面来理解比较直观,那么我们首先建立如下直角坐标系:(突然发现我的电脑上竟然没有装Visio,现学现卖用PS临时画了一个,原谅我)

史上最简单介绍box-shadow四个边框设置阴影样式的文章 CSS学习 第1张
 OK。原点为基点,原点左侧为x轴负方向,值为负,右侧为正;原点下方为y轴正方向,值为正,上方为负。如上图箭头所指。好理解吗?不要嫌我啰嗦,正确理解坐标方向对于理解阴影画法至关重要。

好了,上代码。官方用语: box-shadow:1px 2px 3px 4px #ccc inset;

来分别看一下以上六个值的含义: 1px 从原点开始,沿x轴正方向的长度(倘若为负值,为沿x轴负方向的长度);

2px 从原点开始,沿y轴正方向的长度;(倘若为负值,为沿y轴负方向的长度);

3px 阴影的模糊度,只允许为正值;

4px 阴影扩展半径;

#ccc 阴影颜色;

inset 设置为内阴影(如果不写这个值,默认为外阴影);

 我们再详细点说,所谓内外阴影,其实就是指的是阴影在div的外面一圈还是在div的里面一圈,如下图:
                             史上最简单介绍box-shadow四个边框设置阴影样式的文章 CSS学习 第2张外阴影                          史上最简单介绍box-shadow四个边框设置阴影样式的文章 CSS学习 第3张内阴影

铺垫完毕,说正事——给四条边分别加阴影。

如果打算添加外部阴影,那么在div内部是不会显示阴影的。看起来好像是废话,来仔细分析一下。

将div放在直角坐标系中,则div上边与x轴重合,左边与y轴重合,没错吧。所以,对于上面一条边,沿y轴正方向的阴影不会显示,因为沿y轴正方向的长度已经进入到了div内部。同样的,对于左侧边框,沿x轴正方向的长度也进入到了div内部,阴影不会显示。

对于右侧边框,则沿x轴负方向的长度不显示(不要纠结于原点位置,只考虑坐标方向。可以看做右边与y轴重合,方便理解);对于下方边框(看做下边与x轴重合),沿y轴负方向的长度进入div内部,不显示。

好吧,我的语言组织能力有待加强。将以下代码配上这一段的文字描述,就不难理解了。

*说明:(以上部边为例进行说明)

1. 对于上边,沿x轴方向的偏移量显然没有意义,设为0px;

2. 沿y轴正方向阴影进入div内部,不显示,因此写为负数;

3. 扩展半径不要写,或者写成0px,这样就不会影响其他的边;

4. 颜色自定;

5. 模糊程度按需要自定;

6. 下、左、右边阴影按规律类推。

*/

 box-shadow:    0px -10px 0px 0px #ff0000,   /*上边阴影  红色*/

                -10px 0px 0px 0px #3bee17,   /*左边阴影  绿色*/

                10px 0px 0px 0px #2279ee,    /*右边阴影  蓝色*/

                0px 10px 0px 0px #eede15;    /*下边阴影  黄色*/
效果图

外阴影加好了。倘若是内阴影,可以按这个规律自己推一下。

  试验中发现了一个问题:

对于上下边,相当干净漂亮。但是写左边的阴影时,上边会有一条细细的阴影;写右边阴影时,下边会有一条细细的阴影。不懂为什么。

box-shadow四个边框设置阴影样式的更多相关文章

  1. 使文字在div中水平和垂直居中的的css样式为,四个边分别设置阴影样式

    text-align:center; /*水平居中*/ line-height: 20px; /*行距设为与div高度一致*/ HTML元素 <div>水平垂直居中</div> ...

  2. div四个边框分别设置阴影样式

    对于div边框的阴影一直没有很好地理解,也一直不明白怎么给四个边框分别设置阴影.昨天项目中碰到了这个问题,就认真想了一下,在此总结一二. 首先,还是从官方解释说起. 网上的解释通常都是什么水平阴影长度 ...

  3. from表单、css选择器、css组合器、字体样式、背景属性、边框设置、display设置

    目录 一.form表单 1.form表单功能 2.表单使用原理 二.前端基础之css 1.关于css的介绍 2.css语法 3.三种编写CSS的方式 3.1.style内部直接编写css代码 3.2. ...

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

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

  5. javafx分别设置四个边框

    package border; import javafx.application.Application; import javafx.geometry.Insets; import javafx. ...

  6. react学习(四)之设置 css样式 篇

    react中设置css样式 方法一: 行内样式:使用{{  }},与正常jsx中插入js代码不一样,这里需要两个括号. <div style={ { float: 'right',} }> ...

  7. 字体图标,盒子显隐,overflow属性,伪类设计边框,盒子阴影2d形变

    字体图标 ''' fa框架: http://fontawesome.dashgame.com/ 下载 => 引入css文件 引入字体图标库 <link rel="styleshe ...

  8. css3新增边框、阴影、边框、背景、文本、字体

    css3和css有什么区别?简单来讲css3是css(层叠样式表)技术的升级版本,css3新特征有很多,例如圆角效果.图形化边界.块阴影与文字阴影.使用RGBA实现透明效果.渐变效果.使用@Font- ...

  9. 初学c# -- 学习笔记(五) winfrom无边框四周阴影

    刚用到这个功能,网上扯淡的东西太多了,都是2边阴影,还什么窗口叠加.ps作图啥的,什么玩意.还是老外实在,google找的,无边框窗体,四边透明阴影. public partial class For ...

随机推荐

  1. codevs 3060 抓住那头奶牛 x

    3060 抓住那头奶牛 USACO  时间限制: 1 s  空间限制: 16000 KB  题目等级 : 黄金 Gold   题目描述 Description 农夫约翰被告知一头逃跑奶牛的位置,想要立 ...

  2. mac 电脑设置密码可以直接使用 passwd 这个命令

    mac 电脑设置密码可以直接使用 passwd 这个命令 说明:这个命令行级别的设置会直接影响到我们登录.

  3. SpringBoot:初识SpringBoot

    西部开源-秦疆老师:基于SpringBoot 2.1.6 的博客教程 秦老师交流Q群号: 664386224 未授权禁止转载!编辑不易 , 转发请注明出处!防君子不防小人,共勉! 1.SpringBo ...

  4. 冲刺周六 Fighting SaturDay

    一.Saturday照片 二.项目分工 三.今日份燃尽图 四.项目进展 码云团队协同环境构建完毕 利用Leangoo制作任务分工及生成燃尽图 完成AES加解密部分代码 用代码实现对文件的新建.移动.复 ...

  5. How to run a function when the page is loaded?

    How to run a function when the page is loaded? window.onload = codeAddress; should work - here's a d ...

  6. Java中的BigDecimal类和int和Integer总结

    前言 我们都知道浮点型变量在进行计算的时候会出现丢失精度的问题.如下一段代码: System.out.println(0.05 + 0.01); System.out.println(1.0 - 0. ...

  7. Linux安装nslookup命令

    做DNS的人都知道nslookup命令是做什么用的,windows系统自带的.但是linux系统是不自带这个命令的,需要人手动安装.如果您不记得这是哪个软件包提供这个命令的话,那您还真会有些麻烦了.下 ...

  8. MongoDB学习【三】—MongoDB数据库增删改查

    一.数据库的增删查 # 增加 use db # 有则切换,无则新 增 # 查看 show dbs # 查看所有数据库 db # 查看当前库 # 删除 db.dropDatabase() # 不会就用h ...

  9. Swagger入门教程(转)

    [译]5.41 Swagger tutorial 单击此处查看原文 更多概念参见:Implementing Swagger with your API docs 关于 Swagger Swagger能 ...

  10. 应用安全-Web安全-XSS(跨站攻击)攻防整理

    分类 反射型 存储型 DOM型 XSF(Flash XSS) PDFXSS MHTML协议跨站(MHTML,data) 字符编码(UTF-7 XSS) 富文本编辑器测试 - 输入框 <img S ...