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-阴影参数基础的更多相关文章

  1. CSS3阴影 box-shadow的使用和技巧总结

    text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果.随着html5和CSS3的普及,这一特殊效果使用越来越普遍. 基本语法是{box-shadow:[inset ...

  2. 【转】 CSS3阴影 box-shadow的使用和技巧总结

    text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果.随着html5和CSS3的普及,这一特殊效果使用越来越普遍. 基本语法是{box-shadow:[inset ...

  3. CSS3阴影 box-shadow的使用

      text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果.随着html5和CSS3的普及,这一特殊效果使用越来越普遍. 基本语法是{box-shadow:[ins ...

  4. CSS3阴影 box-shadow的使用总结

    text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果.随着html5和CSS3的普及,这一特殊效果使用越来越普遍. 基本语法是{box-shadow:[inset ...

  5. Python参数基础

    Python参数基础 位置参数 ​ 通过位置进行匹配,把参数值传递给函数头部的参数名称,顺序从左到右 关键字参数 ​ 调用的时候使用参数的变量名,采用name=value的形式 默认参数 ​ 为没有传 ...

  6. CSS3阴影 box-shadow的使用和技巧总结[转]

    text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果.随着html5和CSS3的普及,这一特殊效果使用越来越普遍. 基本语法是{box-shadow:[inset ...

  7. css3阴影 box-shadow

    语法 box-shadow:X轴偏移量 y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式] 参数介绍: 注:inset 可以写在参数的第一个或最后一个,其它位置是无效的. 阴影 ...

  8. 5分钟让你掌握css3阴影、倒影、渐变小技巧!

    一.开始让大家看一张他们组合的图片再一步一步做: 二.先是建立两个文本不做处理运行如图 三.给第一个div字体加上阴影 text-shadow: 5px 5px 10px red; text-shad ...

  9. Css3阴影实例

    阴影大约从CSS2就开始有了,但是只有Safari一个浏览器支持它,到现在依然是这样.阴影在CSS3中可以应用在边框和文字上,就像图片的阴影效果一样.一般可以分为: box-shadow textsh ...

  10. css3 animation 参数详解

    animation: name 2s ease 0s 1 both有人知道这后面的参数都代表什么意思吗 name 就是你创建动画的名称 2S表示的时长 ease表示运动效果 0S表示延迟时间 1表示的 ...

随机推荐

  1. 域名解析成功后,怎样访问服务器上Eclipse中的Web工程

    右击工程选择Export-->选择Web文件夹下的WAR file-->Destination下选择文件存放的地址-->Finish就可以获得WAR文件了然后将WAR文件放到tomc ...

  2. ASP.NET MVC中,前台DropDownList传值给后台。

    List<SelectListItem> ZH = new List<SelectListItem>(); ZH.Add(new SelectListItem { Text = ...

  3. 复活hexo静态博客的方法

    我的个人博客http://webhmy.com/是通过hexo搭建的,它支持图片显示,支持md,无需主机空间,可以满足我的大部分需求.但是在2年的使用的过程中遇到一些问题,这里记录下来.便于下次快速复 ...

  4. ionic2生命周期

    生命周期: ionViewDidLoad(){ console.log("1.0 ionViewDidLoad 当页面加载的时候触发,仅在页面创建的时候触发一次,如果被缓存了,那么下次再打开 ...

  5. Linux下C语言操作MySQL数据库

    MySQL是Linux系统下广泛使用的开源免费数据库,是Linux应用程序数据存储的首选. Ubuntu下安装 […]

  6. 10_Redis实现分布式锁

    来源:吴兆锋, https://wudashan.cn/2017/10/23/Redis-Distributed-Lock-Implement/ 前言 分布式锁一般有三种实现方式:1. 数据库乐观锁: ...

  7. Windows Server 2008 R2配置JSP网站无法访问

    在Windows Server 2008 R2中配置好JSP网站后,在本机可以使用 localhost访问网站,但是局域网内其机器无法访问,则需要在Windows Server 2008 R2的系统管 ...

  8. 《Visual C++ 2010入门教程》系列五:合理组织项目、使用外部工具让工作更有效

    原文:http://www.cnblogs.com/Mrt-02/archive/2011/07/24/2115631.html 这一章跟大家分享一些与c++项目管理.VAX.SVN.VS快捷键等方面 ...

  9. 关于H5的自定义属性data-*

    data-* 是H5的新属性,用来让开发者对标签添加自定义属性的. 其读写方式有如下几种: 如果是 data-abc 的格式,则采用正常格式 abc 来读写该属性值 <div id=" ...

  10. centos 开机执行的命令

    centos开机执行的命令-------待验证,因为有可能涉及到root问题,没想明白怎么输入密码 1.增加rc.local可执行权限 chmod +x /etc/rc.d/rc.local 2.在里 ...