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. TMS WEB Core v1.2预览版：新的Electron应用程序支持

    2019年2月20日,星期三 几个月前,我们已经开始与Electron进行实验.在工作概念验证之后,我们的目标是为Delphi开发人员尽可能多地包装Electron API.但当然不仅仅是可以使用的E ...

  2. oracle日志归档空间清理

    进入机器,设置环境变量,如: export ORACLE_HOME=/main/app/oracle/product//db_1 export ORACLE_SID=devdb 然后切换oracle用 ...

  3. 【托业】【新托业TOEIC新题型真题】学习笔记8-题库五->P7

    ———————————————————单词———————————————————— minister 部长 construction contractor 施工方 commence 开始:着手 bac ...

  4. vue在页面嵌入别的页面或者是视频2

    vue在页面嵌入别的页面或者是视频 以下是嵌入页面 <iframe name="myiframe" id="myrame" src="http: ...

  5. PHP 操作 Redis 的手册

    转:https://www.cnblogs.com/jackluo/p/5708024.html String 类型操作 string是redis最基本的类型,而且string类型是二进制安全的.意思 ...

  6. Spark partitionBy

    partitionBy 重新分区, repartition默认采用HashPartitioner分区,自己设计合理的分区方法(比如数量比较大的key 加个随机数 随机分到更多的分区, 这样处理数据倾斜 ...

  7. eclipse回退到上个版本

    在  team->show in history 中 选择版本,执行Revert Commit,然后push 到master,这样就可以了

  8. zabbix 监控 redis

    redis  可以直接使用zabbix官方的模板 模板地址: https://github.com/blacked/zbx_redis_template redis 主机通过脚本把数据推送到zabbi ...

  9. 【LeetCode每天一题】Find First and Last Position of Element in Sorted Array(找到排序数组中指定元素的开始和结束下标)

    Given an array of integers nums sorted in ascending order, find the starting and ending position of ...

  10. android studio 设置安装不占用C盘

    我们知道,android studio 安装会占用大量的空间,比如我们我们将andriod status 安装到了D:\IDE\Android Studio这里,但是你会发现,在编译出包过程中,C盘的 ...