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. 《mongoDB》基本操作-创建/更新/删除文档

    一:基本操作 - db; 当前选择的集合(等于数据库名) > db demo -  use db_name; 选择你要操作的集合 > use demo switched to db dem ...

  2. Java基础知识之集合

    Collection集合 特点:长度可变,只能存储引用类型,可以存储不同的类型的元素 list 特点:元素有序(存储和取出的顺序一致),元素可以重复.list除了可以用迭代器循环遍历之外,因为其是有序 ...

  3. C++ 方阵原地旋转90度

    不额外申请内存(另外的一个二维数组空间),将一个方阵(二维数组)原地旋转90度,主要的思路是,由外向内,一圈圈的进行旋转(就是依次进行交换),如下图所示,当这些圈圈都交换完了之后,就完成了原地旋转了. ...

  4. zabbix准备：mysql安装

    php在编译时需要mysql的配置,这样PHP远程连接mysql才有用.1.创建mysql用户和相关目录(配置文件里设置的目录) groupadd mysql useradd -g mysql -M ...

  5. OpenFace的一些了解

    1.OpenFace内4个样例代码 配置学习了两个 其一: Ubantu 基本命令 Docker 安装方式.发布网站方式.查看验证安装结果命令 Openface 基本demo 实现方式.和基本原理 其 ...

  6. Python递归优化方法

    递归栈溢出 Python的递归调用栈的深度有限制,默认深度为998,可以通过sys.getrecursionlimit()查看. 针对递归栈溢出,我们可以将默认深度设置为大一些,这样不会报错,但是再大 ...

  7. Python创建目录

    需要包含os模块进来,使用相关函数即可实现目录的创建 1.创建目录要用到的函数: (1)os.path.exists(path) 判断一个目录是否存在 (2)os.makedirs(path) 多层创 ...

  8. SELinux介绍

    SELinux概念 安全加强的Linux,早期的Linux系统安全由系统管理员控制.SELinux就是一些安全规则的集合,类似于人类生活中的法律. DAC:   自由访问控制(以前的linux版本) ...

  9. 002-pro ant design-Unexpected end of JSON input while parsing near '...错误解决方案

    解决方法:先清除缓存,再重新安装 清除缓存 npm cache clean --force 重新安装 npm install

  10. python的类变量和对象变量[转]

    原文章:https://www.cnblogs.com/gtarcoder/p/5005897.html __dict__里存着{"属性名":属性值}. python是一种解释性的 ...