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. springboot AOP配置

    在Springboot中添加AOP配置分两步: 最近学习AOP ,记录一下,虽然很多名字不太清楚,但是问题不大 1:在pom.xml中添加AOP依赖 2:建一个AOP配置类 下面来看下代码是怎么实现的 ...

  2. 数值分析之数值积分 4.X

    求积公式 \[\int_{a}^{b} f(x) \mathrm{d} x \approx \sum_{k=0}^{n} A_{k} f\left(x_{k}\right) \] \(A_k\) 为求 ...

  3. shell中算术运算加减

    在shell脚本中,所有的变量默认都是字符串存储,操作也是按照字符串进行处理的,但我们不可避免的需要对各中数值进行算术运算,如算术的相加减,那么这时怎么处理呢?在shell脚本中,我们要实现对数值的算 ...

  4. Centos7.6centOS7.8多网卡多IP配置

    1.进入网卡配置文件 cd /etc/sysconfig/network-scripts/2.创建新网卡的配置文件 ifcfg-eth1 cp ifcfg-eth0 ifcfg-eth1这样副网卡配置 ...

  5. CodeGym自学笔记07——入门Java书籍

    入门Java书籍 Head First Java Java:The Complete Reference,作者:Herbert Schildt   这本书对初学者也很有好处.与前一本书的主要区别在于素 ...

  6. jssip3.9.1的demo,webphone网页电话

    用的目前最新的3.9.1版本,全版本在这里: https://jssip.net/download/releases/ https://github.com/versatica/JsSIP 代码: & ...

  7. unity工程多开Bat

    %cd%:: 源路径set sourceDir=C:\Projects\XXX:: 目标路径set destDir=C:\Projects\XXX_Clone :: 如果目标路径不存在就创建if no ...

  8. Mac技术服务, 感谢 点赞打赏

    ​ 首先,非常感谢大家对我的支持和鼓励. 如果需要单独解决Mac问题,您也可以选择付费服务,感谢大家的理解与支持! * 普通问题/软件安装:10元--100元每个(根据具体问题由您而定): * 普通问 ...

  9. Centos 7 部署Kubernetes集群 (基于cri-dockerd)

    前言 基础描述 从 k8s 1.24开始,dockershim已经从kubelet中移除,但因为历史问题docker却不支持kubernetes主推的CRI(容器运行时接口)标准,所以docker不能 ...

  10. C# 设置桌面为父窗口

    #region 设置桌面为父窗口 IntPtr hDesktop; public const int GW_CHILD = 5; public IntPtr GetDesktopHandle(Desk ...