css3 文字的设置
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 文字的设置的更多相关文章
- CSS3文字描边 CSS3字体外部描边
给需要实现文字描边的元素添加如下CSS3的属性 text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0; -webkit-t ...
- CSS3 文字渐变动画
背景剪裁 语法:background-clip: border-box || padding-box || context-box || no-clip || text 本次用到的就是: -webki ...
- 3.css3文字与字体
1.css3文字与字体: ①Font-size:大小. ⑴通常使用px.百分比.em来设置大小: ⑵xx-small.x-small.small.medium.large.x-large.xx-lar ...
- jQuery+CSS3文字跑马灯特效
jQuery+CSS3文字跑马灯特效是一款将跑马灯背景制作为3D立方体效果,文字在上面移动时,就像是文字投影到墙壁上,在转角出会改变运动方向. 效果展示 http://hovertree.com/te ...
- CSS3文字阴影实现乳白文字效果
CSS3文字阴影实现乳白文字效果是一款有效利用css3的text-shadow属性,可以实现很多漂亮的效果,CSS3 文字阴影 文字特效,字体效果. 源码下载:http://www.huiyi8.co ...
- 纯CSS3文字Loading动画特效
纯CSS3文字Loading动画特效是一款个性的loading文字加载动画. 在线演示本地下载
- 【转】CSS3的REM设置字体大小
rem 长度单位 在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激烈的争论着,有人说PX做为单位好,有人说EM优点多,还有人在说百分比方便,以至于出现了CSS Font-Size: ...
- CSS3的REM设置字体大小
在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激烈的争论着,有人说PX做为单位好,有人说EM优点多,还有人在说百分比方便,以至于出现了CSS Font-Size: em vs. px v ...
- 常用CSS3效果:用text-shadow做CSS3 文字描边
思路: 利用CSS3的text-shadow属性,对文字的四个边均用阴影. 最终效果: 单纯的为了实现效果.未作任何美化. 实现代码: HTML: <div>文字描边效果</div& ...
随机推荐
- 在laravel环境下将图片存入MongoDB数据库
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...
- 【Luogu3444】ORK-Ploughing(贪心)
[Luogu3444]ORK-Ploughing(贪心) 题面 Luogu 题解 我们知道,如果我们选定了以横向为主,或者纵向为主, 那么就有尽可能减少另一个方向上耕地的次数 所以分开贪心,但是本质相 ...
- Spring【AOP模块】就是这么简单
前言 到目前为止,已经简单学习了Spring的Core模块.....于是我们就开启了Spring的AOP模块了...在讲解AOP模块之前,首先我们来讲解一下cglib代理.以及怎么手动实现AOP编程 ...
- sdk安装
转自:https://www.cnblogs.com/smyhvae/p/4390905.html 安装sdk:(包解压到哪里就是sdk的安装目录 P.S.安装目录不能有空格,要是之前有空格换了目 ...
- Unreachable statement
public boolean onQueryTextSubmit(String s) { if (sv != null) { // 得到输入管理对象 InputMethodManager imm = ...
- python打造社工脚本
0x00前言: 大家都知道图片是有Exif信息的.里面包含着 你的GPS信息.还有拍摄时间等等的敏感信息. 0x01准备: exifread requests 0x02思路: 读取图片的Exif信息. ...
- Attrib +s +a +h +r 隐藏文件原理与破解
制作了一个PE启动盘,不过这个启动盘不能深度隐藏,否则没效果,可以又想不让别人看见PE启动盘的一些内容,防止别人误删或者修改,于是就想找一种可以隐藏文件的方法,普通的隐藏文件的方法如下:
- Unity3D打包 将发布的exe文件打包成一个Windows安装文件(自解压文件)
Unity打包Standalone时 会出现一个exe文件和一个data文件夹 可是我们平常见过的软件 基本没有这种像这种结构的 一般都是一个安装文件,然后点击安装,选择路径,生成快捷方式- 本篇博客 ...
- 【Unity3D与23种设计模式】组合模式(Composite)
前段时间在忙一个新项目 博客好久没有更新了 GoF中定义: "将对象以树状结构组合,用以表现部分-全体的层次关系.组合模式让客户端在操作各个对象或组合时是一致的." 是一致的意思就 ...
- Throwable.异常
异常: 在运行期间发生的不正常情况. 在JAVA中用类的形式对异常的情况进行了类的封装. 这些描述不正常情况的类就称为异常类. 异常类就是java通过面向对象的思想将问题封装成了对象.用异常类对问题进 ...