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表示的 ...
随机推荐
- UTF8文件带BOM引起的问题
起因是公司iOS端竟然加载除了HTML代码,百思不得其解,查文献,原来如此... UTF-8 不需要 BOM,尽管 Unicode 标准允许在 UTF-8 中使用 BOM.所以不含 BOM 的 UTF ...
- WPF 蒙罩层 LoadingPage
WPF 蒙罩层 LoadingPage 前言 无论是在PC客户端,移动端,网站,在遇到长时间处理的时候都会需要用到蒙罩层,让用户有更好的体现.今天上网逛了一下各位前辈网友的蒙罩层的实现方式,觉得有很多 ...
- 建立makefile
一.目的 1.1 熟悉makefile的基本规则,学会建立自己的makefile,通过makefile提高编程效率 1.2 学会通过autotools建立makefile来更好更高效地管理软件项目工程 ...
- Day01——Python简介
一.Python简介 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序,作为ABC ...
- Laravel Query Builder 复杂查询案例:子查询实现分区查询 partition by
案例 案例:Laravel 在文章列表中附带上前10条评论?,在获取文章列表时同时把每个文章的前10条评论一同查询出来. 这是典型分区查询案例,需要根据 comments 表中的 post_id 字段 ...
- Kibana基本使用
现在你已经安装了Kibana,现在你一步步通过本教程快速获取Kibana核心功能的实践经验.学习完本教程,你将: 1.加载案例数据到你安装的Elasticsearch中 2. 定义至少一个索引匹配模式 ...
- $.on()方法和addEventListener改变this指向
jQuery $.on()方法和addEventListener改变this指向 标签(空格分隔): jQuery JavaScript jQuery $.on() jq的绑定事件使用$([selec ...
- sql with 写法
with h_asign_id as ( select asign_id from assign_h h left join assignment a on a.id = h.asign_id whe ...
- linux:相关命令以及笔记
首先,在linux 或者 unix里没有任何的反馈就叫成功,例如: (1)命令执行成功的样子:返回了登录用户信息 (2)命令执行失败的样子:没有返回任何东西 1.按键出现状况 解决:可以使用ctrl+ ...
- July 23rd 2017 Week 30th Sunday
Setting goals is the first step in turning the invisible into the visible. 设定目标是将实现梦想的第一步. If you wa ...