text-shadow - 文字阴影 - css 文本样式
text-shadow
版本:CSS3
text-shadow为文字添加阴影。可以为文字与 text-decorations 添加多个阴影,阴影值之间用逗号隔开。每个阴影值由元素在X和Y方向的偏移量、模糊半径和颜色值组成。
/* offset-x | offset-y | blur-radius | color */ text-shadow: 1px 1px 2px black; /* color | offset-x | offset-y | blur-radius */ text-shadow: #fc0 1px 0 10px; /* offset-x | offset-y | color */ text-shadow: 5px 5px #558abb; /* color | offset-x | offset-y */ text-shadow: white 2px 5px; /* offset-x | offset-y /* Use defaults for color and blur-radius */ text-shadow: 5px 10px; /* Global values */ text-shadow: inherit; text-shadow: initial; text-shadow: unset;
浏览器支持
IE10以上版本,以及其他浏览器都支持text-shadow |
语法:
text-shadow:h-shadowv-shadowblurcolor;- color:可选。可以在偏移量之前或之后指定。如果没有指定颜色,则使用UA(用户代理)自行选择的颜色。
- offset-xoffset-y:必选。这些长度值指定阴影相对文字的偏移量。offset-x指定水平偏移量,若是负值则阴影位于文字左边。offset-y指定垂直偏移量,若是负值则阴影位于文字上面。如果两者均为0,则阴影位于文字正后方(如果设置了则会产生模糊效果)。可用单位请查看
length
。 - blur-radius:可选。这是
length
值。如果没有指定,则默认为0。值越大,模糊半径越大,阴影也就越大越淡(wider and lighter)。 - 注释:text-shadow 属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表,每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0。
说明:
设置或检索对象中文本的文字是否有阴影及模糊效果。参阅box-shadow
属性。
- 可以设定多组效果,每组参数值以逗号分隔。
- 对应的脚本特性为textShadow。
值 | 描述 |
---|---|
h-shadow | 必需。水平阴影的位置。允许负值。 |
v-shadow | 必需。垂直阴影的位置。允许负值。 |
blur | 可选。模糊的距离 |
color | 可选。阴影的颜色。 |
默认值 | none |
适用于 | 所有元素 |
继承性 | 有 |
动画性 | 是 |
计算值 | 1个颜色加3个绝对长度 |
实例
.demo{ background: #666666; width: 440px; padding: 30px; font: bold 55px/100% "微软雅黑", "Lucida Grande", "Lucida Sans", Helvetica, Arial, Sans;; color: #fff; text-transform: uppercase; } .demo .item{text-shadow:0 1px 0 red;}.demo{background:#666666; width: 440px; padding: 30px; font: bold 55px/100%"微软雅黑","Lucida Grande","Lucida Sans", Helvetica, Arial, Sans;; color:#fff; text-transform: uppercase;}.demo .item{text-shadow:0 1px 0 red;}TEXT-SHADOW
TEXT-SHADOW
.demo { background: #666666; width: 440px; padding: 30px; font: bold 55px/100% "微软雅黑", "Lucida Grande", "Lucida Sans", Helvetica, Arial, Sans;; color: #ccc; } .demo .item2{text-shadow:-1px -1px 0 #fff,1px 1px 0 #333,1px 1px 0 #444;}.demo{background:#666666; width: 440px; padding: 30px; font: bold 55px/100%"微软雅黑","Lucida Grande","Lucida Sans", Helvetica, Arial, Sans;; color:#ccc;}.demo .item2{text-shadow:-1px -1px 0 #fff,1px 1px 0 #333,1px 1px 0 #444;}TEXT-SHADOW
TEXT-SHADOW
鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com
免责声明:我们致力于保护作者版权,注重分享,当前被刊用文章因无法核实真实出处,未能及时与作者取得联系,或有版权异议的,请联系管理员,我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理!邮箱:344225443@qq.com)
图片声明:本站部分配图来自网络。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!
内容声明:本文中引用的各种信息及资料(包括但不限于文字、数据、图表及超链接等)均来源于该信息及资料的相关主体(包括但不限于公司、媒体、协会等机构)的官方网站或公开发表的信息。部分内容参考包括:(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供参考使用,不准确地方联系删除处理!本站为非盈利性质站点,本着为中国教育事业出一份力,发布内容不收取任何费用也不接任何广告!)