CSS3 box-shadow盒子阴影
inset | offset-x | offset-y | blur-radius | spread-radius | color
阴影在边框内 x轴 y轴 模糊半径 扩散半径 阴影颜色
inset: 默认阴影在边框外。使用 inset 后,阴影在边框内
offset-x:水平偏移量:(如果是负值则阴影位于元素左边)
offset-y:垂直偏移量:(如果是负值则阴影位于元素上面)
offset-x和offset-y 两者都是0,那么阴影位于元素后面
blur-radius:值越大,模糊面积越大,阴影就越大越淡。 不能为负值(默认为0,此时阴影边缘锐利。)
spread-radius: 取正值时,阴影扩大;取负值时,阴影收缩(默认为0,此时阴影与元素同样大。)
/* x轴 y轴 阴影颜色*/
box-shadow: 6px -5px #ccc;
/* x轴 y轴 模糊半径 阴影颜色*/
box-shadow: 6px -5px 5px red;
/* x轴 y轴 模糊半径 扩散半径 阴影颜色*/
box-shadow: 1px 1px -5px 2px red;
/* inset: 阴影在边框内 */
box-shadow: inset -10px 1px 3px red;
CSS3 box-shadow盒子阴影的更多相关文章
- 纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果
原文:纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果 大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事 ...
- css3圆角矩形、盒子阴影
css3圆角矩形 div{ width: 200px; height: 200px; border: #f00 solid 1px; margin-bottom: 10px; } 1.设置 borde ...
- CSS3 --添加阴影(盒子阴影、文本阴影的使用)
CSS3 - 给div或者文字添加阴影(盒子阴影.文本阴影的使用)CSS3定义了两种阴影:盒子阴影和文本阴影.其中盒子阴影需要IE9及其更新版本,而文本阴影需要IE10及其更新版本.下面分别介绍两种 ...
- Westciv Tools主要为CSS3提供了渐变gradients、盒子阴影box-shadow、变形transform和文字描边四种在线生成效果的工具
Westciv Tools主要为CSS3提供了渐变gradients.盒子阴影box-shadow.变形transform和文字描边四种在线生成效果的工具 1.Westciv Tools 彩蛋爆料直击 ...
- css3新增(圆角边框(border-radius),盒子阴影(box-shadow),文字阴影(text-shadow),背景缩放(background-size))
1.圆角边框 border-radius border-radius 属性用于设置元素的外边框圆角 语法:border-radius:length; 参数值可以是数值 或者 百分比 的形式 正方形, ...
- CSS3与页面布局学习总结(六)——CSS3新特性(阴影、动画、渐变、变形、伪元素等)
CSS3在CSS2.1的基础上新增加了许多属性,这里选择了较常用的一些功能与大家分享,帮助文档中有很详细的描述,可以在本文的示例中获得帮助文档. 一.阴影 1.1.文字阴影 text-shadow&l ...
- CSS3与页面布局学习笔记(六)——CSS3新特性(阴影、动画、渐变、变形( transform)、透明、伪元素等)
一.阴影 1.1.文字阴影 text-shadow<length>①: 第1个长度值用来设置对象的阴影水平偏移值.可以为负值 <length>②: 第2个长度值用来设置对象的阴 ...
- CSS3新特性(阴影、动画、渐变、变形、伪元素等)
CSS3与页面布局学习总结(六)--CSS3新特性(阴影.动画.渐变.变形.伪元素等) 目录 一.阴影 1.1.文字阴影 1.2.盒子阴影 二.背景 2.1.背景图像尺寸 2.2.背景图像显示的原 ...
- CSS3新特性(阴影、动画、渐变、变形、伪元素等) CSS3与页面布局学习总结——CSS3新特性(阴影、动画、渐变、变形、伪元素等)
目录 一.阴影 1.1.文字阴影 1.2.盒子阴影 二.背景 2.1.背景图像尺寸 2.2.背景图像显示的原点 三.伪元素 3.1.before 3.2.after 3.3.清除浮动 四.圆角与边 ...
- css3 box
一.box-shadow介绍 box-shadow属性向box添加一个或多个阴影. 语法: box-shadow: offset-x offset-y blur spread color inset; ...
随机推荐
- win10bug可导致系统崩溃
1.使用浏览器访问访问路径:\\.\globalroot\device\condrv\kernelconnect会立刻导致系统崩溃.会影响Windows10 1709及以上版本 2.使用以下代码保存成 ...
- 用浏览器打开pdf格式的文件默认全屏显示
打开地址如 http://xxxxx.pdf 在文件地址后面添加#view=FitH,top,可实现全屏查看pdf文件. http://xxxxx.pdf#view=FitH,top,
- Neo4j安装及简单使用【转】
转载防丢失. 一.Neo4j和图数据库简介 neo4j是基于Java语言编写图形数据库.图是一组节点和连接这些节点的关系.图形数据库也被称为图形数据库管理系统或GDBMS. Neo4j的是一种流行的图 ...
- php 实现CURL请求接口
$ch = curl_init (); //初始化 @curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); // 跳过证书检查 @curl_setopt($ ...
- 获取select的选中的值
var select = document.getElementById("sec")//获取元素 var idx = select.selectedIndex;//获取当前选中的 ...
- vue双向数据绑定原理简单实现
vue双向数据绑定原理实现 准备工作 新建一个index.js文件, 一个index.html文件 index.js文件中, 定义Vue类, 并将Vue并称全局变量 window.Vue = ...
- 不需要鼠标交互的UI去掉RaycastTarget
UI事件会在EventSystem在Update的Process触发.UGUI会遍历屏幕中所有RaycastTarget是true的UI,接着就会发射线,并且排序找到玩家最先触发的那个UI,在抛出事件 ...
- leecode75. 颜色分类
75. 颜色分类 给定一个包含红色.白色和蓝色.共 n 个元素的数组 nums ,原地对它们进行排序,使得相同颜色的元素相邻,并按照红色.白色.蓝色顺序排列. 我们使用整数 0. 1 和 2 分别表示 ...
- JavaScript 时间的操作
1. 标准日期格式 转 时间戳 第一步,设置一个标准日期,获取这个日期格式的时间戳 let timeStr = "2020-08-10 12:34:45"; let newTime ...
- ES5中对象的继承
1.继承的类型 在oo语言中,继承有两种方式,借口继承和实现继承,因为ECMAScript不支持方法签名,所以ECMAScript只支持实现继承. 2.原型链继承的实现 2.1.原型链 ES5继承可以 ...