CSS3属性之text-shadow和box-shadow(立体效果的实现)
语法:
text-shadow : none | <length> none | [<shadow>, ] * <shadow> 或none | <color> [, <color> ]*
相关属性 : 无
取值:
- <color> :
- 指定颜色。
- <length> :
- 由浮点数字和单位标识符组成的长度值。可为负值。指定阴影的水平延伸距离。
- <opacity> :
- 由浮点数字和单位标识符组成的长度值。不可为负值。 指定模糊效果的作用距离。如果你仅仅需要模糊效果,将前两个 length 全部设定为 0 。请参阅 长度单位。
说明:
设置或检索对象中文本的文字是否有阴影及模糊效果。可以设定多组效果,方式是用逗号隔开。可以被用于伪类 :first-letter 和 :first-line 。对应的脚本特性为 textShadow
text-shadow是可以省略前缀的几个CSS属性之一,类似的还有box-shadow,
它必须应用于文本,并它们有相同的四个参数:
x-offset 水平位移
y-offest 垂直位移
blur 模糊值
color of shadow 阴影颜色
![](/assets/blank.gif)
text-shadow : 0 1px 0 #fff ;
color : #292929 ;
}
![](/assets/blank.gif)
下面看实例:
![](/assets/blank.gif)
<html>
<head>
<title>text-shadow</title>
<meta charset="utf-8" />
<style>
body {
background-color : #666 ;
}
h1 {
text-shadow : 0 1px 0 #fff ;
color : #292929 ;
font : bold 90px/100% Arial ;
padding : 50px ;
}
</style>
</head>
<body>
<h1>Hello,World!</h1>
</body>
</html>
![](/assets/blank.gif)
运行效果(Chrome):
下面用text-shadow实现空心字效果:
text-shadow : 0 1px #000, 0 -1px 0 #000, 1px 0 0 #000, -1px 0 0 #000 ;
color : #fff ;
font : bold 90px/100% Arial ;
}
运行效果(Chrome):
实例
向 div 元素添加 box-shadow:
div { box-shadow: 10px 10px 5px #888888; }
亲自试一试
浏览器支持
IE | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|
IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 属性。
定义和用法
box-shadow 属性向框添加一个或多个阴影。
提示:请使用 border-image-* 属性来构造漂亮的可伸缩按钮!
默认值: | none |
---|---|
继承性: | no |
版本: | CSS3 |
JavaScript 语法: | object.style.boxShadow="10px 10px 5px #888888" |
语法
box-shadow: h-shadow v-shadow blur spread color inset;
注释:box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表,每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。
值 | 描述 | 测试 |
---|---|---|
h-shadow | 必需。水平阴影的位置。允许负值。 | 测试 |
v-shadow | 必需。垂直阴影的位置。允许负值。 | 测试 |
blur | 可选。模糊距离。 | 测试 |
spread | 可选。阴影的尺寸。 | 测试 |
color | 可选。阴影的颜色。请参阅 CSS 颜色值。 | 测试 |
inset | 可选。将外部阴影 (outset) 改为内部阴影。 | 测试 |
CSS3属性之text-shadow和box-shadow(立体效果的实现)相关推荐
- Shadow属性和【CSS3 Box Shadow(阴影)效果在线调试工具】
Shadow属性示例 向内/向外 | x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 inset 阴影向内 (默认向外) /* x偏移量 | y偏移量 | 阴影颜色 */ b ...
- html中投影效果图,利用CSS3(box shadow)制作边框投影
应用CSS3的box shadow属性,可以直接在页面中使用投影,增加页面的立体效果. 最终效果预览 HTML 代码: CSS3 Box shadow 任鸟飞网页设计是一个关注于网页设计及网站开发.图 ...
- Box Shadow(阴影)-Css3写法示例
Box Shadow(阴影)-Css3演示 -moz-box-shadow:2px 2px 5px #333333; -webkit-box-shadow:2px 2px 5px #333333; b ...
- CSS3 Box Shadow
语法: box-shadow:1px 2px 3px #FFF; box-shadow:阴影水平偏移值(可取正负值): 阴影垂直偏移值(可取正负值):阴影模糊值:阴影颜色: 兼容性 Firefox支持 ...
- Box Shadow CSS教程–如何向任何HTML元素添加投影
We can add a drop shadow to any HTML element using the CSS property box-shadow. Here's how. 我们可以使用CS ...
- CSS Box Shadow Bottom Only [复制]
本文翻译自:CSS Box Shadow Bottom Only [duplicate] This question already has an answer here: 这个问题在这里已有答案: ...
- Box Shadow阴影和圆角
一.盒子写Box Shadow阴影:如 box-shadow:2px 2px 5px #120F0B; //支持Opera浏览器 -moz-box-shadow:2px 2px 5px #120F0B ...
- Box Shadow
1.box-shadow属性 box-shadow属性是一个给元素添加阴影效果的css3属性,允许给元素设置一个或多个阴影效果,IE9+.Firefox 4.Chrome.Opera 以及 Safar ...
- CSS3属性 box-shadow
语法: E {box-shadow: <length> <length> <length>?<length>?||<color>} 也就是: ...
- CSS3属性的兼容 什么是弹性和布局
CSS3新特性,兼容性,兼容方法总结 css3手册css3手册 边框 border-radius 用于添加圆角效果 语法: border-radius:[ <length> | <p ...
最新文章
- php sina ip api,新浪调ip地址api
- 《编译与反编译技术》——第一章 引论 1.1节编译器与解释器
- android ripple 大小,Android Ripple 旋钮水波纹效果(一)
- 检测xcode工程中配置信息是否正确
- LiveWriter测试
- php获取apk中文应用名,php提取apk包信息 - 搜知道网 - 搜知道社区,C, iOS,Android,golang 等的知识....
- 如何提升 CSS 性能的小知识
- 使用 python 管理 mysql 开发工具箱 - 2
- 超简单Python实现微信机器人自动回复
- Nginx的 HTTP 499 状态码处理
- idea报错 No valid Maven installation found.maven不能用
- Java进阶(一)面向对象进阶简介
- 基于MATLAB对低照度图像进行直方图均衡化和同态滤波操作
- JAVA表示姓名和对应的出生日期
- linux之database(数据库)一
- 查看索引是否命中oracle,Oracle 索引命中详解
- android使用Alsa Aloop录制系统内部声音
- UWP 和 WPF 对比
- docker查看mysql日志_Docker 容器日志分析
- 如何还原计算机网络设置,还原系统设置会怎样