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. react 02 组件state click

    一,组件 import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; // 函数式组件 ret ...

  2. 3.2 删除XxxControler中各方法中的response

    3.2.1 EmpController代码 package com.hy.controller; import javax.servlet.http.HttpServletRequest; impor ...

  3. input输入框限制输入

    <input type="password" value="" id="pwd" class="Rectangle-1188 ...

  4. Win10中找回曾复制过的东西

    按Win+V,如果弹出的"剪贴板历史"设置已经打开,那么就可以找回.建议大家打开这项设置以防万一.

  5. 【实验】B站资源免费下载技巧you-get

    搭建环境, python pip3  install you-get 查看可以下载格式 you-get -i https://www.bilibili.com/video/BV1yN411d7KH?p ...

  6. Route路径

  7. 数据驱动之 python + requests + Excel

    数据驱动 是根据数据来测试的,如读取 excel表中的测试用例自动填写测试结果,发送测试报告 包括以下模块: 1.获取用例 2.调用接口 3.校验结果 4.发送测试报告 5.异常处理 6.日志模块 1 ...

  8. HTML&CSS学习总结

    目录 一. HTML学习总结 1.HTML是什么 2.HTML结构 1. 创建一个HTML实例 2. HTML结构解析 3. HTML标题 4. HTML段落 5. HTML链接 6. HTML图像 ...

  9. TCP三次握手四次挥手内容及步骤

    TCP特性 1.工作在传输层 2.面向连接的协议 3.全双工协议 4.半关闭 5.错误检查 6.将数据打包成段,排序 7.确认机制 8.数据恢复.重传 9.流量控制.滑动窗口 10.拥塞控制,慢启动和 ...

  10. 2023-03-02 TypeError: null is not an object (evaluating 'ImageCropPicker.openPicker')

    问题描述:rn项目使用到了一个插件react-native-image-crop-picker,运行后报错. 原因:安装该插件的时候没有link到android包里. 解决方案: react-nati ...