box-shadow是向盒子添加阴影。支持添加一个或者多个。

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
参数介绍：

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow：水平阴影的偏移值，必需，可以为负值。

v-shadow：纵向阴影的偏移值，必需，可以为负值。

blur：阴影模糊值，可选，不能为负值。

spread：阴影的扩展，可选，可以为负值。

color：阴影的颜色，虽然是可选，但是在不同的浏览器里面解释不一样，有些是黑色，有些是透明，所以建议都要设置。具有透明度的阴影可以用rgba的值。

inset：内阴影。可选，如果缺省，默认是外阴影（outset）。

注意：inset 可以写在参数的第一个或最后一个，其它位置是无效的。

为元素设置外阴影：

示例代码：

.box_shadow{

  box-shadow:4px 2px 6px #333333;

}
效果：

为元素设置内阴影：

示例代码：

.box_shadow{

  box-shadow:4px 2px 6px #333333 inset;

}
效果：


添加多个阴影：

以上的语法的介绍，就这么简单，如果添加多个阴影，只需用逗号隔开即可。如：

.box_shadow{

    box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset;

}
效果：

1、阴影模糊半径与阴影扩展半径的区别

阴影模糊半径：此参数可选，其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；

阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；

2、X轴偏移量和Y轴偏移量值可以设置为负数

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

X轴偏移量为负数：

.boxshadow-outset{

    width:100px;

    height:100px;

    box-shadow:-4px 4px 6px #666;

}

效果图：

Y轴偏移量为负数：

.boxshadow-outset{

    width:100px;

    height:100px;

    box-shadow:4px -4px 6px #666;

}

效果图：

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title>boxshadow</title>

    <style>

        .boxshadow-outset{

            width:100px;

            height:100px;

            box-shadow:4px 4px 6px #;

        }

        .boxshadow-inset{

            width:100px;

            height:100px;

            box-shadow:4px 4px 6px # inset;

        }

        .boxshadow-multi{

            width:100px;

            height:100px;

            box-shadow:4px 2px 6px #f00, -4px -2px 6px #, 0px 0px 12px 5px #33CC00 inset;

        }

    </style>

</head>

<body>

<h2>外阴影</h2>

<div class="boxshadow-outset">

</div>

<br />

<h2>内阴影</h2>

<div class="boxshadow-inset">

</div>

<br />

<h2>多阴影</h2>

<div class="boxshadow-multi">

</div>

</body>CSS3边框

</html>

转载：http://www.imooc.com/code/5413

CSS3边框 阴影 box-shadow的更多相关文章

  1. CSS3文本阴影、边框阴影

    CSS3添加阴影 一.使用text-shadow属性为文本添加阴影 二.使用box-shadow属性为边框添加阴影 一.为文本添加阴影 text-shadow     使用text-shadow,可以 ...

  2. CSS3 边框

    说明:CSS3完全向后兼容,因此不必改变现有的设计.浏览器通常支持CSS2 CSS3模块 CSS3被划分为模块: 选择器 框模型 背景和边框 文本效果 2D/3D 转换 动画 多列布局 用户界面 CS ...

  3. 第95天：CSS3 边框、背景和文字效果

    1.CSS3边框: border-radius:CSS3圆角边框.在 CSS2 中添加圆角矩形需要技巧,我们必须为每个圆角使用不同的图片,在 CSS3 中,创建圆角是非常容易的,在 CSS3 中,bo ...

  4. 来看下css边框阴影怎么设置？这些方法掌握后工作更轻松

    我们在网页设计中,通常会使用ps工具来达到图片或者边框阴影.立体等效果.但是如果一些基础效果都需要用p图来完成那就显得效率比较低了.其实可以使用CSS来设置边框阴影,下面本篇文章来给大家介绍一下. 在 ...

  5. CSS3 02. 边框、边框圆角、边框阴影、边框图片、渐变、线性渐变、径向渐变、背景、过渡transition、2D转换

    边框圆角 border-radius 每个角可以设置两个值,x值.y值 border-top-left-radius:水平半径 垂直半径 border-radius:水平半径/垂直半径 border- ...

  6. 从零开始学 Web 之 CSS3（二）颜色模式，文字阴影，盒模型，边框圆角，边框阴影

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  7. CSS3(1)---圆角边框、边框阴影

    CSS3(1)---圆角边框.边框阴影 CSS3可以简单理解成是CSS的增强版,它的优点在于不仅有利于开发与维护,还能提高网站的性能. 一.圆角边框 圆角在实际开放过程中,还是蛮常见的.以前基本是通过 ...

  8. HTML 学习笔记 CSS3 (边框)

    CSS3边框 通过CSS3边框 你能够创建远角边框 向矩形边框添加阴影 使用图片来绘制边框 . CSS3的边框属性 主要包含以下几种 border-radius 边框圆角 box-shadow 边框阴 ...

  9. CSS3边框温故

    1.简介:border属性在CSS1中就已经定义了,用来设置元素边框风格,设置不同的边框.颜色.粗细 2.基本属性,包括三个类型值:(1)border-width:设置元素边框的粗细,默认3~4px( ...

随机推荐

  1. linux查看端口被那个进程占用

    linux下遇到端口被暂用了 需要知道是哪个进程 比如80端口 可以这样 netstat -tunlp|

  2. [NLP] nlp-lstm-cos -> sin

    LSTM 看了官方lstm以及相关原理,然后自己按照理解写了一遍,然后在网上看到cos预测sin问题,然后用lstm完成了建模. 看到好多论文里图像文本特征用lstm的,对学ocr有点帮助. 官方ls ...

  3. C/C++中的 void 和 void*

    转自:https://blog.csdn.net/tonglin12138/article/details/86516789 写在前面:开门见山,大家看下面这个例子: unsigned char er ...

  4. tensorflow 分布式搭建

    https://blog.csdn.net/qq_40652148/article/details/80467131 https://yq.aliyun.com/articles/602111 git ...

  5. Octavia 创建 Listener、Pool、Member、L7policy、L7 rule 与 Health Manager 的实现与分析

    目录 文章目录 目录 创建 Listener 创建 Pool 创建 Member CalculateDelta HandleNetworkDeltas AmphoraePostNetworkPlug ...

  6. div动画旋转效果

    animation: spin 10s linear infinite;

  7. node.js ffmpeg-concat 命令行形式处理多个视频的过度效果

    ffmpeg-concat 是利用 gl-transitions 处理多个视频的过度效果.详细说明参见 https://github.com/transitive-bullshit/ffmpeg-co ...

  8. Mybatis-plus 思维导图，让 Mybatis-plus 不再难懂

    摘要: Mybatis-Plus(简称MP)是一个Mybatis的增强工具,在 Mybatis 的基础上只做增强不做改变,为简化开发.提高效率而生. mybatis-plus与mybatis myba ...

  9. 操作系统安全 - 提权 - Windows提权 - 汇总

    CVE_2019-1388 Date: -- 影响范围: SERVER ====== Windows 2008r2 ** link OPENED AS SYSTEM ** Windows 2012r2 ...

  10. nginx 事件机制原理

    事件驱动模型是Nginx服务器保障完整功能和具有良好性能的重要机制之一. 事件驱动模型概述 实际上,事件驱动并不是计算机编程领域的专业词汇,它是一种比较古老的响应事件的模型,在计算机编程.公共关系.经 ...