用CSS3实现文字描边效果【效果在这儿,创意在你!】
CSS3作为新兴的前端技术可以实现很多复杂变化的效果,比如文字描边。
这里主要用到text-shadow属性,顾名思义就是为文字加上阴影效果。例:
- text-shadow:10px 5px 2px #f60;
各位置参数说明:
- text-shadow:x位移 y位移 模糊程度 颜色
其中:x位移和y位移表示阴影相对文字的偏移值,可以为负值。
现在说正题,这种思路其实很简单:对四个方向都作出模糊程度为零的1px阴影。
写法如是:
- -webkit-text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;
- -moz-text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;
- text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;
- *filter: Glow(Color=#000, Strength=1);
这个针对各主流浏览器做了适配的写法。
原则上,text-shadow支持了多方向阴影的写法,不过代价是代码偏多!
<!--EndF-->
用CSS3实现文字描边效果【效果在这儿,创意在你!】的更多相关文章
- CSS3实现文字折纸效果
CSS3实现文字折纸效果 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <title></tit ...
- CSS3实现文字扫光效果
本篇文章由:http://xinpure.com/css3-text-light-sweep-effect/ CSS3 实现的文字扫光效果,几乎可以和 Flash 相媲美了 效果解析 我们分析一下实现 ...
- 用CSS3实现文字描边
CSS3作为新兴的前端技术可以实现很多复杂变化的效果,比如文字描边. 这里主要用到text-shadow属性,顾名思义就是为文字加上阴影效果.例: text-shadow:10px 5px 2px # ...
- CSS3实现文字描边的2种方法
问题 最近遇到一个需求,需要实现文字的描边效果,如下图 解决方法一 首先想到去看CSS3有没有什么属性可以实现,后来被我找到了text-stroke 该属性是一个复 ...
- 纯css3实现文字间歇滚动效果
场景: 假设有4条数据或者标题,视口中只显示两条,采用每次向上滚动一条数据来展示所有的数据.效果如图: 用JavaScript也很容易实现,但是需要操作DOM,可以参考这篇博客.考虑到项目中经常使用V ...
- CSS3实现文字描边
-webkit-text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0; -moz-text-shadow:#000 1px ...
- 常用CSS3效果:用text-shadow做CSS3 文字描边
思路: 利用CSS3的text-shadow属性,对文字的四个边均用阴影. 最终效果: 单纯的为了实现效果.未作任何美化. 实现代码: HTML: <div>文字描边效果</div& ...
- Westciv Tools主要为CSS3提供了渐变gradients、盒子阴影box-shadow、变形transform和文字描边四种在线生成效果的工具
Westciv Tools主要为CSS3提供了渐变gradients.盒子阴影box-shadow.变形transform和文字描边四种在线生成效果的工具 1.Westciv Tools 彩蛋爆料直击 ...
- jquery使用CSS3实现文字动画效果插件Textillate.js
Textillate是一款基于jquery的使用CSS3实现文字动画的小巧插件.Textillate.js集成了一些很棒的使用CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效 ...
随机推荐
- python学习笔记011——内置函数sorted()
1 描述 sorted() 函数对所有可迭代的对象进行排序操作. sorted() 与sort()函数之间的区别 1 排序对象 sorted:所有可迭代对象的排序 sort:list列表的排序 2 返 ...
- RHEL7 -- 识别文件系统和设备
逻辑卷依赖于设备映射程序(DM)内核驱动程序. 比如有个逻辑卷组rhel中有一个逻辑卷root,对应的设备为/dev/rhel/root.符号链接/dev/rhel/root指向/dev/dm-< ...
- HDFS--Hadoop分布式文件系统
HDFS是什么 HDFS设计特性和概念 HDFS,全称是Hadoop Distributed Filesystem,是一个分布式的文件系统,以流式数据訪问模式来存储超大文件(一次写入.多次读取). H ...
- codeforces #296 div2 (527C) STL中set的运用
题意:在一块H*M的玻璃上每次划一刀(仅仅能水平或竖直).输出每次划开之后剩下的玻璃中面积最大的一块的面积. 做题的时候.觉得这么大的数据量,有每次查询输出,应该是数据结构的内容. 这道题能够用STL ...
- php 多进程解决代码常驻内存的问题php 多进程解决代码常驻内存的问题
PHP不适合做常驻的SHELl进程,因为它没有专门的gc例程,也没有有效的内存管理途径. 如果用PHP做常驻SHELL,会经常被内存耗尽导致abort而unhappy. 而且,如果输入数据非法,而脚本 ...
- py自动化之环境配置
1,官网下载py,点击安装,配置环境变量 2,下载setuptools,用于安装pip (python setup.py install) 3,下载pip,用于安装selenium(pip insta ...
- 使用mybatisplus实现动态路由
1.pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xmlns="h ...
- SpringCloud | FeignClient和Ribbon重试机制区别与联系
在spring cloud体系项目中,引入的重试机制保证了高可用的同时,也会带来一些其它的问题,如幂等操作或一些没必要的重试. 今天就来分别分析一下 FeignClient 和 Ribbon 重试机制 ...
- java 生成泛型的参数的实例 T t=new T()
方法1 ParameterizedType ptype = (ParameterizedType) this.getClass().getGenericSuperclass(); Class claz ...
- dubbo源码解析-zookeeper创建节点
前言 在之前dubbo源码解析-本地暴露中的前言部分提到了两道高频的面试题,其中一道dubbo中zookeeper做注册中心,如果注册中心集群都挂掉,那发布者和订阅者还能通信吗?在上周的dubbo源码 ...