`
caiceclb
  • 浏览: 242449 次
  • 性别: Icon_minigender_1
  • 来自: 郑州
社区版块
存档分类
最新评论

CSS巧用text-shadow做图片阴影（小小研究版）

CSSOpera浏览器XHTMLHTML 
阅读更多

不用背景图也可实现图片阴影，只可惜只支持标准浏览器，ie6是被pass掉的，ieTester下7也没效果。请用火狐或Opera浏览。不过算是个小小的研究，开拓下思维。

 

代码已经压缩作为附件。效果截图如下：

 

 

 

图片阴影效果截图

 

主要代码：

 

<!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/xhtml">
 <head>
  <title> new document </title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <style type="text/css">
  body {
    font-size:62.5%;
}
p {position:relative;padding:0;margin:0;font-size:14em;font-weight:bold;color:#fff;text-shadow:#333 5px 5px 10px;}
img {position:absolute;left:20px;top:20px;}
  </style>
 </head>

 <body>
  <p>□
	<img src="kitty.jpg" alt="" />
  </p>
 </body>
</html>

 

  • 大小: 6.3 KB
0
顶
0
踩
分享到：
| 浮动列表在ie6
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    举例详解CSS中的text-shadow文字阴影效果使用

    在CSS中，`text-shadow`属性是一个非常有用的工具，它允许开发者为文本添加阴影效果，创造出各种视觉特效，从简单的文字阴影到复杂的光晕和浮雕效果。在本文中，我们将详细探讨`text-shadow`的使用方法，并通过几个...

    HTML5 CSS3 text-shadow 文字阴影立体特效.rar

    HTML5 CSS3 text-shadow 文字阴影立体特效，prefixfree.min.js插件和jquery配合实现的文字特效，使用时只需定义需要显示阴影的文字即可，页面打开后会自动生成阴影文字，测试时请使用支持HTML5内核的浏览器。

    CSS3文字阴影text-shadow属性代码示例

    /* text-shadow 给文字设置阴影的属性 text-shadow: 1px 2px 3px red; 1px表示X轴偏移量（取值范围负数~正数，负数阴影在左，正数阴影在右），2px表示Y轴偏移量，3px表示... 表示设置2个阴影，每个阴影用逗号分隔 */

    IE下text-shadow效果

    标题中的“IE下text-shadow效果”指的是在Internet Explorer（IE）浏览器中实现CSS3的`text-shadow`属性的方法。这个属性允许我们为文本添加阴影效果，通常在其他现代浏览器中广泛应用，但在较旧版本的IE中并不原生...

    IE兼容CSS3圆角border-radius的方法（同时兼容box-shadow，text-shadow）

    一种可行的方法是使用JavaScript库，如Modernizr，检测浏览器是否支持`text-shadow`，如果不支持，可以用JavaScript模拟效果。另一种方法是使用图片或者CSS3渐变来创建类似的效果，但这通常更复杂，且不适用于动态...

    CSS text-shadow属性

    没错,这些都是CSS3属性,而不是图片做成的. text-shadow是什么? text-shadow早在CSS2中已经存在,而现在CSS3也准备将他加入其中.并且由于一直以来只有Safari支持这个属性所以我们很少见到真正的应用,直到最近Firef

    CSS3文本阴影text-shadow属性详解

    **CSS3文本阴影text-shadow属性详解** 在网页设计中，为文本添加阴影效果可以增加视觉层次感和动态感。CSS3引入的`text-shadow`属性就是实现这一效果的关键。通过`text-shadow`，我们可以轻松地为文本添加各种阴影...

    利用CSS3的text-shadow属性设计网页艺术字特效

    利用CSS3新增的text-shadow属性可以生成文本阴影，在HTML文档中实现多重阴影特效、火焰特效、发光特效、凸起和镶嵌特效、描边特效和阴影特效的艺术字效果，大大提高开发效率，无需链接图片文件，节约带宽。

    CSS3 text-shadow实现文字阴影效果

    CSS3设置文字阴影效果，对文字字体设置阴影效果，采用text-shadow样式，本来在CSS2版本中也有此属性，但在CSS3中文字阴影text-shadow再次被应用，丰富文字排版布局美化效果。 CSS3单词与语法 CSS3单词： text-shadow...

    html5-3d-text-shadow.zip

    但仅用`text-shadow`无法实现3D效果，要达到3D文本阴影，我们需要利用CSS3的其他属性，如`transform`和`perspective`。`transform`属性可以改变元素的形状、大小和位置，而`perspective`则为元素及其子元素创建3D...

    用CSS的text-shadow制作超炫文字效果全攻略

    text-shadow 和 box-shadow 这两个属性在主流现代浏览器上得到了很好的支持( &gt; Chrome 4.0, &gt; Firefox 3.5, &gt; Safari 4.0, &gt; Opera 9.6, &gt; IE10)。text-shadow 和 box-shadow 的不同之处： box-shadow语法： CSS ...

    CSS3利用text-shadow属性实现多种效果的文字样式展现方法

    在CSS3中，`text-shadow`属性是一个非常实用的功能，它允许开发者为文本添加阴影效果，从而提升网页设计的视觉吸引力。这篇教程介绍了如何利用`text-shadow`属性创建多种文字样式，让文字更加生动有趣。 首先，`...

Magicbox
Global site tag (gtag.js) - Google Analytics