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表示的 ...
随机推荐
- javascrapy 正则表达式验证 IP和MAC
var psrc = $('input[name="psrc"]').val() var hwsrc = $('input[name="hwsrc"]').va ...
- hibernate5的一些坑
SessionFactory创建的修改 如果你是刚刚从hibernate4升级到hibernate5,这时候你的项目肯定就要出错了,什么错呢? org.hibernate.MappingExcepti ...
- thinkphp多表联合查询
1.两个表查询 $userid=session('user.id'); $user = M('cuser'); $data = $user->field('projectno')->whe ...
- CSS 2D转换
转换是使元素改变形状.尺寸和位置的一种效果.通过 CSS3 转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸,可以大致分为2D转换和3D转换.下面介绍的是2D转换的相关知识点. 首先,CSS中2D ...
- Oracle数据库中设置表字段为自动序列
--创建序列 increment ; --创建触发器 create or replace trigger zonecode_trigger before insert on org_HospitalZ ...
- Raft协议--中文论文介绍
本篇博客为著名的 RAFT 一致性算法论文的中文翻译,论文名为<In search of an Understandable Consensus Algorithm (Extended Vers ...
- Js 对Dom的操作
一.DOM的概述 DOM(Document Object Model,文档对象模型)描绘了一个层次化的节点树,允许开发人员添加.移除和修改页面的某一部分.这使得JavaScript操作HTML,不是在 ...
- UTF-8文件编码格式中有无签名问题汇总(BOM)
UTF-8签名(UTF-8 signature)也叫做BOM(Byte order Mark),是UTF编码方案里用于标识编码的标准标记.如果多个文件设置了签名,在二进制流中就会包含多个UTF-8签名 ...
- Nginx(持续更新中)
Nginx介绍 -- 安装部署 -- 配置文件说明 --
- 【Leetcode】【Easy】Same Tree
Given two binary trees, write a function to check if they are equal or not. Two binary trees are con ...