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表示的 ...
随机推荐
- 域名解析成功后,怎样访问服务器上Eclipse中的Web工程
右击工程选择Export-->选择Web文件夹下的WAR file-->Destination下选择文件存放的地址-->Finish就可以获得WAR文件了然后将WAR文件放到tomc ...
- ASP.NET MVC中,前台DropDownList传值给后台。
List<SelectListItem> ZH = new List<SelectListItem>(); ZH.Add(new SelectListItem { Text = ...
- 复活hexo静态博客的方法
我的个人博客http://webhmy.com/是通过hexo搭建的,它支持图片显示,支持md,无需主机空间,可以满足我的大部分需求.但是在2年的使用的过程中遇到一些问题,这里记录下来.便于下次快速复 ...
- ionic2生命周期
生命周期: ionViewDidLoad(){ console.log("1.0 ionViewDidLoad 当页面加载的时候触发,仅在页面创建的时候触发一次,如果被缓存了,那么下次再打开 ...
- Linux下C语言操作MySQL数据库
MySQL是Linux系统下广泛使用的开源免费数据库,是Linux应用程序数据存储的首选. Ubuntu下安装 […]
- 10_Redis实现分布式锁
来源:吴兆锋, https://wudashan.cn/2017/10/23/Redis-Distributed-Lock-Implement/ 前言 分布式锁一般有三种实现方式:1. 数据库乐观锁: ...
- Windows Server 2008 R2配置JSP网站无法访问
在Windows Server 2008 R2中配置好JSP网站后,在本机可以使用 localhost访问网站,但是局域网内其机器无法访问,则需要在Windows Server 2008 R2的系统管 ...
- 《Visual C++ 2010入门教程》系列五:合理组织项目、使用外部工具让工作更有效
原文:http://www.cnblogs.com/Mrt-02/archive/2011/07/24/2115631.html 这一章跟大家分享一些与c++项目管理.VAX.SVN.VS快捷键等方面 ...
- 关于H5的自定义属性data-*
data-* 是H5的新属性,用来让开发者对标签添加自定义属性的. 其读写方式有如下几种: 如果是 data-abc 的格式,则采用正常格式 abc 来读写该属性值 <div id=" ...
- centos 开机执行的命令
centos开机执行的命令-------待验证,因为有可能涉及到root问题,没想明白怎么输入密码 1.增加rc.local可执行权限 chmod +x /etc/rc.d/rc.local 2.在里 ...