欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > css3案例分享 >

css3笔墨阴影属性text-shadow

发布时间:2015-07-28  编辑:杨雨个人博客网站   点击:   

前面我们曾经进修了盒子阴影属性box-shadow,这篇文章说的笔墨阴影属性text-shadow。小文章一篇,但愿各人通过这篇文章再往返首一下box-shadow盒子阴影属性。

text-shadow属性值

对付w3c对付的类型如下:

属性名:text-shadow

属性值: none | [<>,]*

初始值:none

应用于: 全部元素

担任性:是

百分比: N/A

计较值:

1、none,没有指定任何的值,文本情势凭证用户署理可能csser配置的文本情势展示

*2、[,] *,每一个shadow(阴影值)之间用逗号(,)离隔,暗示可以一再无穷制。个中shadow的值有如部属性值:

shadow的值有 [ color? offset-x offset-y blur-radius? | offset-x offset-y blur-radius? color? ]

color值可选,若是没有指定,那么跟文本颜色同等,若是文本颜色也没有指定,那么按照用户署理指定。

offset-x,offset-y,前一个值为阴影程度位移,后一个值为垂直位移,这点跟box-shadow同等,而且这两个值必需有,缺一不行。应承负值,offset-x负值向左偏移,offset-y向上偏移。

若是是多个shadow,那么就存在重叠征象,既然有重叠那就应该有层级相关,一样平常环境来说css中的层级相关是其后的值会包围前面的值,好比这么写css类

.f12{font-size:12px;} .f12{font-size:14px;} //后者包围前者样式,以是文本字领会表现14px

可是对付css属性内里的值都是凭证先来后到原则,并不是谁牛逼谁就在前面。这让我想起来了初中的时辰,不管是照相照旧列队都是凭证矮个子的在前面高个子在后头,就算是矮个子盖住了高个的下半身,可是最少还可以望见一个头嘛!

代码如下:

.f12{font-size:12px;} .f12{font-size:14px;} .text-shadow{ text-shadow:0 0 #000,0 5px #f00,10px 0 #0ff; background-color:#18b4ed; color:#fff; font-size:50px; } .box-shadow{ box-shadow:0 0 5px #000,0 10px #f00,10px 0 #0ff; width:100px; padding:10px; } <p>这是14px的笔墨巨细<span>这是12像素文本</span></p> <p>伴侣保举我听一首DJ舞曲,名字有点怪怪的,歌曲叫《小红帽》,我也是醉了</p> <p>若是你有幸也闻声这首歌,那么把你的设法在评述中写出,着实应该打码才对。</p>

不妨点击右侧 demo:css属性值层级与css类层级相关
可能拿脱手机扫下面的二维码

css3文字阴影属性text-shadow

结果图如下:

css3文字阴影属性text-shadow

我们可以望见text-shadow中,第一个shadow的颜色为赤色,第二个shadow的颜色为青色,玄色箭头处就是他们的交错处,可以望见赤色层级要比青色层级高。若是有N个shadow,那就以此类推,后呈现的shadow中的值也是从原点偏移,以是可以操作这个阴影结果缔造许多的伪3D,凹面体,凸面体等,这些笔墨的组成都是基于操作这程度位移和垂直位移,指定差异的颜色加以分辨得出。详细的各类立体图形结果,可以参考大漠网站:css3笔墨阴影

blur-radius,恍惚半径,可选值。若是没有指定,那么该值的初始值为0,数值越大的值,那么它的恍惚半径就越大。不应承负值。

题外话:,相对 box-shadow,text-shadow并没有inset这个值,这点要区分隔来。
他们的沟通之处:不影响机关,不会触发转动条,虽然,也不会增进转动地区的巨细,盒子自己100100,加了text-shadow可能box-shadow之后,盒子照旧100100。可是text-shadow在半透明文本的时辰,不会像 box-shadow裁剪shadow的外形。

应用

对付text-shadow的应用,小我私人认为可以用在有配景致的机关上,好比说一些暗色调的配景机关让会字体有一种凹凸结果

css3文字阴影属性text-shadow

之前仿佛望见谁的博客内里就是用到了超链接的凹凸结果,详细是谁健忘了,链接link、visited向外拓展恍惚,active是程度位移和垂直位移都减小,操浸染户署理的模仿input表单中的按钮点击结果,可能你可以点击→ :text-shadow模仿input

结果如下:

参考资料:
https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow

本文地址:http://itbyc.com/web/css3/2654.html
转载请注明出处。
分享是一种快乐,也是一种美德:
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1