CSS样式文本的虚化效果怎么做?

html-css09

CSS样式文本的虚化效果怎么做?,第1张

文本虚拟化效果可以通过css的text-shadow来实现。

text-shadow语法:

text-shadow : none | <length>none | [<shadow>, ] * <shadow>或none | <color>[, <color>]*

也就是:

text-shadow:[颜色(Color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)],[颜色(color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)]...

或者

text-shadow:[x轴(X Offset) y轴(Y Offset) 模糊半径(Blur) 颜色(Color)],[x轴(X Offset) y轴(Y Offset) 模糊半径(Blur) 颜色(Color)].

例子:

.demo {background: #666666width: 440pxpadding: 30pxfont: bold 55px/100% "微软雅黑", "Lucida Grande", "Lucida Sans", Helvetica, Arial, Sanscolor: #ffftext-transform: uppercase}

在正式绘制边框前,我们先认识一下CSS3 border-image-slice 属性,它可以将border-image-source获取的边框背景图片切割为9份。语法如下:

border-image:border-image-source slice-width{1,4}

slice-width的值可以是具体像素,也可以是百分比。切割后的图片块分别是

border-top-left-image border-top-image border-top-right-image

border-left-image border-right-image

border-bottom-left-image border-bottom-image border-bottom-right-image

其中,border-top-image和border-bottom-image区域受到水平方向效果影响,如果是repeat则此区域图片会水平重复,如果是round则会水平平铺,责任stretch则被水平拉升。而我们设置虚线,则选择repeat/round都可以。

背景图片虚化主要依靠的是 filter: blur(15px) 这个css属性 blur值 越大 模糊程度也越大 最终我们希望的效果图是这样的 实现方式: 第一步 一个大的 div 里面包裹两个 小的 div1 和 div2 第二步 div1元素加入背景、宽高、过滤(filter)、浮动 第三步 div2元素 开启定位 absolute(一定要脱离普通文档流) 现在基本的效果就实现了,想让页面更美观 剩下的就要自己动手喽 关键点就是 filter属性 :让图片模糊 脱离普通文档流 :内容放到模糊div1 的上面