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盒子阴影的更多相关文章

  1. 纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果

    原文:纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果 大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事 ...

  2. css3圆角矩形、盒子阴影

    css3圆角矩形 div{ width: 200px; height: 200px; border: #f00 solid 1px; margin-bottom: 10px; } 1.设置 borde ...

  3. CSS3 --添加阴影(盒子阴影、文本阴影的使用)

     CSS3 - 给div或者文字添加阴影(盒子阴影.文本阴影的使用)CSS3定义了两种阴影:盒子阴影和文本阴影.其中盒子阴影需要IE9及其更新版本,而文本阴影需要IE10及其更新版本.下面分别介绍两种 ...

  4. Westciv Tools主要为CSS3提供了渐变gradients、盒子阴影box-shadow、变形transform和文字描边四种在线生成效果的工具

    Westciv Tools主要为CSS3提供了渐变gradients.盒子阴影box-shadow.变形transform和文字描边四种在线生成效果的工具 1.Westciv Tools 彩蛋爆料直击 ...

  5. css3新增(圆角边框(border-radius),盒子阴影(box-shadow),文字阴影(text-shadow),背景缩放(background-size))

    1.圆角边框  border-radius border-radius 属性用于设置元素的外边框圆角 语法:border-radius:length; 参数值可以是数值 或者 百分比 的形式 正方形, ...

  6. CSS3与页面布局学习总结(六)——CSS3新特性(阴影、动画、渐变、变形、伪元素等)

    CSS3在CSS2.1的基础上新增加了许多属性,这里选择了较常用的一些功能与大家分享,帮助文档中有很详细的描述,可以在本文的示例中获得帮助文档. 一.阴影 1.1.文字阴影 text-shadow&l ...

  7. CSS3与页面布局学习笔记(六)——CSS3新特性(阴影、动画、渐变、变形( transform)、透明、伪元素等)

    一.阴影 1.1.文字阴影 text-shadow<length>①: 第1个长度值用来设置对象的阴影水平偏移值.可以为负值 <length>②: 第2个长度值用来设置对象的阴 ...

  8. CSS3新特性(阴影、动画、渐变、变形、伪元素等)

    CSS3与页面布局学习总结(六)--CSS3新特性(阴影.动画.渐变.变形.伪元素等)   目录 一.阴影 1.1.文字阴影 1.2.盒子阴影 二.背景 2.1.背景图像尺寸 2.2.背景图像显示的原 ...

  9. CSS3新特性(阴影、动画、渐变、变形、伪元素等) CSS3与页面布局学习总结——CSS3新特性(阴影、动画、渐变、变形、伪元素等)

      目录 一.阴影 1.1.文字阴影 1.2.盒子阴影 二.背景 2.1.背景图像尺寸 2.2.背景图像显示的原点 三.伪元素 3.1.before 3.2.after 3.3.清除浮动 四.圆角与边 ...

  10. css3 box

    一.box-shadow介绍 box-shadow属性向box添加一个或多个阴影. 语法: box-shadow: offset-x offset-y blur spread color inset; ...

随机推荐

  1. Appium常见属性和命令

    from appium import webdriverimport time, tracebackdesired_caps = {}desired_caps['platformName'] = 'A ...

  2. python中的上下文管理器以及python内建模块contextlib的contextmanager方法

    上下文管理器 上下文管理器是实现了上下文管理协议的对象,其特有的语法是"with -as".主要用于保存和恢复各种全局状态,关闭文件等,并为try-except-finally提供 ...

  3. 实验四:开源控制器实践——OpenDaylight

    实验要求: (一)基本要求: 1.利用Mininet平台搭建下图所示网络拓扑,并连接OpenDaylight控制器: 2.通过Postman工具调用OpenDaylight提供的API下发流表,实现拓 ...

  4. (面试题) 面试官:如何在forEach的循环里使用break

    大家都知道 js 的 forEach里是不能使用break.但是为什么不能在forEach里使用呢?在forEach里使用break 会发生什么呢? 一. 在forEach里使用break 会发生什么 ...

  5. BDD测试和TDD测试

    BDD测试和TDD测试 TDD TDD是测试驱动开发(Test-Driven Development)的缩写,是敏捷开发中的一项测试技术,也是一种设计方法论.她的大概思路是:先针对每个功能点抽象出接口 ...

  6. virtualBox虚拟机中安装linux系统并连接

    1.安装virtualBox 1.1.下载 virtualBox是免费的,直接去官网下载 https://www.virtualbox.org/ 在官网左侧找到Downloads,下载需要的版本 1. ...

  7. MYSQL 5.7及以上【ONLY_FULL_GROUP_BY】报错和解决方法

    由于同事安装的Docker,就在docker上举例子吧,和非docker的操作方式都一样,只是路径上和重启方式可能不同 1,进入容器 docker exec -it xxxx(你的mysql容器名称) ...

  8. Vue2 中keyup.enter触发问题!

    结合Element-UI开发的过程需求需要添加表单的默认Enter事件,但是当文本框或者元素没有获取焦点的时候回车事件未触发: 存在元素输入框修改语句:@keyup.native.enter 如果是f ...

  9. 第六章:用Python实现自动发送邮件和发送钉钉消息

    目录 发送邮件源码 发送钉钉消息源码 源码地址 本文可以学习到以下内容: 使用requests库发送钉钉消息 使用email和smtplib库发送邮件 使用163邮箱服务,自动发送邮件及附件 发送邮件 ...

  10. Django安装与启动

    安装 python -m pip install Django  查看版本 python -m django --version打开命令行,cd 到一个你想放置你代码的目录,然后运行以下命令: dja ...