基础说明:

    外阴影:box-shadow: X轴  Y轴  Rpx  color;

    属性说明(顺序依次对应): 阴影的X轴(可以使用负值)    阴影的Y轴(可以使用负值)    阴影模糊值(大小)    阴影的颜色

    内阴影:box-shadow: X轴  Y轴  Rpx  color  inset;

默认是外阴影   内阴影:inset 可以设置成内部阴影

    注(PS):此属性使用于盒模型 如(div,p,h1,h2,h3,h4,h5,h6等) 不是用来设置文字阴影   如果设置文字阴影请参考知识点:text-shadow(同理)

因为是新属性,为了兼容各主流浏览器并支持这些主浏览器的较低版本,基于主流浏览器上使用box-shadow属性时,我们需要将属性的名称写成-webkit-box-shadow的形式。Firefox浏览器则需要写成-moz-box-shadow的形式

欧朋浏览器  -o-box-shadow   IE>9  -ms-box-shadow

基础练习:

为了更好的了解box-shadow的特征,做几个小测试:(为了方便直接在标签内嵌套样式)

测试1: <div style="box-shadow: 0 0 10px #f00; border:1px solid green"></div>  box-shadow: 0 0 10px #f00  (因没有使其X轴与Y轴移动 设置值 所在会在本身发生作用   半径范围,颜色)

测试2: <div style="box-shadow:4px 4px 10px #f00; border:1px solid green"></div> box-shadow:4px 4px 10px #f00;与测试1不同 X轴与Y轴改变了正值(正值 向右 向下) 所以变成了这样‍

测试3:<div style="box-shadow:-4px -4px 10px #f00; border:1px solid green"></div> box-shadow:-4px -4px 10px #f00;与测试2不同 之处是 X轴与Y轴改变成了负值(负值 向左 向上) 所以变成了这样‍

同理:你可以测试下一正值,一负值的效果,这里就不做测试了。。。。。。。。

测试4:<div  style="box-shadow:-10px 0px 10px red,   /*左边阴影*/
                                                   0px -10px 10px #000,  /*上边阴影*/
                                                   10px 0px 10px green,  /*右边阴影*/
                                                   0px 10px 10px blue;" /*下边阴影*/ ></div>

你看到这样的代码会感觉很乱 但是看到效果图片之后你就能明白这是怎么做的了无非改一下X轴与Y轴位置与颜色值 还有阴影值大小,(用逗号隔开)多练习几次就好

测试5:--内阴影  <div style="box-shadow: 0px 0px 10px red inset; border:1px solid green"></div> box-shadow: 0px 0px 10px red inset;    与上面写法相同 唯一不同的是添加了一个inset 其它属性与外阴影相同

css3 box-shadow阴影(外阴影与外发光)讲解的更多相关文章

  1. css3 box-shadow阴影(外阴影与外发光)

    基础说明:     外阴影:box-shadow: X轴  Y轴  Rpx  color;     属性说明(顺序依次对应): 阴影的X轴(可以使用负值)    阴影的Y轴(可以使用负值)    阴影 ...

  2. css3 box-shadow阴影(外阴影与外发光)讲解

    基础说明:     外阴影:box-shadow: X轴  Y轴  Rpx  color;     属性说明(顺序依次对应): 阴影的X轴(可以使用负值)    阴影的Y轴(可以使用负值)    阴影 ...

  3. CSS3之box-shadow--阴影外阴影与外发光

    基础语法 外阴影:box-shadow:X Y Npx #color; 内阴影:box-shadow:inset X Y Npx #color; 第一个属性:阴影的X轴(可以使用负值) 第二个属性:阴 ...

  4. css3 box

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

  5. CSS3 box-shadow 效果大全(内阴影,外阴影,三边阴影,双边阴影,单边阴影,细线描边…)

    /* offset-x | offset-y | color */ box-shadow: 60px -16px teal; /* offset-x | offset-y | blur-radius ...

  6. CSS3学习之圆角box-shadow,阴影border-radius

    最近经常玩腾讯微博,出来职业习惯,看看它的CSS,里面运用了大量的css3的东东,有一处用到了Data URI,还有css e­xpression有争议的地方,对png24图片的处理也是用滤镜,类似( ...

  7. 纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果

    原文:纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果 大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事 ...

  8. css3圆角矩形、盒子阴影

    css3圆角矩形 div{ width: 200px; height: 200px; border: #f00 solid 1px; margin-bottom: 10px; } 1.设置 borde ...

  9. CSS3中哪些新属性—阴影、文本省略(1)

    CSS3中的阴影,我知道的就是盒阴影和文字阴影.两者使用大同小异. 1.文字阴影 不知道为啥阴影会被开发出来,觉得这没啥好用啊.用了之后发现好像还行,使页面更有立体感了那么一点点.看起来趣味性强一点. ...

随机推荐

  1. Linux:declare命令详解

    declare declare命令用于声明和显示已存在的shell变量.当不提供变量名参数时显示所有shell变量.declare命令若不带任何参数选项,则会显示所有shell变量及其值.declar ...

  2. Java基础从头再来?

    今天遇到一个就是从后台解析的时候出现null字符串的处理 bug图如下每一个name属性都包含null 对于那些java基础好的直接撸码了,我就是不会哈哈! 最后请教别人还是解决了这个问题 简单分享下 ...

  3. Sqlalchemy 设置表编码及引擎

    1. 设置引擎编码方式为utf8. engine = create_engine("mysql+pymysql://root:123456@127.0.0.1:3306/sqldb01?ch ...

  4. Python源码分析(二) - List对象

    python中的高级特性之一就是内置了list,dict等.今天就先围绕列表(List)进行源码分析. Python中的List对象(PyListObject) Python中的的PyListObje ...

  5. HDU1575 Tr A

    解题思路:矩阵快速幂模板题,见代码: #include<cstdio> #include<cstring> #include<algorithm> using na ...

  6. THREE.OrbitControls初始化设置位移/旋转/滚轮

    let oldController;//已知的一个controller //初始化旋转(鼠标左键的操作) let position=oldController.object.position; cam ...

  7. Unrecoverable error: corrupted cluster config file.

    from: https://www.cnblogs.com/topicjie/p/7603227.html 缘起 正在欢乐的逗着孩子玩耍,突然间来了一通电话,值班人员告诉我误重启了一台服务器,是我负责 ...

  8. hadoop 的job.setOutputKeyClass和job.setOutputValueClass的几个问题

    昨天写了一个mapreduce函数一直有错误,找不到错误,今天找了一天终于解决了,原来是hadoop 的job.setOutputKeyClass和job.setOutputValueClas设置输出 ...

  9. github上对一些名词的理解(之如fork)

    fork: Fork 的本义是 叉子(名词) . 比较自然的引申成 分叉(动词) ,就像上面叉子,从左到从右,一条线变成多条了. Git/GitHub 用户下面的图 来表达 Fork:分叉.克隆 出一 ...

  10. Thinkphp 下 MySQL group by 接count 获得条数方法

    比如 下面的语句 , 用于分组统计 select count(*) from es_diabetes where uid=43658 GROUP BY uniques 结果明显不是我们想要得,为什么呢 ...