`

了解CSS3的文字阴影效果 - Text Shadow effects

css3文字阴影效果css3文字阴影text shadow 
阅读更多

日期：2012-4-8  来源：GBin1.com

了解CSS3的文字阴影效果 - Text Shadow effects

以 往的CSS开发中，如果我们需要给文字添加阴影效果，基本只能将文字做成图片，而对于CSS3来说，我们只需要添加对应的text-shadow就可以实 现。在今天我们带给大家的这篇文章中，我们将简单的介绍CSS3的text-shadow属性，看看我们能够制作什么样的文字特效。希望大家喜欢！

文字阴影CSS3属性

CSS3文字阴影可以应用于各种页面上的文字，首先这里我们介绍一下主要的属性：

  • xPosition： 这个属性定义了水平位置相对于文字本身的位移
  • yPosition：和xPosition类似，定义垂直的位移
  • blurSize：定义阴影的模糊效果
  • color：定义了阴影颜色，支持hex， rgb，rgba，hsl，hsla和颜色名称

我们可以定义如下的CSS3属性：

pre.gbin1Text{
  text-shadow: 1px 1px 2px #202020
}

上面CSS定义了一个向右下方移动1个像素的阴影，并且模糊为2个像素。颜色为灰色，效果如下：

GBin1 | 中文互联

以上演示中我们看到了不错的阴影效果。

目前CSS3的text-shadow效果在如下的浏览器中被支持：

  • Chrome
  • Firefox
  • Opera
  • Mozilla
  • IE10

是的，老版本的IE并不支持文字阴影效果。但是如果你在老版本浏览器中使用阴影的话，不会有任何影响。只不过你看不到超棒的阴影效果。

...

原文来自:了解CSS3的文字阴影效果 - Text Shadow effects

分享到：
| 一个HTML/CSS/Javascript的在线开发工具 - ...
评论
发表评论

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

相关推荐

    css-effects:css特效

    `box-shadow`、`text-shadow`属性可用于设置阴影效果。 6. CSS Flexbox布局：Flexbox提供了一种灵活的布局方式，可以轻松地处理元素的对齐、排列和尺寸调整。这对于创建响应式设计非常有用。 7. CSS Grid布局：CSS...

    各种css3效果动画

    11. **文字渲染（Text Effects）**：通过`text-stroke`, `text-fill-color`, `text-shadow`等属性，可以实现文字描边、填充色和阴影效果，增强文字的视觉表现力。 12. **SVG图形与整合**：SVG（Scalable Vector ...

    CSS3 3D文字拉伸发光动画特效.rar

    2. **Text Effects（文本效果）**：CSS3提供了许多新的文本样式，比如`text-shadow`用于添加文字阴影，模拟发光效果。通过设置多个颜色、偏移量和模糊半径，可以创建出复杂的文字发光效果。 3. **Animations（动画...

    css3 phshing the limit

    盒阴影允许开发者为元素添加阴影效果，可以通过`box-shadow`属性来实现。这个属性可以接受多个值，包括阴影的颜色、模糊程度等。 ```css div { box-shadow: 10px 10px 5px #888888; } ``` ##### 3. 渐变...

    精通html5+css3

    - CSS3支持为文本和盒子添加阴影效果。 - 示例代码：`box-shadow: 5px 5px 5px #888888;`，表示为盒子添加了一个水平偏移5像素、垂直偏移5像素、模糊半径5像素、颜色为灰色的阴影。 3. **图片边框（Image Borders...

    javascript高级应用开发培训讲义

    - **阴影效果**：通过`text-shadow`属性可以为文本添加阴影，增强视觉层次感。 - **内嵌效果**：`text-shadow`结合其他属性可以实现类似内嵌的效果。 - **霓虹风格效果**：利用透明度和颜色渐变可以制作出霓虹灯风格...

    纯css3仿GPS地图导航定位动画特效

    CSS3阴影可以为元素添加深度感，比如地图区域的立体效果或按钮的悬浮阴影。同时，线性渐变或径向渐变可用于创建平滑的颜色过渡，比如模仿GPS信号的增强或减弱。 7. 自定义字体与文本效果（Custom Fonts & Text ...

    CSS3.0参考手册

    - `box-shadow` 提供了给元素添加阴影效果的能力，可以通过指定阴影的偏移、模糊半径、颜色等参数来详细定制。 2. 背景（Backgrounds） - `background-origin` 确定背景定位区域，即背景图像的位置是相对于内边距...

    CSS3_参考手册

    - **定义与用法**：为文本添加阴影效果，可以创建深度和立体感。 ##### 2. `text-overflow` - **定义与用法**：当文本溢出时，控制如何处理溢出的部分，如省略号显示。 ##### 3. `word-wrap` - **定义与用法**：...

    个浏览器对css属性的不同支持

    6. **Shadow effects**：内阴影(`inset`)、文字阴影(`text-shadow`)和盒子阴影(`box-shadow`)在旧版浏览器中可能需要使用私有前缀。 7. **CSS Variables**：CSS自定义属性（变量）在Firefox 31+、Chrome 36+、...

    CSS3.0参考手册大全

    - **text-shadow**: 为文本添加阴影效果。 - **取值**：水平偏移量、垂直偏移量、模糊距离以及阴影颜色。 - **兼容性**：大部分现代浏览器均支持。 #### 文本效果（Text effects） 文本效果方面也有所增强： - ...

    css3.0参考手册 doc整理版

    - **text-shadow**：为文本添加阴影效果，可以设置阴影的偏移量、模糊半径和颜色。 - **text-overflow**：处理文本溢出，可隐藏超出容器范围的文本，并用省略号或其他符号表示。 - **word-wrap**：允许单词在必要...

    CSS手册(2.0~3.0)

    7. **文字阴影（Text Shadows）**和**文本渲染（Text Effects）**: `text-shadow`、`text-decoration`等属性让文本更具表现力。 8. **过渡（Transitions）**和**动画（Animations）**: 让元素在状态之间平滑变化，...

    css_effects

    `box-shadow`属性可以为元素添加阴影效果，包含水平偏移、垂直偏移、模糊半径和颜色等多个参数，可以创建出立体感。而`text-shadow`则为文本添加阴影，增加视觉层次感。 渐变是另一种常见的效果。CSS支持线性渐变...

    HTML5入门(1).pdf

    文本效果（Text effects）中，text-shadow用于添加文字阴影，text-overflow用于处理文字溢出的情况，word-wrap则可以控制单词的换行。此外，box-sizing属性改变了元素的盒模型，resize属性允许用户调整元素的大小，...

    CSS3的新特性介绍

    - `text-shadow`: 提供文字阴影效果，增加了文字的立体感。 - `text-overflow`: 当文本溢出容器时，可以使用"..."等提示符，包括ellipsis、clip、ellipsis-word和inherit四种方式。 - `word-wrap`: 控制长单词的...

    25个CSS3动画按钮和菜单教程分享

    8. **文字渲染（Text Effects）**: CSS3还引入了如`text-shadow`和`text-stroke`等属性，用于增强文字的视觉效果。 9. **响应式设计（Responsive Design）**：CSS3的媒体查询（Media Queries）使得按钮和菜单可以...

    CSS-Advanced：高级CSS

    高级CSS还涉及阴影效果，如`box-shadow`属性用于创建元素的外阴影，而`text-shadow`则用于创建文字阴影，提升视觉效果。 十、Masking与Clipping CSS Masking和Clipping允许你裁剪或隐藏元素的部分内容，以创建复杂...

    web_effects 网页特效

    - **Box Shadow 和 Text Shadow**: 添加阴影效果，增加视觉层次感。 - **Gradients**: 创建线性或径向渐变背景，增加设计的深度。 - **Flexbox**: 弹性盒布局模型，使得在不同屏幕尺寸下布局元素更加灵活。 - **...

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