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旋转动画实例代码
Sep 11 HTML / CSS
CSS3 倾斜的网页图片库实例教程
Nov 14 HTML / CSS
CSS3之边框多颜色Border-color属性使用示例
Oct 11 HTML / CSS
CSS3 仿微信聊天小气泡实例代码
Apr 05 HTML / CSS
CSS3制作轮播图的一种方法
Nov 11 HTML / CSS
详解HTML5表单新增属性
Dec 21 HTML / CSS
使用HTML5 Canvas API中的clip()方法裁剪区域图像
Mar 25 HTML / CSS
html5使用Drag事件编辑器拖拽上传图片的示例代码
Aug 22 HTML / CSS
吃透移动端 Html5 响应式布局
Dec 16 HTML / CSS
HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题
May 28 HTML / CSS
html5实现九宫格抽奖可固定抽中某项奖品
Jun 15 HTML / CSS
HTML 里 img 元素的 src 和 srcset 属性的区别详解
May 21 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 中英文混合排版中处理字符串常用的函数
2007/04/12 PHP
PHP邮件发送类PHPMailer用法实例详解
2014/09/22 PHP
WordPress中的shortcode短代码功能使用详解
2016/05/17 PHP
PHP GD库相关图像生成和处理函数小结
2016/09/30 PHP
javascript xml为数据源的下拉框控件
2009/07/07 Javascript
javascript 继承实现方法
2009/08/26 Javascript
javascript字符串拼接的效率问题
2010/12/25 Javascript
JQuery的AJAX实现文件下载的小例子
2013/05/15 Javascript
JavaScript实现简单的时钟实例代码
2013/11/23 Javascript
jQuery检测输入的字符串包含的中英文的数量
2015/04/17 Javascript
深入探究AngularJS框架中Scope对象的超级教程
2016/01/04 Javascript
获取JS中网页各种高宽与位置的方法总结
2016/07/27 Javascript
JS判断浏览器是否安装flash插件的简单方法
2016/09/13 Javascript
JS实现table表格固定表头且表头随横向滚动而滚动
2017/10/26 Javascript
vue cli使用融云实现聊天功能的实例代码
2019/04/19 Javascript
Vue + Elementui实现多标签页共存的方法
2019/06/12 Javascript
vue 使用v-for进行循环的实例代码详解
2020/02/19 Javascript
[47:12]TFT vs Secret Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
Python 代码性能优化技巧分享
2012/08/07 Python
python连接mysql数据库示例(做增删改操作)
2013/12/31 Python
在Python的框架中为MySQL实现restful接口的教程
2015/04/08 Python
轻量级的Web框架Flask 中模块化应用的实现
2017/09/11 Python
django admin管理工具自定义时间区间筛选器DateRangeFilter介绍
2020/05/19 Python
如何利用Python给自己的头像加一个小国旗(小月饼)
2020/10/02 Python
几个Linux面试题笔试题
2016/08/01 面试题
后勤主管工作职责
2013/12/07 职场文书
法学专业本科生自荐信范文
2013/12/17 职场文书
自我鉴定四大框架
2014/01/17 职场文书
十岁生日父母答谢词
2014/01/18 职场文书
校企合作协议书
2014/04/16 职场文书
房产公证书
2015/01/23 职场文书
投标售后服务承诺书
2015/04/29 职场文书
大学生心理健康活动总结
2015/05/08 职场文书
毕业论文致谢词
2015/05/14 职场文书
SQL Server中交叉联接的用法详解
2021/04/22 SQL Server
java executor包参数处理功能 
2022/02/15 Java/Android