CSS3教程(4):网页边框和网页文字阴影


Posted in HTML / CSS onApril 02, 2009

阴影大约从CSS2就开始有了,但是只有Safari一个浏览器支持它,到现在依然是这样。阴影在CSS3中可以应用在边框和文字上,就像图片的阴影效果一样.
阴影大约从CSS2就开始有了,但是只有Safari一个浏览器支持它,到现在依然是这样。阴影在CSS3中可以应用在边框和文字上,就像图片的阴影效果一样。
上一篇介绍了:CSS3教程(3):border-color网页边框色彩
一般可以分为box-shadow和textshadow两类。
CSS3的box-shadow和textshadow可以写做:box-shadow:Apx Bpx Cpx #xxx;
Apx = x轴
Bpx = y轴
Cpx = 投影长度
#XXX = 像通常一样的颜色
了解了这些,我们就可以以下面的方法开始体验了…
浏览器兼容性:
在前面的介绍中,我们已经声明,并不是所有的浏览器都支持CSS3.最好的支持CSS3阴影效果的浏览器是Safari,也就是说,我们现在只需要用刀-webkit前缀。
CSS3教程(4):网页边框和网页文字阴影
#boxShadow{ border: 5px solid #111; -webkit-box-shadow: 5px 5px 7px #999; -webkit-border-bottom-right-radius: 15px; padding: 15px 25px; height: inherit; width: 590px; }
这种效果同样可以用于图片…
浏览器支持:

  • FireFox (3.0.5) - [FireFox (3.1 PreAlpha) 兼容]
  • Google Chrome (1.0.154.)
  • Google Chrome (2.0.156.)(支持不是太好)
  • Internet Explorer (IE7/ IE8 RC1)
  • Opera (9.6)
  • Safari (3.2.1, Windows)
    简单文字阴影:
    CSS3教程(4):网页边框和网页文字阴影
    .textShadowSingle { font-size: 3.2em; color: #F5F5F5; text-shadow: 3px 3px 7px #111; text-align: center; }
    浏览器支持:
    • FireFox (3.0.5) - [FireFox (3.1 PreAlpha) 兼容]
    • Google Chrome (1.0.154.)
    • Google Chrome (2.0.156.)(支持不是太好)
    • Internet Explorer (IE7/ IE8 RC1)
    • Opera (9.6)
    • Safari (3.2.1, Windows)
      多重文字阴影
      CSS3教程(4):网页边框和网页文字阴影
      .textShadowMultiple { font-size: 3.2em; color: #FFF; text-shadow: 0px -11px 10px #C60, 0px -3px 9px #FF0; text-align: center; padding: 10px 0px 5px 0px; background: #151515; }
      浏览器支持
      • FireFox (3.0.5) - [FireFox (3.1 PreAlpha) 兼容]
      • Google Chrome (1.0.154.)
      • Google Chrome (2.0.156.)(支持不是太好)
      • Internet Explorer (IE7/ IE8 RC1)
      • Opera (9.6)
      • Safari (3.2.1, Windows)
HTML / CSS 相关文章推荐
canvas之万花筒效果的简单实现(推荐)
Aug 16 HTML / CSS
css3 仿写阿里云水纹效果的示例代码
Feb 10 HTML / CSS
CSS Houdini实现动态波浪纹效果
Jul 30 HTML / CSS
css3 transform导致子元素固定定位变成绝对定位的方法
Mar 06 HTML / CSS
深入浅析CSS3中的Flex布局整理
Apr 27 HTML / CSS
HTML5中的postMessage API基本使用教程
May 20 HTML / CSS
html5的localstorage详解
May 09 HTML / CSS
html5 web本地存储将取代我们的cookie
Dec 26 HTML / CSS
用HTML5制作一个简单的桌球游戏的教程
May 12 HTML / CSS
Html5 video标签视频的最佳实践
Feb 26 HTML / CSS
html5实现九宫格抽奖可固定抽中某项奖品
Jun 15 HTML / CSS
CSS实现多个元素在盒子内两端对齐效果
Mar 30 HTML / CSS
CSS3教程(5):网页背景图片
Apr 02 #HTML / CSS
CSS3教程(7):CSS3嵌入字体
Apr 02 #HTML / CSS
CSS3教程(6):创建网站多列
Apr 02 #HTML / CSS
CSS3教程(8):CSS3透明度指南
Apr 02 #HTML / CSS
CSS3教程(10):CSS3 HSL声明设置颜色
Apr 02 #HTML / CSS
CSS3教程(9):设置RGB颜色
Apr 02 #HTML / CSS
CSS教程:CSS3圆角属性
Apr 02 #HTML / CSS
You might like
一个简洁的多级别论坛
2006/10/09 PHP
php 传值赋值与引用赋值的区别
2010/12/29 PHP
php join函数应用
2011/05/04 PHP
php 伪静态之IIS篇
2014/06/02 PHP
PHP函数extension_loaded()用法实例
2015/01/19 PHP
使用php完成常见的文件上传功能(推荐)
2017/01/13 PHP
prototype 源码中文说明之 prototype.js
2006/09/22 Javascript
javascript 控制 html元素 显示/隐藏实现代码
2009/09/01 Javascript
javascript 跳转代码集合
2009/12/03 Javascript
页面装载js及性能分析方法介绍
2014/03/21 Javascript
javascript实现的HashMap类代码
2014/06/27 Javascript
jquery实现炫酷的叠加层自动切换特效
2015/02/01 Javascript
javascript拖拽应用实例
2016/03/25 Javascript
jQuery获取及设置表单input各种类型值的方法小结
2016/05/24 Javascript
nginx+vue.js实现前后端分离的示例代码
2018/02/12 Javascript
vue文件树组件使用详解
2018/03/29 Javascript
JQuery实现ajax请求的示例和注意事项
2018/12/10 jQuery
vue从一个页面跳转到另一个页面并携带参数的解决方法
2019/08/12 Javascript
VuePress 中如何增加用户登录功能
2019/11/29 Javascript
JavaScript接口实现方法实例分析
2020/05/16 Javascript
微信小程序学习总结(一)项目创建与目录结构分析
2020/06/04 Javascript
[01:00:30]TFT vs VGJ.T Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
Python中遍历字典过程中更改元素导致异常的解决方法
2016/05/12 Python
django3.02模板中的超链接配置实例代码
2020/02/04 Python
Python数据可视化处理库PyEcharts柱状图,饼图,线性图,词云图常用实例详解
2020/02/10 Python
class类在python中获取金融数据的实例方法
2020/12/10 Python
《盘古开天地》教学反思
2014/02/28 职场文书
新学期开学标语
2014/06/30 职场文书
县政府领导班子四风问题对照检查材料思想汇报
2014/09/26 职场文书
小学教师师德师风自我评价
2015/03/04 职场文书
五星级酒店前台接待岗位职责
2015/04/02 职场文书
2019年度行政文员工作计划范本!
2019/07/04 职场文书
推荐六本经典文学奖书籍:此生必读
2019/08/22 职场文书
python文本处理的方案(结巴分词并去除符号)
2021/05/26 Python
一篇文章告诉你如何实现Vue前端分页和后端分页
2022/02/18 Vue.js
JS实现简单九宫格抽奖
2022/06/28 Javascript