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. thinkphp的删除操作

    1.循环遍历要删除的用户的或者呀删除的文章的id值: <volist name="list" id="vo"> <tr id="si ...

  2. 第8章 CSS3中的变形与动画(上)

    变形--旋转 rotate() 旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转.它主要在二维空间内进行操作,设置一个角度值,用来指定旋转的幅度.如果这个值为正值,元素相对原点中心顺时 ...

  3. 排序算法Nb三人组-快速排序

    核心思想: 将列表中第一个元素拿出来,放到一边,左右两个循环,左面的大于拿出来的数,就把他挪到右面, 右面的小于拿出来的数就把他放在左面,这是列表被第一个元素''分''为两个列表,在对两个列表进行同样 ...

  4. JS如何使用Math.atan2获取两点之间角度的实践案例

    本文主要介绍使用如何实现手动拖拽旋转元素的效果. 1.简述 最近在研究如何实现手动控制元素的旋转效果,在网上找了很多,都没有找出类似的实现,因此经过一些调研和计算,最终完美实现效果,在这里记录下来. ...

  5. AngularJs 延时器、计时器

    1.$timeout延时器 apptest.controller("main",function($scope,$timeout){ $scope.pink="pink& ...

  6. JavaScript练习笔记整理·4 - 6.26

    基础练习(1): 我的解答为: function getMiddle(s) { if(s.length%2 == 0) { return s.charAt(s.length/2-1)+s.charAt ...

  7. CentOS 7 禁用IPV6以提高网速

    方法 1 编辑文件/etc/sysctl.conf,$vi /etc/sysctl.conf添加下面的行: net.ipv6.conf.all.disable_ipv6 = net.ipv6.conf ...

  8. python shopping incomplete code

    #shopping code#shopping.py#导入登录模块import login# shop car beginningsalary = input("请输入工资:\t" ...

  9. 推卡:“积分侠”的福利 广发DIY信用卡

    广发diy信用卡最大的优势在持卡人在三大类商户刷卡消费可享受3倍积分优惠,很多卡友不知道这些商户到底有哪些,以及商户mcc码是什么,下面和小编一起来看看. 可享受3倍积分的商户类型 持卡人可在以下三大 ...

  10. 一个SAP开发人员的2018年终总结

    我是SAP成都研究院的Jerry Wang,我喂自己袋盐. 时间过得真快,2017年发生的事情还历历在目,一转眼,2018年又马上要结束了. Jerry惊恐地发现,随着年龄的增长,时光流逝的速度仿佛有 ...