CSS3属性box-shadow详细介绍 css中box模型属性
myzbx 2024-12-24 14:28 13 浏览
CSS3的box-shadow属性可以让我们轻松实现图层阴影效果。我们来实战详解一下这个属性。
1. box-shadow属性的浏览器兼容性
先来看一个这个属性的浏览器兼容性：
- Opera:：不知道是从哪个版本开始支持的。
- Firefox：通过私有属性-moz-box-shadow支持。
- Safari和Chrome：通过私有属性-webkit-box-shadow支持。
- 所有IE不支持(不知道IE9是否有所改善)。别急，我们将在文章最后会介绍一些针对IE的Hack。
2. box-shadow属性的语法
box-shadow有六个可设的值：
img{box-shadow:阴影类型 X轴位移 Y轴位移 阴影大小 阴影扩展 阴影颜色 }
- 当不设阴影类型时，默认为投影效果。当设为inset时，为内阴影效果。
- X轴和Y轴位移不等同但类似于Photoshop里面的”角度”和”位置。
- 阴影大小、扩展、颜色和Photoshop里面的都同理。
3. 实例解析
让我们通过几个实例来看一个box-shadow的效果，先弄个简单的HTML供测试：
<html>
<head>
<style type="text/css">CSS部份写在这里</style>
</head>
<body>
<img src="test.jpg" />
</body>
</html>请注意：为了省事儿，下面的CSS代码中只写了box-shadow，在实际使用中，你应该把-moz-box-shadow和-webkit-shadow也写上。你需要做的很简单，复制两个box-shadow，在它们前面分别加上-moz-和-webkit-。
img {
-moz-box-shadow:2px 2px 10px #06C;
-webkit-box-shadow:2px 2px 10px #06C;
box-shadow:2px 2px 10px #06C;
}(1). 投影，没有位移，10px的阴影大小，没有扩展，颜色#06C
img{box-shadow:0 0 10px #06C;}这里的颜色值是HEX值，我们还可以使用RGBA值，RGBA值的好处是，它多了一个Alpha透明值，你可以控制阴影的透明度。
img{box-shadow: 0 0 10px rgba(0, 255, 0, .5)}(2). 在上面的基础上加上20px的扩展
img{box-shadow:0 0 10px 20px #06C;}(3). 内阴影，无位移，10px大小，没有扩展，颜色#06C
img{box-shadow:inset 0 0 10px #06C;}(4). 多重阴影效果
box-shadow可以同时使用多次，我们来个四色的阴影。
img{box-shadow:-10px 0 10px red, box-shadow:10px 0 10px blue, box-shadow:0 -10px 10px yellow, box-shadow:0 10px 10px green}(5). 使用多个阴影属性的顺序问题
当给同一个元素使用多个阴影属性时，需要注意它的顺序，最先写的阴影将显示在最顶层。比如下面这段代码，我们先写一个10px的绿色阴影，再写一个10px大小但扩展20px的阴影。结果是：绿色阴影层在黄色阴影层之上。
img{box-shadow:0 0 10px green;box-shadow:0 0 10px 20px yellow}但如果我们把顺序调一下，像这样:
img{box-shadow:0 0 10px 20px yellow,box-shadow:0 0 10px green;}我们将看不到后写的绿色阴影层，因为它先写且被半径比较大的黄色层覆盖掉了。
4. 让IE也支持box-shadow
IE本身是shadow滤镜可以实现类似效果的，还有一些js和.htc的hack文件可以帮助你在IE中实现这一效果。我也无法一一都去尝试，这里只介绍我用过的一个。
ie-css3.htc是一个可以让IE浏览器支持部份CSS3属性的htc文件，不只是box-shadow，它还可以让你的IE浏览器支持圆角属性border-radius和文字阴影属性text-shadow。
它的使用方法是：下载它并放到你的服务器目录
在你的<head></head>里面写入下面的代码：
<!--[if IE]>
<style type="text/css">
img, #testdiv, .testbox{behavior: url(http://yourdomain.com/js/ie-css3.htc);}
</style>
<![endif]-->蓝色部份输入要使用box-shadow属性的选择器，绿色部份输入ie-css3.htc的绝对路径，或相对路径，反正要保证能访问得到。
然后这样就OK了。但还是有几点需要注意的是：
- 当你使用了这个htc文件后，你的CSS里面，只要写有box-shadow, -moz-box-shadow或-webkit-box-shadow的任何一种，IE就会渲染。
- 当使用了这个htc文件后，你不能这样写box-shadow: 0 0 10px red; 而应该是box-shadow: 0px 0px 10px red; 否则IE中会失效。
- 不支持RGBA值中的alpha透明度。
- 不支持inset内阴影。
- 不支持阴影扩展。
- 阴影在IE中只会显示为黑色，不管你设置成其它什么颜色。
所以说，这个脚本仅仅是让IE支持了部份的box-shadow值。
相关推荐
- Fabric.js使用说明详解（fabric nodejs）
-
Fabric介绍简介：Fabric是一款基于HTML5Canvas的开源绘图库，它提供了丰富的API和工具，可以轻松地创建交互式的绘图应用程序和游戏。功能特点：介绍Fabric的核心功能，如图形绘制...
- 如何才能快速将照片变成漫画?（如何才能快速将照片变成漫画风格）
-
本文分享8个超级详细的照片变漫画教程，让你秒变绘画大师，跟着教程就能亲手将自己的照片制作成精美的漫画，快来一起试试吧~1、PS一款专业的图像处理软件，具备出色的图像处理功能，提供了强大的编辑工具和广...
- 很少人知道的20个最好用的免费设计软件
-
不是每个人都能花重金去购置昂贵的软件来装备自己，特别是在刚开始涉足设计这个行业的新手们。我们知道adobe系列软件正版是收费的，而且很贵，虽然说我们国内已经能破解使用，很多人都认为adobe的那些软件...
- 13个免费的信息图表制作软件推荐（如何制作信息表）
-
制作信息图表涉及大量的工作，如：数据收集，数据排列，选择和规划信息图表的格式和设计信息图表。在设计信息图表时，选择适当的制图软件是一个非常艰巨的任务。下面为大家推荐13个最好的免费信息图表制作软件。A...
- 怎么转换图片的格式?（怎么转换图片的格式）
-
我们日常用到最多的图片格式是JPG/JPEG格式的，其他常见的图片格式包括有bmp，png，tif，gif，svg，cdr，ai，raw，webp等，由于图片的使用场景不同，所以要求的具体格式也会有所...
- Adobe的各种图形处理软件分别是做什么的
-
Adobe公司的Ps,Pr,Ae,An,Ai软件分别的用来做什么的？PS：AdobePhotoshop的简称，用于图像处理、编辑、通道、图层、路径综合运用，图像色彩的校正，各种特效滤镜的使用、特效字...
- 前端开发中，对图片的优化技巧有哪些?
-
按照先后顺序有以下：1.去掉无意义的修饰。嗯，我会瞎说吗？除了内容图片，其他的图片的作用是修饰，也就是对于传达信息来说并非本质性的。最大的优化就是压根不要图片！所以在优化之前要做的，首先是确认设计，...
- Adobe软件的最佳Linux替代品有哪些?这几款工具不容错过
-
如果你是一名平面设计工作者，那么估计很多与你职业相同或者是喜欢并正在学习平面设计的小伙伴们，而如果恰巧你们都是Linux用户的话，那么估计很多的小伙伴都在寻找Adobe的Linux替代品吧。但是，...
- 精心收集几个免费绘图、修图与照片编辑软件分享一下
-
本次为大家介绍几款绘图、修图与照片编辑软件，都可以免费授权个人与教育使用，有些开源软件甚至可以在工作上商业使用。其中大多数的绘图软件都是跨平台的，可以在Windows或Mac上安装，对个人照片...
- UI设计入门干货!八大软件+技能+素材网站
-
随着互联网行业的发展，UI设计师越来越多的被提及，UI设计师大火，需求岗位越来越多，也有越来越多的人转行投身UI设计师。UI设计是什么？一般所说的UI设计多指UI视觉设计，主要负责APP、Web、H5...
- 干货!一文读懂10种主流的图片格式
-
JPG、PNG、GIF，这些在我们生活中常见的图片格式，你真的了解它们吗？你知道除了这3种图片格式外，还有十多种主流的图片格式吗？每一种图片格式都有自己的特点和适用场景，选择正确的图片类型不仅能提升视...
- 最佳设计:A-Frame，阅读进度指示器，Colorify.js，交互式讲故事
-
最佳设计和开发好东西的综述以及一些新版本-第44期（2015年最后一期），包括A-Frame，阅读进度指示器，Colorify.js，交互式讲故事的动画地图路径，简单的Ionic侧菜单过渡等。摇滚...
- 当爆火的“粘土风”吹进铁路......
-
展播开始啦⑨<animateattributeName="opacity"begin="0s"dur="0.01"fill="freeze"from="1"to="1"/>&l...
- 日日是好日:书法艺术文字T恤定制，陶冶性情、现代生活新平衡
-
书法，心情和思想都融入文字的意境当中，对眼前或身边发生的不愉快事情视而不见、听而不闻，从而进入既轻松又舒适的状态，没有了妄念和烦恼，精神获得享受。本文节选自《DIYSKU个性化定制设计按需印刷行业出海...
- 从默默无闻到无可替代，Photoshop背后藏着多少不为人知的故事 ?
-
1990年2月推出了photoshop1.0。当时Photoshop只能在Mac计算机上运行，功能上也只有“工具”面板和少量的滤镜。1991年2月推出了photoshop2.0。该版本发行引发了桌...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 简介 (30)
- HTML 响应式设计 (31)
- HTML URL 编码 (32)
- HTML Web 服务器 (31)
- HTML 表单属性 (32)
- HTML 音频 (31)
- HTML5 支持 (33)
- HTML API (36)
- HTML 总结 (32)
- HTML 全局属性 (32)
- HTML 事件 (31)
- HTML 画布 (32)
- HTTP 方法 (30)
- 键盘快捷键 (30)
- CSS 语法 (35)
- CSS 选择器 (30)
- CSS 轮廓 (30)
- CSS 轮廓宽度 (31)
- CSS 谷歌字体 (33)
- CSS 链接 (31)
- CSS 中级教程 (30)
- CSS 定位 (31)
- CSS 图片库 (32)
- CSS 图像精灵 (31)
- SVG 文本 (32)