精华内容
下载资源
问答
  • box-shadow属性

    2018-06-03 17:35:21
    box-shadow属性 语法 box-shadow: h-shadow v-shadow blur spread color inset; 默认值 none 值 描述 h-shadow 必需。水平阴影的位置。允许负值。 v-shadow 必需。垂直阴影的位置。允许负值...

    box-shadow属性

    语法

    box-shadow: h-shadow v-shadow blur spread color inset;
    • 默认值 none
    描述
    h-shadow 必需。水平阴影的位置。允许负值。
    v-shadow 必需。垂直阴影的位置。允许负值。
    blur 可选。模糊距离。
    spread 可选。阴影的尺寸。
    color 可选。阴影的颜色。[CSS颜色值]
    inset 可选。将外部阴影 (outset) 改为内部阴影。

    CSS颜色值

    • 十六进制色
      所有浏览器都支持十六进制颜色值。
      十六进制颜色是这样规定的:#RRGGBB,其中的 RR(红色)、GG(绿色)、BB(蓝色)十六进制整数规定了颜色的成分。所有值必须介于 0 与 FF 之间。
    p {
    background-color:#0000ff;
    }
    • RGB 颜色
      所有浏览器都支持 RGB 颜色值。
      RGB 颜色值是这样规定的:rgb(red, green, blue)。每个参数 (red、green 以及 blue) 定义颜色的强度,可以是介于 0 与 255 之间的整数,或者是百分比值(从 0% 到 100%)。
    p {
    background-color:rgb(255,0,0);
    } 
    • RGBA 颜色
      RGBA 颜色值得到以下浏览器的支持:IE9+、Firefox 3+、Chrome、Safari 以及 Opera 10+。
      RGBA 颜色值是 RGB 颜色值的扩展,带有一个 alpha 通道 - 它规定了对象的不透明度。
      RGBA 颜色值是这样规定的:rgba(red, green, blue, alpha)。alpha 参数是介于 0.0(完全透明)与 1.0(完全不透明)的数字。
    p {
    background-color:rgba(255,0,0,0.5);
    }
    • HSL 颜色
      HSL 颜色值得到以下浏览器的支持:IE9+、Firefox、Chrome、Safari 以及 Opera 10+。
      HSL 指的是 hue(色调)、saturation(饱和度)、lightness(亮度) - 表示颜色柱面坐标表示法。
      HSL 颜色值是这样规定的:hsl(hue, saturation, lightness)。
      Hue 是色盘上的度数(从 0 到 360) - 0 (或 360) 是红色,120 是绿色,240 是蓝色。Saturation 是百分比值;0% 意味着灰色,而 100% 是全彩。Lightness 同样是百分比值;0% 是黑色,100% 是白色。
    p {
    background-color:hsl(120,65%,75%);
    }
    • HSLA 颜色
      HSLA 颜色值得到以下浏览器的支持:IE9+、Firefox 3+、Chrome、Safari 以及 Opera 10+。
      HSLA 颜色值是 HSL 颜色值的扩展,带有一个 alpha 通道 - 它规定了对象的不透明度。
      HSLA 颜色值是这样规定的:hsla(hue, saturation, lightness, alpha),其中的 alpha 参数定义不透明度。alpha 参数是介于 0.0(完全透明)与 1.0(完全不透明)的数字。
    p {
    background-color:hsla(120,65%,75%,0.3);
    }
    • 预定义/跨浏览器颜色名
      1. aqua(水绿)
      2. black(黑)
      3. blue(蓝)
      4. fuchsia(紫红)
      5. gray(灰)
      6. green(绿)
      7. lime(浅绿)
      8. maroon(褐)
      9. navy(深蓝)
      10. olive(橄榄)
      11. purple(紫)
      12. red(红)
      13. silver(银)
      14. teal(深青)
      15. white(白)
      16. yellow(黄)
      17. transparent (透明)

    参考
    http://www.w3school.com.cn/cssref/pr_box-shadow.asp

    展开全文
  • CSS3box-shadow属性详解

    万次阅读 多人点赞 2019-04-27 19:18:37
    CSS3 --添加阴影(盒子阴影的使用) CSS3 - 给div或者文字添加阴影(盒子阴影、文本阴影的使用) CSS3定义了两种阴影:盒子阴影和文本阴影。...box-shadow属性向box添加一个或多个阴影。 语法: box-shadow: of...

    CSS3 --添加阴影(盒子阴影的使用)

    CSS3 - 给div或者文字添加阴影(盒子阴影、文本阴影的使用)

    CSS3定义了两种阴影:盒子阴影和文本阴影。其中盒子阴影需要IE9及其更新版本,而文本阴影需要IE10及其更新版本。下面分别介绍box-shadow阴影的使用:

    1、盒子阴影box-shadow

    box-shadow属性向box添加一个或多个阴影。

    语法:

    box-shadow: offset-x offset-y blur spread color inset;
    
    ox-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展] [阴影颜色] [投影方式];
    

    词解释:blur:模糊 spread:伸展 inset:内凹

    参数解释:

    • offset-x:必需,取值正负都可。offset-x水平阴影的位置。
    • offset-y:必需,取值正负都可。offset-y垂直阴影的位置。
    • blur:可选,只能取正值。blur-radius阴影模糊半径,0即无模糊效果,值越大阴影边缘越模糊。
    • spread:可选,取值正负都可。spread代表阴影的周长向四周扩展的尺寸,正值,阴影扩大,负值阴影缩小。
    • color:可选。阴影的颜色。如果不设置,浏览器会取默认颜色,通常是黑色,但各浏览器默认颜色有差异,建议不要省略。可以是rgb(250,0,0),也可以是有透明值的rgba(250,0,0,0.5)。
    • inset:可选。关键字,将外部投影(默认outset)改为内部投影。inset 阴影在背景之上,内容之下。

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

    二、box-shadow使用

    1、水平垂直偏移为0也可以有阴影

    如果offset-x或offset-y值为0,则阴影在元素背后,此时给blur-radius值或spread值可以产生阴影效果。

    例子:

    第一个div通过设置blur-radius产生阴影效果。

    第二个div通过设置spread正值产生阴影效果。

    第三个div通过设置spread负值产生阴影效果。

    但是有一点要注意:扩展阴影必须和阴影模糊半径配合使用。

    我个人觉得应该是没有配合使用这一说,但不可能只设置扩展阴影,因为扩展阴影和阴影模糊的取值都可以为正。如果只有扩展阴影的话,会被浏览器当做模糊阴影来解析,所以也可以简单理解为“扩展阴影必须和阴影模糊半径配合使用”,如果只用扩展阴影,可以写成:box-shadow:0 0 0 1px;。

    <style>
          div{
                width: 100px;
                height: 100px;
                margin:50px;
                border: 10px dotted red;
                display: inline-block;
        }
        .blur{
                box-shadow: 0 0  20px ;
                /*box-shadow: 0 0  20px green;*/ /*也可以自定义颜色*/
        }  
        .spread-positive{
                box-shadow: 0 0 20px 5px ;
                /* box-shadow: 0 0 20px 5px green;*/ /*也可以自定义颜色*/
        }
        .spread-negative{
                box-shadow: 0 0 20px -5px ;
                /* box-shadow: 0 0 20px -5px green;*/ /*也可以自定义颜色*/
        }
        </style>
    </head>
    <body>
        <div class="blur"></div>
        <div class="spread-positive"></div>
        <div class="spread-negative"></div>
    </body>
    

    在这里插入图片描述
    2、设置水平垂直偏移得到阴影效果

    outset情况:水平垂直偏移为0,但是不设置blur和spread,看不到阴影,因为此时box-shadow的周长和border-box一样,所以可以通过设置偏移让阴影显示出来。

    inset情况:水平垂直偏移为0,不设置blur和spread,同样看不到阴影,因为此时box-shadow的周长和padding-box一样,同样可通过设置偏移让阴影显示出来。

    例子:

    <style type="text/css">
    div{
        width: 100px;
        height: 100px;
        margin:50px;
        border: 10px dotted pink;
        display: inline-block;
    }
    .shadow0{box-shadow: 0 0;}  
    .shadow1{box-shadow: 1px 1px;}
    .shadow10{box-shadow: 10px 10px;}
    .inset-shadow0{box-shadow: 0 0 inset;}  
    .inset-shadow1{box-shadow: 1px 1px inset;}
    .inset-shadow10{box-shadow: 10px 10px inset;}
    </style>
    <body>
        <div class="shadow0"></div>
        <div class="shadow1"></div>
        <div class="shadow10"></div>
        <div class="inset-shadow0"></div>
        <div class="inset-shadow1"></div>
        <div class="inset-shadow10"></div>
    </body>
    

    在这里插入图片描述
    3、投影方式

    投影方式默认是outset,即外部投影,可设置inset让向内投影。

    例子:第一个div默认outset,第二个设置inset,第三个同时设置两个阴影可以更好的看到outset和inset的关系,第四个div可以看出inset阴影在背景之上,内容之下。

    <style type="text/css">
    div{
        width: 100px;
        height: 100px;
        margin:50px;
        border: 10px dotted pink;
        display: inline-block;
        vertical-align: top;
    } 
    .outset{
        box-shadow: 10px 10px teal;
    }
    .inset{
        box-shadow: 10px 10px teal inset;    
    }
    .double{
        box-shadow: 10px 10px teal inset,10px 10px teal;
    }
    .bg{
        background-color: yellow;
    }
    </style>
    <body>
        <div class="outset"></div>
        <div class="inset"></div>
        <div class="double"></div>
        <div class="inset bg">inset阴影在背景之上,内容之下</div>
    </body>
    

    在这里插入图片描述
    4、如果元素同时指定border-radius属性,则阴影呈现相同的圆角。

    <style type="text/css">
     div{
     width: 100px;
        height: 100px;
        margin:50px;
        border: 10px dotted pink;
        display: inline-block;
        border-radius: 50px;
     }
    .shadow{
        box-shadow: 0 0  10px 10px green;
    }
    </style>
    <body>
    <div class="shadow"></div>
    </body>
    

    在这里插入图片描述
    5、经典例子

    w3c中的一个例子。http://www.w3.org/TR/css3-background/#the-box-shadow
    在这里插入图片描述
    可见:

    • border-radius会以相同的作用影响阴影外形
    • border-image,padding不会影响阴影的任何外形
    • 阴影box和box模型一样
    • 外阴影在对象背景之下,内阴影在背景之上。
    • 层次:内容>内阴影>背景图片>背景颜色>外阴影

    6、多重阴影

    这个效果在上面就看到了,现在再补充一些内容。

    语法:可以设置任意多个阴影,用逗号隔开。

    一个box有多重阴影时,需要注意顺序:多个阴影从上往下分布,第一个阴影在最顶层。

    举例:单边阴影效果

    先解释一下:可单独设置左边框的阴影,右边框的阴影,上边框的阴影,下边框的阴影,其实这样说也对,因为效果看起来就是这样,但根本原因是阴影在盒子后面,只是让阴影的位置发生了变化,其他3 个边的阴影还是存在的,只是被覆盖住了而已,所以,设置某个边的阴影是个很虚的东东了,哎,网上这种说法初看还让我略感困惑,所以我这里说是单边阴影效果,告诉大家只是一种效果,本质还是个box。

    例子解释:给第一个div的上右下左border分别设置红橙黄绿,四种颜色,则red-shadow在最顶层,green-shadow在最底层,如下图左。

    给其加上blur模糊半径,效果更明显,如下图中,可见red-shadow的模糊半径不受干扰,因为在最顶层;接下来orange-shadow次之,被red-shadow的radius干扰;yellow-shadow被orange-shadow和red-shadow的radius干扰;同理green-shadow被它上面的所有shadow的radius干扰。

    如果还是不太理解,那给red-shadow设置一个很大的radius,比如50,就可以看到非常明显的效果了,见下图右。

    <style type="text/css">
    div{
        width: 100px;
        height: 100px;
        margin:50px;
        display: inline-block;
        border: 10px dotted pink;
    }
    .shadow{
        box-shadow: 0 -5px red,
        5px 0 orange,
        0 5px yellow,
        -5px 0 green;
    }
    .blur-shadow{
        box-shadow: 0 -5px 5px red,
        5px 0 5px orange,
        0 5px 5px yellow,
        -5px 0 5px green;
    }
    .big-redShadow{
        box-shadow: 0 -5px 50px red,
        5px 0 5px orange,
        0 5px 5px yellow,
        -5px 0 5px green;
    }
    </style>
    <body>
        <div class="shadow"></div>
        <div class="blur-shadow"></div>
        <div class="big-redShadow"></div>
    </body>
    

    在这里插入图片描述

    7、阴影和布局

    阴影不影响布局, 但是可能会覆盖其他box或者其他box的阴影。

    阴影不触发滚动条,也不增加滚动区域的大小。

    所以布局时可忽略阴影。

    8、spread妙用

    用spread模拟实现border

    <style type="text/css">
    div{
        width: 100px;
        height: 100px;
        display: inline-block;
        margin:10px;
        vertical-align: top;
    }
    .border{
        border:1px solid red;
    }
    .spread{
        box-shadow: 0 0 0 1px red;
    }
    .muli-border{
        box-shadow: 0 0 0 2px red,0 0 0 4px green,0 0 0 6px blue;
    }
    </style>
    <body>
        <div class="border">border</div>
        <div class="spread">box-shadow</div>
        <div class="muli-border">多重<br/>box-shadow</div>
    

    在这里插入图片描述

    用spread实现双色方括号

    <style type="text/css">
    .decorator {
    width: 300px;
    height: 100px;
    padding: 30px;
    box-shadow: -30px -30px 0 -25px red,30px 30px  0 -25px green; 
    }
    </style>
    <body>
    <div class="decorator">段落内容:用box-shadow模拟双色方括号box-shadow: -24px -24px 0 -20px red,24px 24px  0 -20px green; </div>
    </body>
    

    在这里插入图片描述

    展开全文
  • box-shadow 属性

    2019-03-19 16:46:39
    box-shadow: h-shadow v-shadow blur spread color inset; box-shadow:2px 2px 10px 4px #4D4D4D4D; 注释:box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表,每个阴影由 2-4 个长度值、可选的...
    box-shadow: h-shadow v-shadow blur spread color inset;
    
    box-shadow:2px 2px 10px 4px #4D4D4D4D;
    

    注释:box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表,每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

    h-shadow 必需。水平阴影的位置。允许负值。
    v-shadow 必需。垂直阴影的位置。允许负值。
    blur 可选。模糊距离。
    spread 可选。阴影的尺寸。
    color 可选。阴影的颜色。请参阅 CSS 颜色值。
    inset 可选。将外部阴影 (outset) 改为内部阴影。

    展开全文
  • box-shadow 属性 详解

    万次阅读 2020-03-11 01:31:34
    1、box-shadow 语法 box-shadow: none ;...2、box-shadow 属性值描述 阴影类型:此参数可选,默认的投影方式是 外阴影;如果取其唯一值“inset”,就是将外阴影变成内阴影 X-offset:是指 阴影水...

    1、box-shadow 语法

    box-shadow: none ;
    
    box-shadow: inset  x-offset  y-offset  blur-radius  spread-radius  color;
    

    2、box-shadow 属性值描述

    1. 阴影类型:此参数可选,默认的投影方式是 外阴影;如果取其唯一值“inset”,就是将外阴影变成内阴影

    2. X-offset:是指 阴影水平偏移量 ,其值可正可负,正值,则阴影在对象的右边,负值,阴影在对象的左边

    3. Y-offset:是指 阴影的垂直偏移量 ,其值也可以是正负值,正值,阴影在对象的底部,负值时,阴影在对象的顶部

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

    5. 阴影扩展半径:此参数可选,其值可为正负值,正值,则整个阴影都延展扩大,反之,则缩小

    6. 阴影颜色:此参数可选,不设定任何颜色时,浏览器会取默认色,但各浏览器默认色不一样,特别是在webkit内核下的safari和chrome浏览器将无色,也就是透明,建议不要省略此参数

      **注:**多层阴影,最内层优先级最高,之后依次降低。使用逗号“,”隔开。

    3、box-shadow的实际运用

    3.1、举例 1

    不设置X轴与Y轴,设置值阴影模糊半径为15px, 它会在本身发生作用 半径范围,颜色

    box-shadow: 0 0 15px #f00;
    

    3.2、举例 2

    X轴与Y轴设为正值(正值 X轴向右 Y轴向下)

    box-shadow:4px 4px 15px #f00;
    

    3.3、举例 3

    box-shadow:inset 即box-shadow内部阴影,与上面写法相同 唯一不同的是添加了一个inset

    box-shadow:0 0 15px #f00 inset;
    

    3.4、举例 4

    设置正方形的四边颜色都不一样,但是阴影模糊半径都为10px

    box-shadow:-10px 0px 10px red,   /*左边阴影*/
    
                0px -10px 10px black,  /*上边阴影*/
    
                10px 0px 10px green,  /*右边阴影*/
    
                0px 10px 10px blue;" /*下边阴影*/ >
    
    展开全文
  • box-shadow属性向box添加一个或多个阴影。 语法: box-shadow: offset-x offset-y blur spread color inset; ox-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展] [阴影颜色] [投影方式]; 词解释
  • text-shadow和box-shadow属性的学习记录 text-shadow 文字阴影 语法: text-shadow: x轴的偏移距离(向右为正) y轴的偏移距离(向下为正) 模糊程度(可选,默认0px) 阴影颜色(可选,默认黑色); 然后代码和对应的效果...
  • box-shadow属性详解

    2020-07-30 08:34:27
    #### 1.box-shadow属性语法 >box-shadow 属性接受值最多由五个不同的部分组成。 >box-shadow: offset-x offset-y blur spread color position; >换句说: 对象选择器 {box-shadow:X轴偏移量 Y轴偏移量 ...
  • box-shadow 属性详解

    2020-04-20 13:47:35
    1.box-shadow属性语法 box-shadow 属性接受值最多由五个不同的部分组成。 box-shadow: offset-x offset-y blur spread color position; 换句说: 对象选择器 {box-shadow:X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展...
  • Box-shadow属性入门

    2020-03-08 23:22:54
    CSS3的box-shadow(盒子阴影)是给盒子添加一个或者多个阴影的属性。 浏览器支持: IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 属性。 语法: Box-shadow:h-shadow v-shadow blur spread ...
  • 比如:box-shadow,每次使用CSS3里的box-shadow,都记不清box-shadow怎么使用,都要查阅资料才能实现对应的效果,现在总结一下,box-shadow的使用方法以及box-shadow内阴影的使用,方便以后查看。 打造全网web前端...
  • IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 属性。语法:代码如下: CSS Code复制内容到剪贴板 box-shadow: h-shadow v-shadow blur spread color inset;  h-shadow,v-shadow必须。...
  • jQuery CSS3 box-shadow属性设置css3阴影
  • CSS3 box-shadow属性基础

    2019-10-30 10:19:12
    box-shadow 属性向框添加一个或多个阴影。 语法 box-shadow: h-shadow v-shadow blur spread color inset; 注释:box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表,每个阴影由 2-4 个长度值、可...
  • CSS box-shadow属性

    2020-12-28 16:13:21
    box-shadow属性可以设置一个或多个下拉阴影的框 值 说明 h-shadow 必需的。水平阴影的位置。允许负值 v-shadow 必需的。垂直阴影的位置。允许负值 blur 可选。模糊距离 spread 可选。阴影的大小 ...
  • CSS3 box-shadow 属性

    2018-05-09 13:02:43
    定义和用法box-shadow 属性向框添加一个或多个阴影。语法box-shadow: h-shadow v-shadow blur spread color inset;注释:box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表,每个阴影由 2-4 个长度...
  • box-shadow属性四个值_boxshadow的妙用

    千次阅读 2020-12-01 07:58:09
    少啰嗦先看定义首先来看MDN是怎么简述box-shadow的box-shadow属性用于在元素的框架上添加阴影效果。你可以在同一个元素上设置多个阴影效果,并用逗号将他们分隔开。该属性可设置的值包括阴影的X轴偏移量、Y轴偏移量...
  • 比如:box-shadow,每次使用CSS3里的box-shadow,都记不清box-shadow怎么使用,都要查阅资料才能实现对应的效果,现在总结一下,box-shadow的使用方法以及box-shadow内阴影的使用,方便以后查看。 一、box-shadow语法 ...
  • 盒模型的box-shadow属性

    2018-08-07 10:47:25
    1.box-shadow属性 在开发过程中,我们经常会对一些边框进行一些处理,而box-shadow是边框经常会用到的一个样式! box-shadow的属性可以简写为: box-shadow: h-shadow v-shadow blur spread color inset ; ...
  • CSS3——box-shadow属性的介绍 其实box-shadow在实际开发中应用比较少,但是前几天看过一个老师写一个小项目,里面用到了box-shadow,而且对这个讲解的很详细,我就感觉我自己学的跟那位老师学的不是一个box-shadow...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,956
精华内容 782
关键字:

box-shadow属性