博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS3box-shadow属性的使用
阅读量:4593 次
发布时间:2019-06-09

本文共 1288 字,大约阅读时间需要 4 分钟。

每次使用box-shadow,都要查阅资料才能实现对应的效果,现在总结一下,方便以后查看。

 

一、语法:

      E {box-shadow: inset x-offset y-offset blur-radius spread-radius color};

      E {box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色};

 

二、取值:

     1. 阴影类型:此参数可选,默认的投影方式是外阴影;如果取其唯一值“inset”,就是将外阴影变成内阴影;

     2.X-offset:是指阴影水平偏移量,其值可正可负,正值,则阴影在对象的右边,负值,阴影在对象的左边;

     3. Y-offset:是指阴影的垂直偏移量,其值也可以是正负值,正值,阴影在对象的底部,负值时,阴影在对象的顶部;

     4.阴影模糊半径:此参数是可选,只能为正值,如果其值为0时,表示阴影不具有模糊效果,值越大阴影的边缘就越模糊;

     5. 阴影扩展半径:此参数可选,其值可为正负值,正值,则整个阴影都延展扩大,反之,则缩小

     6. 阴影颜色:此参数可选,不设定任何颜色时,浏览器会取默认色,但各浏览器默认色不一样,特别是在webkit内核下的safari和chrome浏览器将无色,也就是透明,建议不要省略此参数。

 

三、兼容浏览器的写法

   

//Firefox4.0- -moz-box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色; //Safari and Google chrome10.0- -webkit-box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色; //Firefox4.0+ 、 Google chrome 10.0+ 、 Oprea10.5+ and IE9 box-shadow:  投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;

box-shadow和text-shadow一样可以使用一个或多个投影,如果使用多个投影时必须需要用逗号“,”分开。

 

四、IE滤镜模拟box-shadow阴影效果

    基本语法:filter:progid:DXImageTransform.Microsoft.Shadow(color=’颜色值’, Direction=阴影角度(数值),Strength=阴影半径(数值));

    注意:

      1.该滤镜必须配合background属性一起使用,否则该滤镜失效;

      2.滤镜里的颜色属性必须写完整,不能用缩写;
      3.滤镜的阴影是计算在宽高内的;
      4.在盒阴影下,box会自动加上overflow:hidden;

关于IE滤镜,具体可参考

以上博文,参考了 以及 

 

五、常用阴影的实现代码

    
box-shadow的用法

具体效果见下图:

转载于:https://www.cnblogs.com/sapho/p/5481257.html

你可能感兴趣的文章
用户和用户组,以及文件和文件夹的权限
查看>>
H5 基于Web Storage 的客户端留言板
查看>>
linux添加字体
查看>>
Fastjson是一个Java语言编写的高性能功能完善的JSON库。
查看>>
一篇和Redis有关的锁和事务的文章
查看>>
delphi验证手机号码地址的正则表达式验证function
查看>>
sublime 我的快捷键
查看>>
asp.net MVC日志插件Log4Net学习笔记一:保存日志到本地
查看>>
9-16Jenkins-1第一个任务
查看>>
HTML 标签
查看>>
8 款为 WordPress 文章生成缩略图的插件
查看>>
bzoj1396 识别子串
查看>>
Android开发六:常用控件3--ListView(一)
查看>>
Wormholes (bellman)
查看>>
[ 产品经理 ] 产品经理的一天工作内容
查看>>
依赖倒转原则
查看>>
Dubbo分布式服务框架入门(附project)
查看>>
A2-02-14.DML- MySQL LEFT JOIN
查看>>
char与CString相互转换
查看>>
jQuery Ajax总结
查看>>