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. LeetCode 690 Employee Importance 解题报告

    题目要求 You are given a data structure of employee information, which includes the employee's unique id ...

  2. 《Mysql ALTER基本操作》

    一:ALTER 添加单列 - 语法 - ALTER TABLE 表名 ADD 列名 定义类型 [FIRST(列将加入最上方) | AFTER 字段名(列加入某某字段之后) ] - 示例 `user` ...

  3. JQPRINT-不错的jquery打印插件

    1.首先引用Jquery和jqprint-0.3.js(依赖于Jquery的) <script language="javascript" src="jquery- ...

  4. Spring对Bean装配详解

    1.Spring提供了三种装配bean的方式: 2.自动装配bean: 3.通过Java代码装配bean 4.通过XML装配bean 前言:创建对象的协作关系称为装配,也就是DI(依赖注入)的本质.而 ...

  5. mac上Android反编译工具apktool、dex2jar入门

    MAC上Apktool的安装 官网链接   image.png 使用步骤如图1-6 第一:下载一个shell脚本,保存的名字就是”apktool”,不要带.sh后缀.可以复制到sublimetext, ...

  6. Hadoop 尝试

    一. 使用环境Ubuntu 安装Hadoop需要的软件 命令: $ sudo apt-get install ssh $ sudo apt-get install rsync 提示错误: 错误原因: ...

  7. Spark SQL内置函数

    Spark SQL内置函数官网API:http://spark.apache.org/docs/latest/api/scala/index.html#org.apache.spark.sql.fun ...

  8. [js]js中回调函数

    //回调函数: 把一个函数当参数传给另个函数 /* function f1() { console.log('f1'); } function f2(f) { f(); console.log(1); ...

  9. Eclipse中git上如何把自己的分支保存到远端

    1   Team——>remote——>push 2  next 3  选择自己的分支,然后点击 Add Spec 4  查看是否是自己的分支——>自己的分支,然后Finish PS ...

  10. (转)Springboot定时任务

    在我们的项目开发过程中,经常需要定时任务来帮助我们来做一些内容,springboot默认已经帮我们实行了,只需要添加相应的注解就可以实现 1.pom包配置 pom包里面只需要引入springboot ...