用CSS3美化半个字符巧妙方法

最近网上热炒的一个话题是如何用CSS美化半个字符。就是把一个字符劈成两半，一半是A样式，一半是B样式。当然，大家都知道，不论是中文字符还是西文字符，单个字符否是无法拆分的，它们是文字的最新单元，如果是美化半个词或半个句子，这估计大家都知道如何做，也很常见。但半个字符如何美化呢？当然有办法，这里需要的就是艺术。

先看看需要的效果图。

左边是一种颜色，右边是一种颜色。如果是用图片做，这当然很容易，但图片有图片的局限性，比如不能动态的生成字符样式。下面我们就来看看用纯CSS如何实现这样的效果。

CSS美化半个[......]

阅读全文>>

本条目发布于五月 15, 2014。属于CSS3教程分类，被贴了 文字特效 标签。

CSS3图片倒影技术实现及原理

13,612 人浏览

6条回复

目前为止我们已经探讨了很多CSS3中的新功能和新特征。除了上面这些，实际上还有很多CSS新属性并未包含进CSS3官方标准中，像谷歌浏览器或火狐浏览器等都会利用CSS的浏览器引擎前缀(Vendor Prefix)来实现很多自定义的CSS功能。-webkit-box-reflect属性就是以谷歌浏览器为代表的Webkit渲染引擎独有的特征。-webkit-box-reflect的作用是让图片出现倒影。

实现倒影的基本语法

实现倒影的基本语法非常的直观，假设我们想给下面的图片增加倒影效果，可以这样写：

img {    -webkit-box-reflect: below;}

上面这个例子中倒影出现了图片的下方，但实际上我们也可以将倒影安置在左侧、右侧或上侧。

倒影偏移量

Offset属性值用来定义图片和倒影影像之间的间距。参考下面的代码：

img {    -webkit-box-reflect: below 10px;}

上面的代码中，我们使图片和倒影影像之间相聚10px；

给倒影增加消隐效果

在现实生活中，倒影的出现通常是上半部比较清[......]

阅读全文>>

本条目发布于五月 13, 2014。属于CSS3教程分类，被贴了 CSS3图片 标签。

CSS3的Background-size很重要

13,884 人浏览

发表回复

如果问是什么让所有男人都生活中恐惧中，回答是不确定。没有人表露，但好奇会害死猫。十个女人中会有九个同意这点。广告商想尽办法让我们觉得不足够，但会告诉我们还可以改进。没错，先生们….size很重要。

我说的是background-size。CSS里的background-size属性能够让程序员决定如何在指定的元素里展示。MooTools程序员Christoph Pojer在他的网站上运用了background-size技术，使得在浏览器上他的头像始终“全面覆盖”在页头上——甚至是在手机上。下面让我们来看看神奇的background-size属性是如何使用的。

background-size CSS属性

这个background-size属性有几个预定义的值，但也可以像其它size属性一样使用数字：

• contain: 包含，整个背景图都要被包含在元素内，没有超出的部分。
• cover: 覆盖，背景要覆盖元素的所有区域，不能有空白出现。
• 长度/百分比: 数字值

不管你相信与否，这最有趣的部分是当它的值为长度和百分比的时候。下面用几个例子演示一下 backgro[......]

阅读全文>>