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 相关文章推荐
CSS3教程:边框属性border的极致应用
Apr 02 HTML / CSS
利用CSS3的transition属性实现滑动效果
Aug 05 HTML / CSS
css3+伪元素实现鼠标移入时下划线向两边展开的效果
Apr 25 HTML / CSS
使用CSS3实现input多选框自定义样式的方法示例
Jul 19 HTML / CSS
HTML5 Web 存储详解
Sep 16 HTML / CSS
HTML5 Canvas概述
Aug 26 HTML / CSS
html5使用canvas画三角形
Dec 15 HTML / CSS
HTML5 video标签(播放器)学习笔记(一):使用入门
Apr 24 HTML / CSS
HTML5 video播放器全屏(fullScreen)方法实例
Apr 24 HTML / CSS
html5生成柱状图(条形图)效果的实例代码
Mar 25 HTML / CSS
canvas学习和滤镜实现代码
Aug 22 HTML / CSS
html5 http的轮询和Websocket原理
Oct 19 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
php Xdebug的安装与使用详解
2013/06/20 PHP
PHP命令行脚本接收传入参数的三种方式
2014/08/20 PHP
php简单构造json多维数组的方法示例
2017/06/08 PHP
javascript+iframe 实现无刷新载入整页的代码
2010/03/17 Javascript
jQuery中判断一个元素是否为另一个元素的子元素(或者其本身)
2012/03/21 Javascript
抛弃Nginx使用nodejs做反向代理服务器
2014/07/17 NodeJs
Bootstrap安装环境配置教程分享
2016/05/27 Javascript
COM组件中调用JavaScript函数详解及实例
2017/02/23 Javascript
vue2中,根据list的id进入对应的详情页并修改title方法
2018/08/24 Javascript
vue-cli脚手架搭建的项目去除eslint验证的方法
2018/09/29 Javascript
nuxt.js中间件实现拦截权限判断的方法
2018/11/21 Javascript
Vue实现商品分类菜单数量提示功能
2019/07/26 Javascript
[01:02:02]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第二局
2016/02/25 DOTA
Python 字典(Dictionary)操作详解
2014/03/11 Python
在Python的循环体中使用else语句的方法
2015/03/30 Python
python 写的一个爬虫程序源码
2016/02/28 Python
django rest framework vue 实现用户登录详解
2019/07/29 Python
PyQT5 实现快捷键复制表格数据的方法示例
2020/06/19 Python
python pygame 愤怒的小鸟游戏示例代码
2021/02/25 Python
科颜氏美国官网:Kiehl’s美国
2017/01/31 全球购物
简单的JAVA编程面试题
2013/03/19 面试题
家长对小学生的评语
2014/01/28 职场文书
《湘夫人》教学反思
2014/02/21 职场文书
厂办主管岗位职责范本
2014/02/28 职场文书
球队口号
2014/06/18 职场文书
党的群众路线教育实践活动调研报告
2014/11/03 职场文书
支行行长竞聘报告
2014/11/06 职场文书
2014年医院个人工作总结
2014/12/09 职场文书
2014年艾滋病防治工作总结
2014/12/10 职场文书
2015年组织委员工作总结
2015/04/23 职场文书
2015年防汛工作总结
2015/05/15 职场文书
厉行节约工作总结
2015/08/12 职场文书
小学生安全教育主题班会
2015/08/12 职场文书
《童年的发现》教学反思
2016/02/18 职场文书
新手,如何业余时间安排好写作、提高写作能力?
2019/10/21 职场文书
JS如何使用剪贴板操作Clipboard API
2021/05/17 Javascript