最近网上热炒的一个话题是如何用CSS美化半个字符。就是把一个字符劈成两半，一半是A样式，一半是B样式。当然，大家都知道，不论是中文字符还是西文字符，单个字符否是无法拆分的，它们是文字的最新单元，如果是美化半个词或半个句子，这估计大家都知道如何做，也很常见。但半个字符如何美化呢？当然有办法，这里需要的就是艺术。
先看看需要的效果图。
左边是一种颜色，右边是一种颜色。如果是用图片做，这当然很容易，但图片有图片的局限性，比如不能动态的生成字符样式。下面我们就来看看用纯CSS如何实现这样的效果。
CSS3图片倒影技术实现及原理
13,612 人浏览
目前为止我们已经探讨了很多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；
给倒影增加消隐效果
在现实生活中，倒影的出现通常是上半部比较清[......]
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[......]
扫一扫
167
到【灌水乐园】发言
