CSS3-阴影参数基础
box-shadow
语法:text-shadow: x-shadow y-shadow distance color;
值 | 描述 |
x-shadow | 必需。水平阴影的位置。允许负值。 |
y-shadow | 必需。垂直阴影的位置。允许负值。 |
distance | 可选。模糊的距离。 测试 |
color | 可选。阴影的颜色 |
text-shadow
语法:box-shadow: x-shadow y-shadow distance size color inset/outset;
值 | 描述 |
x-shadow | 必需。阴影水平偏移量,可正可负,正值表示阴影在右边,负值表示阴影在左边。 |
y-shadow | 必需。阴影垂直偏移量,可正可负,正值表示阴影在上边,负值表示阴影在下边。 |
distance | 可选。阴影模糊距离。只能为正值,值为0时,表示阴影不具有模糊效果,值越大阴影的边缘就越模糊。 |
size | 可选。阴影扩展半径。可正可负,正值表示整个阴影都延展扩大,负值表示缩小。 |
color | 可选。阴影的颜色。 |
inset | 可选。将外部阴影 (outset) 改为内部阴影。 |
box-reflect
向框添加一个或多个倒影。 (1)direction:定义倒影的方向,取值包括: above:倒影在对象的上边。
below:倒影在对象的下边。
left:倒影在对象的左边。
right:倒影在对象的右边。
(2)offset:定义倒影与对象之间的间隔,可正可负,默认为0。取值包括: 长度值
百分比(根据对象的尺寸进行确定)
(3)mask-box-image:定义遮罩图像,该图像将覆盖投影区域,默认为无遮罩。 <url>:使用绝对或相对地址指定遮罩图像。
<linear-gradient>:使用线性渐变创建遮罩图像。
<radial-gradient>:使用径向(放射性)渐变创建遮罩图像。
<repeating-linear-gradient>:使用重复的线性渐变创建背遮罩像。
<repeating-radial-gradient>:使用重复的径向(放射性)渐变创建遮罩图像。
CSS3-阴影参数基础的更多相关文章
- CSS3阴影 box-shadow的使用和技巧总结
text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果.随着html5和CSS3的普及,这一特殊效果使用越来越普遍. 基本语法是{box-shadow:[inset ...
- 【转】 CSS3阴影 box-shadow的使用和技巧总结
text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果.随着html5和CSS3的普及,这一特殊效果使用越来越普遍. 基本语法是{box-shadow:[inset ...
- CSS3阴影 box-shadow的使用
text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果.随着html5和CSS3的普及,这一特殊效果使用越来越普遍. 基本语法是{box-shadow:[ins ...
- CSS3阴影 box-shadow的使用总结
text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果.随着html5和CSS3的普及,这一特殊效果使用越来越普遍. 基本语法是{box-shadow:[inset ...
- Python参数基础
Python参数基础 位置参数 通过位置进行匹配,把参数值传递给函数头部的参数名称,顺序从左到右 关键字参数 调用的时候使用参数的变量名,采用name=value的形式 默认参数 为没有传 ...
- CSS3阴影 box-shadow的使用和技巧总结[转]
text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果.随着html5和CSS3的普及,这一特殊效果使用越来越普遍. 基本语法是{box-shadow:[inset ...
- css3阴影 box-shadow
语法 box-shadow:X轴偏移量 y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式] 参数介绍: 注:inset 可以写在参数的第一个或最后一个,其它位置是无效的. 阴影 ...
- 5分钟让你掌握css3阴影、倒影、渐变小技巧!
一.开始让大家看一张他们组合的图片再一步一步做: 二.先是建立两个文本不做处理运行如图 三.给第一个div字体加上阴影 text-shadow: 5px 5px 10px red; text-shad ...
- Css3阴影实例
阴影大约从CSS2就开始有了,但是只有Safari一个浏览器支持它,到现在依然是这样.阴影在CSS3中可以应用在边框和文字上,就像图片的阴影效果一样.一般可以分为: box-shadow textsh ...
- css3 animation 参数详解
animation: name 2s ease 0s 1 both有人知道这后面的参数都代表什么意思吗 name 就是你创建动画的名称 2S表示的时长 ease表示运动效果 0S表示延迟时间 1表示的 ...
随机推荐
- lintcode 题目记录2
判断字符串是否是互为置换,类似 替换字符串之类的遍历就行了.. class Solution: # @param {string} A a string # @param {string} B a s ...
- JavaScript练习笔记整理·4 - 6.26
基础练习(1): 我的解答为: function getMiddle(s) { if(s.length%2 == 0) { return s.charAt(s.length/2-1)+s.charAt ...
- QQ 聊天机器人小薇 1.0.1 发布!
本次发布主要解决了消息丢失(Api返回码[1202])问题,并改进了改进了一些细节. 简介 XiaoV(小薇)是一个用 Java 写的 QQ 聊天机器人 Web 服务,可以用于社群互动: 监听多个 Q ...
- JDBC连接数据库方法的封装,以及查询数据方法的封装
(在上一篇文章中,我们详细的介绍了连接数据库的方法,以及eclipse操作数据库信息的相关方法,在这里我们将主要讲封装.) 主要内容: 一般的连接数据库测试 把连接数据库的方法封装成一个类和测试 一个 ...
- Java链接 Oracle11g R2
菜鸟学习Oracle数据库,使用Java代码链接数据库. 首先要配置Eclipse,在新建的工程中,Package Explorer->工程名->Build path->Add ex ...
- JNLP文件具体说明编辑
JNLP(Java Network Launching Protocol )是java提供的一种可以通过浏览器直接执行java应用程序的途径,它使你可以直接通过一个网页上的url连接打开一个java应 ...
- python nose测试
前提: python3 安装nose 结果: nose目录下有子目录tests和mybag,在mybag下新建my_age.py, 内部有Students类,age属性. tests目录下写Sutde ...
- html的文件控件<input type="file">样式的改变
一直以来,<input type="file">上传文件标签默认样式都是让人不爽的,使用它多要给它整整容什么的,当然如果用ui插件还比较方便,不能就自己来操刀实践一下! ...
- Linux ->> UBuntu 14.04 LTE下安装Hadoop 1.2.1(伪分布模式)
Hadoop的运行模式可分为单机模式.伪分布模式和分布模式. 首先无论哪种模式都需要安装JDK的,这一步之前的随笔Ubuntu 14.04 LTE下安装JDK 1.8中已经做了.这里就不多说了. 其次 ...
- .Net深入体验与实践第一章
什么是委托?委托和事件是什么关系? 我的理解是委托朋友,事件是一个事情比如,中午12点要吃饭了,咱家搞忘了!还在继续嗨皮,我的朋友会叫我与他一起吃饭. 什么事反射? 可以获取.Net中的每个类型(类, ...