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. C语言联合体(共用体)使用方法及大小计算

    作者的话 本文介绍联合体的定义.如何使用联合体,包括联合体的声明.联合体变量创建.联合体内存使用,以及联合体大小的计算,最后附上用联合体判断当前环境是大端还是小端的方法. 联合体的定义 联合体,又叫共 ...

  2. 老毛桃WinPE以ISO镜像模式安装CentOS7

    准备: 一台新台式机(2TB磁盘),将用于安装centos 7,注意安装前请使用工具将磁盘分区先删除. 一个u盘,用户制作老毛桃winpe启动盘. 从www.laomaotao.org下载最新9.3增 ...

  3. maven上传jar包或pom文件到远程仓库

    一. 步骤 有时候,项目中打好的jar包或pom文件需要上传到远程仓库,步骤总结如下: 安装好maven,网上有很多教程,默认已安装 工程中的settings.xml增加相应的server账号密码: ...

  4. CodeGym自学笔记06——内存寻址和变量

    内存寻址和变量 print() print() 函数用于在屏幕上逐个字符显示文本.当屏幕上某一行没有足够空间时,文本开始在下一行显示. println() 可以使用 println() 函数停止在当前 ...

  5. 错误 : 资产文件&ldquo;\obj\project.assets.json&rdquo;没有&ldquo;.NETCoreApp,Version=v2.0&rdquo;的目标。确保已运行还原,且&ldquo;netcoreapp2.0&rdquo;已包含在项目的 TargetFrameworks 中。

    原因是项目升级了目标框架netcoreapp2.1但是发布配置文件上的目标框架配置项没有更改导致发布错误 将此处修改成需要的版本即可.例如:<TargetFramework>netcore ...

  6. python安装及简单爬虫(爬取导师信息)

    1.下载: 解释器(我下的是3.8.2版本):https://www.python.org/downloads/ pycharm(我下的是2019.3.3版本):https://www.jetbrai ...

  7. Exp6 MSF应用基础

    目录 一.实践内容 1 一个主动攻击实践 漏洞介绍 1 攻击前的准备 2 执行攻击 2 一个针对浏览器的攻击 3 一个针对客户端的攻击,以office为例 4 辅助模块的使用 二.问题回答 1 用自己 ...

  8. 通过 HDU 2048 来初步理解动态规划

    HDU 2048 数塔 问题描述: 题目链接-点我查看题目   给出一个数塔,要求从顶层走到底层,每一步只能从高层走到相邻的低层节点,求经过的结点的数字之和最大是多少? 动态规划的定义   dynam ...

  9. Java基础学习:9、访问修饰符

    Java提供四种访问控制修饰符,用于控制方法和属性(成员变量)的访问权限(范围). 注意事项: 1.修饰符可以访问类中的属性.成员方法.以及类. 2.只用默认修饰符.public可以修饰类. 3.成员 ...

  10. 2023 新年FLAG 当你无所事事的时候,打开本博客看看,置顶着呢,别说你看不到,摸鱼狗

    2023.2.15 接触到了Visual Grounding,但是是3D的,不知道这是不是冥冥之中的一颗种子,我现在有强烈的直觉我未来就是搞这个方向. 2023.2.14 回到学校正式开始工作 OK, ...