CSS3教程:网页文字阴影属性text

文章简介:文字阴影在很多设计中都有应用,在过去我们只能通过图片来实现在Web上显示文字阴影,但是这样做对不太利于SEO,所以在CSS3中,text-shadow又恢复了其属性(text-shadow属性是CSS3中定义的,在CSS2.1中删除了)。

文字阴影在很多设计中都有应用,在过去我们只能通过图片来实现在Web上显示文字阴影,但是这样做对不太利于SEO,所以在CSS3中,text-shadow又恢复了其属性(text-shadow属性是CSS3中定义的,在CSS2.1中删除了)。

text-shadow:

  此属性有4个值,前两个值分别表示水平方向位移距离和垂直方向的位移距离,第三个值表示阴影的模糊半径(包含0及以下的值均表示无模糊),最后一个则是阴影的颜色,为了更方便大家理解次属性的这四个值,W3Cfuns特意为大家做了下图,虽比较简单,但是能够很清楚的理解这四个值。

<!DOCTYPE HTML>
 
<html>
 
    <head>
 
        <meta charset="gb2312">
 
        <title>CSS3教程:网页文字阴影属性text-shadow-网页教学网webjx.com</title>
 
        <style type="text/css">
 
        *{margin:0; padding:0;}
 
                body{font-size:14px; color:#333; font-family:"Microsoft Yahei";}
 
                h2,p{text-shadow:-5px 5px 5px #dfdfdf;}
 
        </style>
 
    </head>
 
   
    <body>
 
        <h2>网页教学网webjx.com!</h2>
 
        <p>网页教学网提供最新的网页制作、网页设计、网页特效,为个人网站提供网页素材模板和网页视频学习!</p>
 
    </body>
 
</html>

时间: 2024-10-28 03:41:34

CSS3教程:网页文字阴影属性text的相关文章

css3文本阴影属性text

css3文本阴影属性text-shadow的几点说明: css2的时候已经有了text-shadow这个属性,但是css2.1的又删除了这个属性,css3又重新使用了这个属性: text-shadow:阴影水平偏移值(可取正负值): 阴影垂直偏移值(可取正负值):阴影模糊值:阴影颜色 Firefox,webkit内核的Safari和Chrome,Opera支持Text Shadow(文本阴影):text-shadow:2px 2px 5px #333333 一个文本可以使用多个文本阴影 IE不支

思妙FLASH系列教程-文字阴影

教程 思妙的动画以其幽默和精美被广为流传,现在思妙推出了系列教程,以其惯有的幽默生动的讲解了FLASH动画的入门知识,闪客帝国被授权转载,本篇为初级教程的第十一课:浮雕文字和阴影文字.

CSS3实例教程:盒模型添加阴影属性box

文章简介:我们要对盒模型添加阴影怎么办呢?其实它的用法与text-shadow用法一样,只不过属性名称是box-shadow. 我们要对盒模型添加阴影怎么办呢?其实它的用法与text-shadow用法一样,只不过属性名称是box-shadow. 相关文章:CSS3教程:网页文字阴影属性text-shadow box-shadow: 此属性与text-shadow一样有4个值,前两个值分别表示水平方向位移距离和垂直方向的位移距离,第三个值表示阴影的模糊半径(包含0及以下的值均表示无模糊),最后一个

CSS3网页制作实例:实现网页文字渐变内发光投影

文章简介:纯CSS3文字 渐变内发光投影效果. 前阵子做了个css3文字效果,涉及css3投影,渐变,蒙版,伪类等知识点,现在写下设计思路,仅供参考.发个效果图大家看先: 投影shadow box-shadow 一般我们都是用css3的box-shadow来实现盒投影,用text-shadow来实现文字投影,box-shadow设置方型盒子投影,用raidus的话可以让盒子产生圆角,看起来就很圆滑舒服,一般的写法是这样的: -moz-box-shadow:1px 1px 5px #000; 1p

CSS3 HTML5块阴影与文字阴影实例

阴影效果曾让 Web 设计师既爱又恨,现在,有了 CSS3,你不再需要 Photoshop,已经有网站在使用这个功能了,如 24 Ways website. -webkit-box-shadow: 10px 10px 25px #ccc; -moz-box-shadow: 10px 10px 25px #ccc; box-shadow: 10px 10px 25px #ccc; 前两个属性设置阴影的 X / Y 位移,这里分别是 10px,第3个属性定义阴影的虚化程度,最后一个设置阴影的颜色.文

CSS实例教程:使用CSS3实现实现文字渐变方法

文章简介:我们有发表过CSS文字渐变效果,但是其实那并不是纯粹的基于CSS的渐变,它需要一张半透明渐变的png图片.今天我们将介绍两种使用CSS3实现实现文字的方法. 之前,我们有发表过CSS文字渐变效果,但是其实那并不是纯粹的基于CSS的渐变,它需要一张半透明渐变的png图片.今天我们将介绍两种使用CSS3实现实现文字的方法.嗯,只有webkit浏览器支持,请暂时无视其它浏览器. 1.-webkit-mask 在<CSS的未来:一些试验性CSS属性>中,我们提到了这个属性,相对于Firefo

css3文本阴影属性text-shadow说明

css3文本阴影属性text-shadow的几点说明: css2的时候已经有了text-shadow这个属性,但是css2.1的又删除了这个属性,css3又重新使用了这个属性: text-shadow:阴影水平偏移值(可取正负值): 阴影垂直偏移值(可取正负值):阴影模糊值:阴影颜色 Firefox,webkit内核的Safari和Chrome,Opera支持Text Shadow(文本阴影):text-shadow:2px 2px 5px #333333 一个文本可以使用多个文本阴影 IE不支

图解css3:核心技术与案例实战. 3.5 CSS3盒子阴影属性

3.5 CSS3盒子阴影属性 box-shadow也是CSS3新增的一个重要属性,用来定义元素的盒子阴影.本节主要介绍CSS3的box-shadow的属性以及如何使用. 3.5.1 box-shadow属性的语法及参数 在具体学习box-shadow使用方法之前,我们必须先知道box-shadow使用的语法规则. box-shadow:none | [ <length> <length> <length>?<length>? || <color>

CSS3教程CSS3:阴影

阴影大约从CSS2就开始有了,但是只有Safari一个浏览器支持它,到现在依然是这样.阴影在CSS3中可以应用在边框和文字上,就像图片的阴影效果一样. 一般可以分为box-shadow和textshadow两类. CSS3的box-shadow和textshadow可以写做:box-shadow:Apx Bpx Cpx #xxx; Apx = x轴 Bpx = y轴 Cpx = 投影长度 #XXX = 像通常一样的颜色 了解了这些,我们就可以以下面的方法开始体验了- 浏览器兼容性: 在前面的介绍