能够通过w3验证的css文字阴影效果

2016-02-19 15:37 4 1 收藏

每个人都希望每天都是开心的,不要因为一些琐事扰乱了心情还,闲暇的时间怎么打发,关注图老师可以让你学习更多的好东西,下面为大家推荐能够通过w3验证的css文字阴影效果,赶紧看过来吧!

【 tulaoshi.com - Web开发 】

CSS2中的text-shadow属性能够很容易的给web页面中的文本添加阴影,但是到目前为止只有OS X的Safari浏览器支持它,今天,我们将为其他浏览器创建CSS文本阴影效果,包括Firefox,并且能够通过w3验证。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

讨论了多年的text-shadow属性可以让你控制页面元素阴影的颜色、偏移量及模糊度,尽管其还未被广泛支持,但是某些设计师已经开始决定在任意地方使用CSS text-shadows属性了。尽管这只是为很少数量的用户增强性设计。
  以下为示例,使用的时候注意a的 position:relative及span中的position:absoluteview plaincopy to clipboardprint?
style  
ul,li{ margin:0px; padding:0px;list-style-type: none;} 
#nav{font-family: Verdana, "宋体", Arial;} 
#nav li{ float:left; margin-left:30px;} 
#nav span{display:none;} 
#nav a{font-size:12px;font-weight: bold;color: #FF6600;text-decoration: none; display:block;} 
#nav a:hover{ color:#999;top:1px; left:1px; position:relative;} 
#nav a:hover span{ display:block; top:-2px; left:-2px; position:absolute; color:#FF3300;cursor:pointer;}  
/style 

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

style
ul,li{ margin:0px; padding:0px;list-style-type: none;}
#nav{font-family: Verdana, "宋体", Arial;}
#nav li{ float:left; margin-left:30px;}
#nav span{display:none;}
#nav a{font-size:12px;font-weight: bold;color: #FF6600;text-decoration: none; display:block;}
#nav a:hover{ color:#999;top:1px; left:1px; position:relative;}
#nav a:hover span{ display:block; top:-2px; left:-2px; position:absolute; color:#FF3300;cursor:pointer;}
/styleview plaincopy to clipboardprint?
div id="nav"  
 ul  
 lia href="#"网站首页span网站首页/span/a/li  
 lia href="#"网站首页span网站首页/span/a/li  
 lia href="#"网站首页span网站首页/span/a/li  
 lia href="#"网站首页span网站首页/span/a/li  
 lia href="#"网站首页span网站首页/span/a/li  
 /ul  
/div

来源:http://www.tulaoshi.com/n/20160219/1610017.html

延伸阅读
标签: Web开发
阴影大约从CSS2就开始有了,但是只有Safari一个浏览器支持它,到现在依然是这样。阴影在CSS3中可以应用在边框和文字上,就像图片的阴影效果一样。 上一篇介绍了:CSS3教程(3):border-color网页边框色彩 一般可以分为box-shadow和textshadow两类。 CSS3的box-shadow和textshadow可以写做:box-shadow:Apx Bpx Cpx #xxx; Apx = x轴 Bpx = y...
标签: Web开发
阴影大约从CSS2就开始有了,但是只有Safari一个浏览器支持它,到现在依然是这样。阴影在CSS3中可以应用在边框和文字上,就像图片的阴影效果一样。 一般可以分为box-shadow和textshadow两类。 CSS3的box-shadow和textshadow可以写做:box-shadow:Apx Bpx Cpx #xxx; Apx = x轴 Bpx = y轴 Cpx = 投影长度 #XXX = 像通常一样的颜色 了解了这些,...
标签: Web开发
一般我们可以使用背景图的方式给图片添加阴影,但对于不固定尺寸的图片如何实现呢? 我们可以采取视觉欺骗大法定义渐变边框来实现 运行代码框 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"html xmlns="http://www.w3.org/1999/x...
标签: Web开发
本教程一共三个例子:1、如何重复背景图像;2、如何在垂直方向重复背景图像;3、如何在水平方向重复背景图像。 参考网页教学网关于CSS背景的理论知识:。 1、如何重复背景图像 本例演示如何重复背景图像。 html head style type="text/css" body { background-image: url(/i/eg_bg_03.gif); background-repeat: repeat } /style...
一、在<div class=tzhI am TZH! 标点符号问题。这其实也是大家最容易忽视的问题,其实就是小小的两个引号,就造成了这个错误。虽然很多浏览器在不加引号的情况下仍然能正确识别渲染。但是这样想要通过严格的W3C XHTML国际标准是不可能的,请大家记住等号后面一定要接引号。正确写法:<div class="tzh"I am TZH!  ...

经验教程

123

收藏

27
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部