1.text-shadow 有3个length参数,第1个表示水平偏移,第2个表示垂直偏移,第3个表示模糊(可选) .text11{text-shadow: 3px 3px 5px #f00 ;color: yellowgreen;} 

2.-webkit-text-stroke 描边的文字: -webkit-text-stroke: 1px yellow 描边为1px

3.box-reflect 文字倒影: -webkit-box-reflect: below 10px; 文字和倒影之间相隔10px, -webkit-box-reflect: below 1px linear-gradient(transparent,transparent 50%,rgba(0,0,0,.3)); 可使用Gradient图像或image作为遮罩。

4.text-fill-color 文字填充  -webkit-text-fill-color:#f00; 直接填充, -webkit-text-fill-color:transparent;-webkit-text-stroke:1px #000; 镂空文字。

   background-image:-webkit-linear-gradient(#fff,#000);-webkit-background-clip:text;-webkit-text-fill-color:transparent; 渐变文字。

   background-image:-webkit-linear-gradient(#fff,#000);-webkit-background-clip:text;-webkit-text-fill-color:transparent; -webkit-text-stroke:1px transparent; 加上描边,效果会更好一点。

line-height:320px; height:320px; width:100%; text-align:center; letter-spacing:-2rem; font-size:15rem; font-weight:bolder; background:url(../img/bg.gif) repeat center center; -webkit-text-fill-color:transparent; -webkit-background-clip:text;

可以放一个gif,效果也是可以的。

css3 文字的设置的更多相关文章

  1. CSS3文字描边 CSS3字体外部描边

    给需要实现文字描边的元素添加如下CSS3的属性 text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0; -webkit-t ...

  2. CSS3 文字渐变动画

    背景剪裁 语法:background-clip: border-box || padding-box || context-box || no-clip || text 本次用到的就是: -webki ...

  3. 3.css3文字与字体

    1.css3文字与字体: ①Font-size:大小. ⑴通常使用px.百分比.em来设置大小: ⑵xx-small.x-small.small.medium.large.x-large.xx-lar ...

  4. jQuery+CSS3文字跑马灯特效

    jQuery+CSS3文字跑马灯特效是一款将跑马灯背景制作为3D立方体效果,文字在上面移动时,就像是文字投影到墙壁上,在转角出会改变运动方向. 效果展示 http://hovertree.com/te ...

  5. CSS3文字阴影实现乳白文字效果

    CSS3文字阴影实现乳白文字效果是一款有效利用css3的text-shadow属性,可以实现很多漂亮的效果,CSS3 文字阴影 文字特效,字体效果. 源码下载:http://www.huiyi8.co ...

  6. 纯CSS3文字Loading动画特效

    纯CSS3文字Loading动画特效是一款个性的loading文字加载动画. 在线演示本地下载

  7. 【转】CSS3的REM设置字体大小

    rem 长度单位   在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激烈的争论着,有人说PX做为单位好,有人说EM优点多,还有人在说百分比方便,以至于出现了CSS Font-Size: ...

  8. CSS3的REM设置字体大小

    在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激烈的争论着,有人说PX做为单位好,有人说EM优点多,还有人在说百分比方便,以至于出现了CSS Font-Size: em vs. px v ...

  9. 常用CSS3效果:用text-shadow做CSS3 文字描边

    思路: 利用CSS3的text-shadow属性,对文字的四个边均用阴影. 最终效果: 单纯的为了实现效果.未作任何美化. 实现代码: HTML: <div>文字描边效果</div& ...

随机推荐

  1. Stanford CS224N 第二课: word2vec详细介绍

    word2vec模型 word2vec 模型有两种: Continuous Skip-gram Model 和 Continuous Bag of Words Model (CBOW). 本文主要讲解 ...

  2. 【BZOJ3626】LCA(树链剖分,Link-Cut Tree)

    [BZOJ3626]LCA(树链剖分,Link-Cut Tree) 题面 Description 给出一个n个节点的有根树(编号为0到n-1,根节点为0).一个点的深度定义为这个节点到根的距离+1. ...

  3. [SCOI2008]斜堆

    题目大意 1.题目描述 斜堆(skew heap)是一种常用的数据结构. 它也是二叉树,且满足与二叉堆相同的堆性质: 每个非根结点的值都比它父亲大.因此在整棵斜堆中,根的值最小. . 但斜堆不必是平衡 ...

  4. PKUWC2018游记

    PKUWC2018游记 Day -inf 从去年的12月底开始停课,到现在也有整整一个月的时间了. 前两周考的是OI赛制,后来就变成了IOI赛制. 整体上考的很炸,虐场的次数远少于被虐的次数. 关于去 ...

  5. [Luogu2664]树上游戏

    题面戳我 sol 点分.我们面临的最主要一个问题,就是如何在\(O(n)\)的时间内算出所有LCA为根的点对的贡献,还要分别累加到它们自己的答案中去. \(num_i\):每一种颜色的数量.你可以认为 ...

  6. 【xsy2115】Delight for a Cat

    Time Limit: 1000 ms Memory Limit: 512 MB Description ​ 从前,有一只懒猫叫CJB.每个小时,这只猫要么在睡觉,要么在吃东西,但不能一边睡觉一边吃东 ...

  7. 关于Android attrs 自定义属性的说明

    写个自定义控件时经常要自定义一些自己的属性,平时用的都是那几个,今天就顺便一起总结一下这个东东吧- 一.定义:属性的定义都在attrs.xml文件里面: 二.读取:通过都是通过TypedArray去读 ...

  8. WordPress文章中插入qq表情

    看见一些博客中使用了QQ表情,这个效果还是很不错的,可以让文章看起来更爽,那么这个是怎么实现的呢? 下面我就来说说方法. 工具:QQ表情包,下载地址:http://yunpan.cn/cLw6UhwB ...

  9. 《深入理解Bootstrap》读书笔记(一)

    栅格系统 实现原理 通过定义容器大小,平分12份,再调整内外边距,最后结合媒体查询. 通过一系列包含内容的行和列来创建页面布局.下面列出了 Bootstrap 栅格系统是如何工作的: 1.行必须放置在 ...

  10. 配置puppet的主机端和客户端的自动认证

    配置puppet的主机端和客户端的自动认证 author:headsen  chen    2017-11-01  17:44:56 个人原创,转载请注明作者,出处,否则依法追究法律责任 1,先在主机 ...