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& ...
随机推荐
- 谈谈使用Redis缓存时批量删除的几种实现
前言 在使用缓存的时候,我们时不时会遇到这样一个需求,根据缓存键的规则去批量删除这些数据,比较常见的就是按前缀去删除. 举个简单的例子,Redis中现在有几百个商品的数据,这些数据的key值是有一定规 ...
- 详解MySQL数据类型
原文地址http://www.cnblogs.com/xrq730/p/5260294.html,转载请注明出处,谢谢! 前言 很久没写文章,也有博友在我的有些文章中留言,希望我可以写一些文章,公司项 ...
- [.Net Core] 简单使用 Mvc 内置的 Ioc
简单使用 Mvc 内置的 Ioc 本文基于 .NET Core 2.0. 鉴于网上的文章理论较多,鄙人不才,想整理一份 Hello World(Demo)版的文章. 目录 场景一:简单类的使用 场景二 ...
- iptables 学习
本博客是学习慕课网课程 用iptables搭建一套强大的安全防护盾 整理而成 iptables相当于在ip层挂载一个hook point对用户进行控制 组成: 四张表+ 五条链(hook point) ...
- php 命令行插件 - phpsh
phpsh 是php的一个命令行插件,个人觉得很不错,在此简单介绍下: 1.安装 readline sudo easy_install readline 2.到 https://github.com/ ...
- AJAX跨域问题解决思路
ajax跨域问题的解决思路主要分为3种: 1.浏览器限制解决思路:不让浏览器做出限制解决方法:通过指定参数,让浏览器不做跨域校验评价:价值不大,需要每个人都做改动,而且改动是客户端的改动 2.XHR请 ...
- Unity3D脚本的生命周期(执行顺序)
Unity脚本中有许多固定的函数 例如Start();Update(); 而这些函数都有固定的执行顺序 搞清楚这些函数的执行顺序 对于我们理清代码的逻辑就显得尤为重要 举个简单的例子 //脚本A pu ...
- shell脚本之for循环
shell脚本之for循环 author :headsen chen 2017-10-18 09:50:41 个人原创,转载请注明.否则依法追究法律责任 1,cat forloop ...
- ubuntu14.04行更新软件包
ubuntu14.04行更新软件包 headsen chen 2017-10-12 16:01:34 apt-get update对应的就是第一步. apt-get upgrade 与apt-g ...
- leetCode:237 删除链表的结点
删除链表的结点 编写一个函数,在给定单链表一个结点(非尾结点)的情况下,删除该结点. 假设该链表为1 -> 2 -> 3 -> 4 并且给定你链表中第三个值为3的节点,在调用你的函数 ...