box-shadow：none | <shadow> [ , <shadow> ]*   <shadow> = inset? && <length>{2,4} && <color>?   定义元素的阴影

  • none：无阴影
  • <length>①：第 1 个长度值定义元素的阴影水平偏移值。正值，阴影出现在元素右侧；负值，则阴影出现在元素左侧
  • <length>②：第 2 个长度值定义元素的阴影垂直偏移值。正值，阴影出现在元素底部；负值，则阴影出现在元素顶部
  • <length>③：第 3 个长度值定义元素的阴影模糊值半径（如果提供了）。该值越大阴影边缘越模糊，若该值为0，阴影边缘不出现模糊。不允许负值
  • <length>④：第 4 个长度值定义元素的阴影外延值（如果提供了）。正值，阴影将向四面扩展；负值，则阴影向里收缩<color>：定义元素阴影的颜色。如果该值未定义，阴影颜色将默认取当前最近的文本颜色
  • inset：定义元素的阴影类型为内阴影。该值为空时，则元素的阴影类型为外阴影 
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            .test li {

                margin-top: 20px;

                /*去掉li前面的黑点*/

                list-style: none;

                width: 400px;

                padding: 10px;

                background: #eee;

            }

            .test .outset {

                box-shadow: 5px 5px rgba(0, 0, 0, .6);

            }

            .test .outset-blur {

                box-shadow: 5px 5px 5px rgba(0, 0, 0, .6);

            }

            .test .outset-extension {

                box-shadow: 5px 5px 5px 10px rgba(0, 0, 0, .6);

            }

            .test .inset {

                box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, .6) inset;

            }

            .test .multiple-shadow {

                box-shadow: 0 0 5px 3px rgba(255, 0, 0, .6), 0 0 5px 6px rgba(0, 182, 0, .6), 0 0 5px 10px rgba(255, 255, 0, .6);

            }

        </style>

    </head>

    <body>

        <ul class="test">

            <li class="outset">外阴影常规效果<br />box-shadow:5px 5px rgba(0,0,0,.6);</li>

            <li class="outset-blur">外阴影模糊效果<br />box-shadow:5px 5px 5px rgba(0,0,0,.6);</li>

            <li class="outset-extension">外阴影模糊外延效果<br />box-shadow:5px 5px 5px 10px rgba(0,0,0,.6);</li>

            <li class="inset">内阴影效果<br />box-shadow:2px 2px 5px 1px rgba(0,0,0,.6) inset;</li>

            <li class="multiple-shadow">外阴影模糊效果<br />box-shadow:5px 5px 5px rgba(0,0,0,.6);</li>

        </ul>

    </body>

</html>

CSS背景与边框属性-----box-shadow的更多相关文章

  1. CSS背景图片常见属性设置

    在CSS中,图片属性的设置是必不可少的,下面介绍一下常见的图片属性: 1)背景图片插入:background-image:url(位置及名称);  //默认在父级元素内的左上角 2)背景平铺方式:ba ...

  2. CSS 背景图像 background属性简写

    background属性简写 background属性可以像margin padding属性一样,有简写方法,它的简写顺序是: background-color background-image ba ...

  3. CSS背景图像位置属性background-position百分比详解

    百分比值同关键字很接近,但其操作方式不一样.用百分比值来居中一幅背景图像,也很简单: body { background-image;url(beijing.gif); background-repe ...

  4. Web前端篇：CSS常用格式化排版、盒模型、浮动、定位、背景边框属性

    目录 Web前端篇:CSS常用格式化排版.盒模型.浮动.定位.背景边框属性 1.常用格式化排版 2.CSS盒模型 3.浮动 4.定位 5.背景属性和边框属性 6.网页中规范和错误问题 7.显示方式 W ...

  5. css中的背景、边框、补丁相关属性

    css中的背景.边框.补丁相关属性 关于背景涉及到背景颜色与背景图片 背景颜色background-color即可设定: 背景图片background-image即可设定: 但是背景图片还涉及到其他的 ...

  6. CSS的背景属性和边框属性

    CSS的背景属性: background 简写属性,作用是将背景属性设置在一个声明中 background-attachment 背景图像是否固定或者随着页面的其余部分滚动 background-co ...

  7. CSS 颜色 字体 背景 文本 边框 列表 display属性

    1  颜色属性 <div style="color:blueviolet">ppppp</div> <div style="color:#f ...

  8. CSS边框-属性详解

    图解CSS padding.margin.border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层 ...

  9. 前端1-----CSS颜色属性,字体文本和背景属性,边框属性,margin和padding,盒模型,行内块转换,浮动,三大定位

    前端1-----CSS颜色属性,字体文本和背景属性,边框属性,margin和padding,盒模型,行内块转换,浮动,三大定位 一丶css选择器的优先级 行内 > id选择器 > 类选择器 ...

随机推荐

  1. jquery基础学习之样式篇（一）

    一.安装与使用 官网下载,然后引入 <script src="js/jquery-3.3.1.js"></script>,这是生产版本,开发版本替换成min ...

  2. SQL Server 无法连接数据库

    1.打开SQL server 配置管理器-->SQL server 网络配置-->实例名的协议 2.保证SQLEXPRESS协议中的Named Pipes和 TCP/IP启用. 3.点击S ...

  3. Log4j Append属性指定是否追加内容

    Log4j默认是不断的把日志内容追加到日志文件: 这里就有个属性 Append 默认就是true: 假如我们设置成false 就不追加了 直接覆盖前面的内容: 我们来测试下: log4j.rootLo ...

  4. sqlite基本操作

    sqlite准备步骤; .下载:https://www.sqlite.org/download.html: sqlite-dll-win64-3250200.zip 和 sqlite-tools-wi ...

  5. Hive和SparkSQL：基于 Hadoop 的数据仓库工具

    Hive 前言 Hive 是基于 Hadoop 的一个数据仓库工具,可以将结构化的数据文件映射为一张数据库表,并提供完整的 SQL 查询功能,将类 SQL 语句转换为 MapReduce 任务执行. ...

  6. nginx的访问控制

    一.基于Basic Auth认证与基于IP的访问控制 一.基于Basic Auth认证 Nginx提供HTTP的Basic Auth功能,配置了Basic Auth之后,需要输入正确的用户名和密码之后 ...

  7. 【Java】-NO.16.EBook.4.Java.1.009-【疯狂Java讲义第3版 李刚】- 泛型

    1.0.0 Summary Tittle:[Java]-NO.16.EBook.4.Java.1.009-[疯狂Java讲义第3版 李刚]- 泛型 Style:EBook Series:Java Si ...

  8. [LeetCode] 872. Leaf-Similar Trees_Easy tag: DFS

    Consider all the leaves of a binary tree.  From left to right order, the values of those leaves form ...

  9. CentOS6.5安装kafka-2.10-0.8.2（单机）

    1.下载 地址:https://kafka.apache.org/downloads 本文中下载版本:kafka_2.10-0.8.2.2.tgz 2.安装 安装目录:/usr/local [root ...

  10. Elasticsearch5.x Head插件安装

    在5.0版本中不支持直接安装head插件,需要启动一个服务. 由于head插件本质上还是一个nodejs的工程,因此需要安装node,使用npm来安装依赖的包.(npm可以理解为maven) 1.安装 ...