css的box-shadow是用来添加边框阴影效果的。

属性值详解:

1、inset
可选值,默认阴影在盒子外
使用inset后,阴影在盒子内,即使指定边框或者透明边框,阴影依然存在。

2、<offset-x> <offset-y>
这是头两个<length> 值,用来设置阴影偏移量。offset-x为设置阴影的水平位移,假如是负值,那么阴影在边框的左侧;offset-y设置阴影的垂直位移,假如是负值,那么阴影位于边框顶部。这个用数学中的数轴来理解应该是可以的,如下图:

我们的水平原点是以边框的左上角为起始点,x为水平位移,Y为垂直位移。

3、<blur-radius>
指定模糊半径,不允许负值,假如设置为0,则阴影不模糊,否则设置越大的值,边框阴影就越模糊。

4、<spread-radius>
指定阴影拓展,假如设置为0,不拓展,正值阴影扩大,负值缩小。

demo:

(1)输入框内阴影

.shadow (
     -moz-box-shadow: inset 0 0 10px #CCC;
     -webkit-box-shadow: inset 0 0 10px #CCC;
     box-shadow: inset 0 0 10px #CCC;

(2)简单效果
.one (
     -moz-box-shadow:5px 5px;
     -webkit-box-shadow:5px 5px;
     box-shadow:5px 5px;

(3)虚阴影效果
.two (
     -moz-box-shadow:2px 2px 10px #06c;
     -webkit-box-shadow:2px 2px 10px #06c;
     box-shadow:2px 2px 10px #06c;

(4)渐变阴影效果
.three (
     -moz-box-shadow:0 0 10px #06c;
     -webkit-box-shadow:0 0 10px #06c;
     box-shadow:0 0 10px #06c;

(5)带光晕效果
.four (
    -moz-box-shadow:0 0 10px 10px #06c;
    -webkit-box-shadow:0 0 10px 10px #06c;
    box-shadow:0 0 10px 10px #06c;

(6)内阴影效果
.five (
    -moz-box-shadow:inset 5px 5px 10px #06c;
    -webkit-box-shadow: inset 5px 5px 10px #06c;
    box-shadow: inset 5px 5px 10px #06c;

(7)彩色阴影
.six (
    -moz-box-shadow:0 0 10px red,
                                   2px 2px 10px 10px yellow,
                                   4px 4px 12px 12px green;
    -webkit-box-shadow:0 0 10px red,
                                   2px 2px 10px 10px yellow,
                                   4px 4px 12px 12px green;
    box-shadow:0 0 10px red,
                                   2px 2px 10px 10px yellow,
                                   4px 4px 12px 12px green;

-moz-box-shadow的更多相关文章

  1. 如何设置box shadow的透明度

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-04-24) 今天发现使用box-shadow属性,可以很好的给div添加阴影效果,但是添加的效果如果是: -moz-box- ...

  2. 分享div、text、Box Shadow(阴影)演示及代码的页面

    附图: 直接上链接:www.css88.com/tool/css3Preview/Box-Shadow.html

  3. webAssmebly实现js数组排序 使用custom elements和Shadow DOM自定义组件

    直接上码了……………… .wat源码 (module (type $t0 (func (param i32 i32))) (type $t1 (func (result i32))) (type $t ...

  4. 来看看css3中的box-shadow

    不谈IE,只谈谈box-shadow的具体使用方法 语法: E {box-shadow: <length> <length> <length>?<length ...

  5. 有趣的 CSS 像素艺术

    原文地址:https://css-tricks.com/fun-times-css-pixel-art/#article-header-id-4 译者:nzbin 友情提示:由于国内网络的原因,Cod ...

  6. 关于box-shadow属性的一点心得

    一般我用到box-shadow都是用于诸如按钮,文本块,某些图标,css类似为: box-shadow: 1px 1px 5px rgba(0, 0, 0, .8); 这样,样式看上去会更加柔和,或者 ...

  7. CSS3 Border-image

    CSS3中有关于border的属性我们一起学习完了圆角border-radius和边框颜色border-color,只剩下最后一个边框图片border-image.今天我们就一起来学习这个border ...

  8. 初学c# -- 学习笔记(五) winfrom无边框四周阴影

    刚用到这个功能,网上扯淡的东西太多了,都是2边阴影,还什么窗口叠加.ps作图啥的,什么玩意.还是老外实在,google找的,无边框窗体,四边透明阴影. public partial class For ...

  9. 【转载】css3 content 生成内容

    content一般和:before,:after一起使用,用来生成内容(img和input没有该属性),content的内容一般可以为以下四种: none: 不生成任何值. attr: 插入标签属性值 ...

  10. CSS3属性border-radius绘制多种多样的图形

    border-radius,国内翻译成圆角,你可能以为这个属性就是用来画圆角,没错,但是除此之外,它还可以做点别的事情.radius其实指的是边框所在圆的半径,这个CSS3属性不仅能够创建圆角,还可以 ...

随机推荐

  1. 【转】tar命令详解

    原文:http://www.cnblogs.com/qq78292959/archive/2011/07/06/2099427.html tar -c: 建立压缩档案-x:解压-t:查看内容-r:向压 ...

  2. NORDIC 修改MTU

    https://www.cnblogs.com/jiangjiu/p/10063556.html 注意要修改RAM起始地址,因为MTU增大了

  3. gyp ERR! stack Error: EACCES: permission denied, mkdir问题解决方案

    sudo npm i --unsafe-perm 原因还是权限问题 就是说 npm 出于安全考虑不支持以 root 用户运行,即使你用 root 用户身份运行了,npm 会自动转成一个叫 nobody ...

  4. maven报错 java.lang.RuntimeException: com.google.inject.CreationException: Unable to create injector, see the following errors

    2 errors java.lang.RuntimeException: com.google.inject.CreationException: Unable to create injector, ...

  5. 关于TAILQ链表节点删除问题

    这两天偶遇无线驱动中对链表节点删除的问题,刚开始修改代码的时候并没有很在意,把TAILQ链表当成一般的链表来处理,虽然修改以后没有出现段错误,但是后面review代码的时候发现,这样改不对.后面花了点 ...

  6. li每三个换行

      背景:鉴于有时候调取数据用table不方便,所以用的li,但是li又没有table的样式,就需要自己写了 思路:先将所有的li浮动,然后清除第3n+1的浮动(如果是四个则是4n+1) 例子: &l ...

  7. .Net界面开发神器—DevExpress官方汉化包免费下载!还在等什么?

    点击获取DevExpress v19.1.7新版试用下载 DevExpress Localization Service允许您创建一组自定义的附属程序集,要将语言包添加到程序集中,请查看本文中为大家列 ...

  8. BBS-media配置

    media配置: 在上传头像的时候会用到media,首先需要在setting中加下面这一句话 MEDIA_ROOT=os.path.join(BASE_DIR,"blog",&qu ...

  9. Remote API(RAPI)之 系统信息

    RAPI提供了一些取系统信息的函数 CeGetSystemInfo:返回当前系统信息 CeGetSystemMetrics:获取Windows元素的尺寸和系统设置 CeGetVersionEx:获取当 ...

  10. ip 转发(调度器的路由转发)

    临时开启 [root@proxy ~]# echo > /proc/sys/net/ipv4/ip_forward 永久开启 [root@proxy ~]# vim /etc/sysctl.co ...