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& ...
随机推荐
- Selenium简介与环境搭配-----Selenium快速入门(一)
Selenium是一套自动化测试框架.官方网站是:https://www.seleniumhq.org/ 某些童鞋访问可能需要FQ. Selenium支持多种语言开发,例如Java,Python,C ...
- Unity3D 引擎基础 C# (数据结构入门) Unity3D 界面 UI(NGUI)(动画系统,导航系统)(委托与事件,常用设计模式)
Geomagic Sculpt 2016.2 Windows Software 11个月前 (01-17) 0评论 Geomagic Sculpt 触觉式三维设计 触碰您的设计使用三维工具做三维设计. ...
- KMP算法 Next数组详解
题面 题目描述 如题,给出两个字符串s1和s2,其中s2为s1的子串,求出s2在s1中所有出现的位置. 为了减少骗分的情况,接下来还要输出子串的前缀数组next.如果你不知道这是什么意思也不要问,去百 ...
- Vue-路由配置和使用步骤整理
介绍 路由:控制组件之间的跳转,不会实现请求.不用页面刷新,直接跳转-切换组件>>> 安装 本地环境安装路由插件vue-router: cnpm install vue-rou ...
- Android 中 SearchView
package com.example.euphemiaxiao.classsearch; import android.os.Bundle; import android.support.v7.ap ...
- Xamarin改变移动开发的五个理由
企业开发者不能简单的抛弃现有的桌面和Web应用,然而又不得不忙着创建各种各样的应用,没有太多的预算来开发移动版本,尤其是原生版本. 采用Xamarin,C#开发人员可以使用一份基础代码创建桌面版和移动 ...
- js备战春招の四の正则表达式详解
正则表达式语法规则:/正则表达式主体/修饰符(可选)什么是正则表达式:正则表达式是用于匹配字符串中字符组合的模式.在 JavaScript中,正则表达式也是对象.这些模式被用于 RegExp 的 ex ...
- cookie 的增加,销毁,读取
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" ...
- node.js 模块化
模块是编写稍大一点点的程序 一般就会将代码模块化 在node.js中每一个文件就是一个模块,而文件路径就是模块名 怎么使用模块? 在编写某个模块是都有三个预先定义(require,exports,mo ...
- mysql备份并转移数据
一.使用mysqldump进行备份 直接输入命令mysqldump会发现提示命令不存在,是由于系统默认会查找/usr/bin下的命令,如果这个命令不在这个目录下, 自然会找不到命令,并报错.知道了问题 ...