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,效果也是可以的。

时间: 2024-11-05 11:35:51

css3 文字的设置的相关文章

纯CSS3文字效果推荐

之前曾经研究过几个纯css实现的文字效果,<CSS文字条纹阴影动画>和<响应式奶油立体字效果>等,今天我们来研究几款文字效果,主要利用text-shadow.webkit内核的几个独有特性实现效果. 在线研究单击这里,下载收藏单击这里. 效果1-立体字效果 我们的html文件貌似这样,为了更好的展示效果,我们加上了可编辑属性. <div contenteditable="true" class="text effect01">前端

jQuery+CSS3文字跑马灯特效

jQuery+CSS3文字跑马灯特效是一款将跑马灯背景制作为3D立方体效果,文字在上面移动时,就像是文字投影到墙壁上,在转角出会改变运动方向. 效果展示 http://hovertree.com/texiao/jquery/83/ 效果图如下: 完整HTML代码如下: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http

CSS自学笔记(12):CSS3文字特效

在CSS3中新增了多个文本属性,同样有了这些属性我们在进行问题特效处理时,就尽可能少的用到其他软件去制作特效文字了. 在以前使用CSS进行web开发的时候,必须使用计算机上安装好的字体,如果有些用户的计算机上未安装该字体,可能会达不到开发人员的预期效果.而通过CSS3,开发人员可以使用他们喜欢的任意字体,只要将需要的字体文件放到web服务器上就OK了. 注:现在的主流浏览器不支持部分新增属性. 最简单的文本特效就是给文本添加阴影了. 可以给文本添加水平偏移值.垂直偏移值和模糊半径,也可以定义阴影

iPhone UIButton图标与文字间距设置【转】

UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(50, 50, 150, 50)]; [button setTitle:@"HHH" forState:UIControlStateNormal]; [button setBackgroundImage:[UIImage imageNamed:@"narrowend.png"] forState:UIControlStateNormal]; [

语音转文字怎么设置在线转换的操作

语音转文字怎么设置在线转换的操作,可能很多人现在还认为录音仅仅只是录音,随着人类的进步,现在还可以把人说的语音转换成文字内容了,什么?你还不会?ok,小编现在就来告诉你语音转文字的在线操作. 第一步:将需要转换成文字的语音在电脑上准备好,然后再通过电脑浏览器搜索迅捷语音云服务,来帮助我们进行转换.第二步:进入到语音与服务页面后,在页面中心可以看到两个转换选项,根据需要从中选择语音转文字的选项即可. 第三步:进入到语音转换文字的选项后,就可以通过页面中心的录音图标将语音文件添加进来了.第四步:语音

PPT中缺角文字怎样设置?这样操作简单又便捷

PPT是大家经常使用的演示工具之一,PPT不仅可以制作幻灯片,还可以实现很多文字特效.相信大家都见过缺角文字特效吧,那这是怎样操作的呢?其实在PPT中就可以进行设置,下面看看怎样设置吧. 成品展示: 1.在桌面中新建PPT演示文稿,进入PPT中选择页面在功能栏中[开始]操作中选择新建空白页面进行编辑. 2.黑白颜色是效果最明显对比的,所以这里将背景设置为黑色,右键点击PPT选择[设置背景格式]在填充操作中选择[纯色填充]在颜色后的油漆桶中选择黑色即可.3.之后可以在背景中添加一些小元素,让整个幻

CSS3的REM设置字体大小(转)

在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激烈的争论着,有人说PX做为单位好,有人说EM优点多,还有人在说百分比方便,以至于出现了CSS Font-Size: em vs. px vs. pt vs. percent这样的PK大局.不幸的是,仍然有不同的利弊,使各种技术都不太理想,但又无法不去用.真是进也难,退也难呀. 最近在学习em的相关知识的时候,无意之间让我拾得一宝,就是使用rem来设置Web页面的字体大小.让我一下子就来劲了,一口气看完并测试了一回,还真是爽歪歪的呀.师

CSS3的REM设置字体大小(转载)

出处:W3CPLUS 在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激烈的争论着,有人说PX做为单位好,有人说EM优点多,还有人在说百分比方便,以至于出现了CSS Font-Size: em vs. px vs. pt vs. percent这样的PK大局.不幸的是,仍然有不同的利弊,使各种技术都不太理想,但又无法不去用.真是进也难,退也难呀. 最近在学习em的相关知识的时候,无意之间让我拾得一宝,就是使用rem来设置Web页面的字体大小.让我一下子就来劲了,一口气看完并测试了一回

CSS3 -- 文字阴影(text-shadow)

text-shadow在css2中就出现过,但在css2.1版本中又被抛弃了,现在css3.0版本又重新捡回来了. 它的作用,产生阴影和模糊主体.这样在不使用图片时能给文字增加质感. 1.text-shadow语法.取值 text-shadow : none | <length> none | [<shadow>, ] * <shadow> 或none | <color> [, <color> ]* 也就是: text-shadow:[颜色(Co