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

    2021-02-23 10:29:58
    box-shadow前言 box-shadow是css3的一个新属性,用来实现阴影效果,阴影分为内阴影和外阴影两个效果,可以通过逗号添加多个阴影效果。 box-shadow阴影用法 box-shadow:insetoffset-xoffset-yblur-...

    box-shadow前言

    box-shadow是css3的一个新属性,用来实现阴影效果,阴影分为内阴影和外阴影两个效果,可以通过逗号添加多个阴影效果。

    box-shadow阴影用法

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

     

    box-shadow参数解释

    @1:inset

      有inset 则为内阴影,没有insert 则为外阴影,默认为外阴影。

    @2:offset-x

     横向阴影的大小,正值阴影在右边,负值阴影在左边,0的时候阴影中盒子后面,看不见的,如果有blur-radius值会有模糊效果。

    @3:offset-y

    纵向阴影的大小,值同offset-x。

    @4:blur-radius

    阴影的模糊程度,值越大,阴影越模糊。

    @5:spread-radius

     阴影的扩大缩小,正值时,阴影扩大;负值时,阴影缩小,默认为0,和盒子同样大。

     

    box-shadow实例应用中的探讨

    内阴影的使用

    .shadowdemo{
        width:120px;
        height:120px;
        background:#FAF223;
        box-shadow:inset 2px 2px 8px #065EAF;
    }

     

    效果如下:

    inset.png

    使用insert的时候offset-x,offset-y的值的意义和外阴影是相反的,正值是左边,上边。负值是右边,下边。

    .shadowdemo{
        width:120px;
        height:120px;
        background:#FAF223;
        box-shadow:inset -2px -2px 8px #065EAF;
    }

     

    效果如下:

    insetoffset.png

    很想我们的立体按钮。

    以此,我们可以利用box-shadow特性实现一个3D立体效果,效果如下

    3dbtn.png

    不够真切?你可以点击查看box-shadow的3D按钮

    代码如下:

    .shadowdemo{
        display:inline-block;
        line-height:33px;
        height:36px;
        padding:0 2em;
        font-size:13px;
        background:#0C58A7;
        box-shadow:inset -3px -3px 2px #050533;
        text-decoration: none;
        color:#fff;
        border-radius: 4px;
        vertical-align:middle;
    }
    .shadowdemo:active{
        line-height: 39px;
        box-shadow:inset 2px 3px 2px #050533;
    }
    <a href="javascript:;" class="shadowdemo">我是按钮</a>

    我们用:active伪类来实现按下时效果的动画,通过box-shadow的inset的内阴影的转换,形成视界上突出和凹陷的效果。这里值得讲的是height和line-height的使用,height用来定死高度,然后通过line-height的高度变化实现active时文字的下移效果,更逼真3D效果。

    没有按下时:line-height=height-offsety,

    按下active时:line-height=height+offsety。

    外阴影的使用

    .outshadow{
        width:120px;
        height:120px;
        background:#0C58A7;
        box-shadow: 4px 4px 8px #000;
    }

    效果如下:

    outshadow.png

    这个外阴影是我们常用的效果,蓝色的div看起来很有浮于页面的上层。

    下面我们来个例子看一下spread-radius阴影扩大缩小的作用

    .outshadow{
        width:120px;
        height:120px;
        background:#0C58A7;
        box-shadow: 4px 4px 8px 6px #000;
    }

    效果如下:

    spread.png

    这里的代码比上一个外阴影多了6px的spread-radius的扩大阴影。我们可以看到他的作用是把阴影的大小向外扩大了,左边和上边也出现了明显的阴影效果。

    阴影的单位我们还可以使用rgba等有透明效果的阴影。

    .outshadow{
        width:120px;
        height:120px;
        background:#0C58A7;
        box-shadow: 4px 4px 8px  rgba(0,0,0,0.5);
    }

    效果如下:

    shadowrgba.png

    效果明显比#000的阴影效果轻很多。阴影效果会跟随元素的圆角也会显示圆角的阴影。并且外阴影效果会和外阴影合并,内阴影效果会和内阴影合并,外阴影效果不会和内阴影效果不会合并。

    .outshadow{
        width:120px;
        height:120px;
        background:#0C58A7;
        border-radius:8px;
        box-shadow: 4px 4px 8px rgba(0,0,0,0.5),
                    4px 5px 3px #05A623,
                    inset 4px 4px 8px #000;
    }

    效果如下:

    boxshaowcollapse.png

    外阴影的黑色和绿色合并了,但是没有和内阴影合并,并且无论是内阴影,外阴影都是跟随了div的圆角产生了圆角效果。

    box-shadow四周阴影实现

    通过对box-shadow使用的理解,我们想要一个div的四周都有阴影的话,可能首先想到的是通过box-shadow的四周阴影叠加来实现。

    .outshadow{
        width:120px;
        height:120px;
        background:#0C58A7;
        box-shadow: 6px 6px 8px rgba(0,0,0,0.8),
                    -6px -6px 8px rgba(0,0,0,0.8);
    }

    效果如下:

    boxshadowarround.png

    很明显,这个四周阴影的效果很不符合预期,缺少了2个角的阴影,这种方式实现四周阴影是不行的。但是box-shadow还有一个属性spread-radius用来扩大阴影,我们可以借助它来实现四周阴影。

    .outshadow{
        width:120px;
        height:120px;
        background:#0C58A7;
        box-shadow: 0px 0px 8px 6px rgba(0,0,0,0.8);
    }

    效果如下:

    arroundshadow.png

    这个四周阴影的效果实现的很好,这里我们offset-x,offset-y都设置为0,也就是阴影都在div后面,我们通过第4个参数spread-radius来扩大阴影的范围,让它向四周扩大6px,那么就能实现四周阴影的效果。

    box-shadow单边阴影实现

    box-shadow的单边阴影效果的实现同样要借助spread-radius参数来实现。

    .outshadow{
        width:120px;
        height:120px;
        background:#0C58A7;
        box-shadow: 8px 2px 4px -2px rgba(0,0,0,0.8);
    }

    效果如下:

    onesideboxshadow.png

    实现原理很简单,右边阴影8px,下边阴影2px,我们通过spread-radius把阴影范围缩小了2px,那么下边阴影就隐藏到了div元素的后面,右边的阴影留在外面的就剩下了6px。这样单边阴影的效果就实现了,你可以根据需要选择哪个边有阴影。不过如果你细心的话可以看到下面还是有略微的阴影效果,这个是blur-radius造成的,那么我们的spread-radius要设置为 2px+6px=8px,那么下边就完全没有阴影了。

    .outshadow{
        width:120px;
        height:120px;
        background:#0C58A7;
        box-shadow: 8px 2px 2px -4px rgba(0,0,0,0.8);
    }

    效果如下:

    absoneshadow.png

    仔细看这个,下面完全没有一点阴影的迹象了。

    写了一个demo,你可以点击查看box-shadow单边阴影和四周阴影的效果

    展开全文
  • box-shadow属性There’s been a lot of talk over the differences between the CSS box-shadow property and the drop-shadow filter. The former has been around for a long time, and is well-supported across ...

    box-shadow属性

    There’s been a lot of talk over the differences between the CSS box-shadow property and the drop-shadow filter. The former has been around for a long time, and is well-supported across modern browsers; the latter is a translation from SVG into CSS, and currently has support in all modern browsers, with the exception of IE.  At first glance the CSS and filter shadow techniques appear to be same effect: even their syntaxes are very similar. As we’ll see, there are some very significant differences between the two.

    关于CSS box-shadow属性和drop-shadow 过滤器之间的区别已有很多讨论。 前者已经存在了很长时间,并且在现代浏览器中得到了很好的支持。 后者是从SVGCSS的转换,目前支持所有现代浏览器,但IE除外。 乍看之下,CSS和滤镜阴影技术似乎具有相同的效果:即使它们的语法也非常相似。 正如我们将看到的,两者之间存在一些非常显着的差异。

    I’ll be contrasting the two methods by applying them to the same element using two different classes:

    我将通过使用两个不同的将它们应用于同一元素来比较这两种方法:

    .shadowCSS {
    	box-shadow: 12px 12px 7px rgba(0,0,0,0.5);
    }
    .shadowfilter {
    	-webkit-filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5));
    	drop-shadow(12px 12px 7px rgba(0,0,0,0.5));
    	filter: url(shadow.svg#drop-shadow);
    }

    Much of the recent conversation has focused on one feature or another; this article will be a complete side-by-side matchup of the two systems, comparing flexibility, rendering speed and quality. Vendor prefixes have been removed for clarity.

    最近的大部分讨论都集中在一个功能或另一个功能上。 本文将比较这两个系统的完整性,并比较灵活性,渲染速度和质量。 为了清楚起见,已删除了供应商前缀。

    Photograph of a woman in a cat mask
    border-image:url(gold-picture-frame.png) 81 83 82 84;
    border-width: 60px;
    filter: drop-shadow(9px 9px 9px rgba(0,0,0,0.3));
    filter: url(shadow.svg#drop-shadow);

    The most exciting part of filter shadows is that they follow the explicit outline of elements. That’s even true for 32 and 16-bit PNG’s, as you can see above. box-shadow (as the name implies) reflects the rectangular shape of the image, ignoring the alpha mask; filter shadow follows the mask outline of the PNG.

    滤镜阴影最令人兴奋的部分是它们遵循元素的明确轮廓。 正如您在上面看到 ,对于32位和16位PNG甚至是这样。 box-shadow (顾名思义)反映了图像的矩形形状,而忽略了alpha蒙版; filter阴影遵循PNG的蒙版轮廓。

    That also includes border-image, provided the border-image is an alpha-masked PNG.

    如果边界图像是带有alpha蒙版的PNG,则其中还包括border-image

    The drop-shadow filter takes into account the addition of pseudo-elements, such as :before and :after, as in these pure-CSS speech-bubbles: note the shadow underneath the triangle in the filtered version.

    drop-shadow过滤器考虑了伪元素的添加,例如:before:after ,如在这些纯CSS语音泡沫中一样:请注意过滤版本中三角形下方的阴影。

    “A girl’s gotta eat.”

    “一个女孩必须吃。”

    filter: drop-shadow(9px 9px 9px rgba(0,0,0,0.3)); 
    filter: url(shadow.svg#drop-shadow);

    “It’s such a waste when pretty things get broken.”

    “漂亮的东西坏了,真是浪费。”

    box-shadow: 9px 9px 7px rgba(0,0,0,0.3);

    阴影过滤器的局限性 (Limitations of the drop-shadow filter)

    A few drawbacks of the filter approach should be noted at this point:

    此时应注意过滤器方法的一些缺点:

    • The dropshadow filter should support a fourth spread value to swell the shadow just as box-shadow does, but it appears that the current implementation in Webkit will consider a fourth value a parsing error and turn off the shadow entirely in response.

      dropshadow过滤器应该支持第四spread价值膨胀,就像阴影box-shadow呢,但现在看来,在Webkit的当前实现将考虑第四值分析错误和完全响应关闭阴影。

    • The filter spec does not support an inset value, so you can't easily create inner shadows with filter code.

      滤镜规格不支持inset值,因此您无法轻松地使用滤镜代码创建内部阴影。

    进一步的差异 (Further differences)

    Both shadow effects respect border-radius and transform, but the filtered shadow will appear “under” an element with no background, whereas box-shadow will treat it as solid. If the border is irregular (dashed, for example), the filter will honor that; box-shadow will not.

    两种阴影效果都遵循border-radiustransform ,但是过滤后的阴影将出现在没有背景的元素“下方”,而box-shadow会将其视为实体。 如果边界是不规则的(例如, dashed ),则过滤器将优先使用该边界; box-shadow不会。

    border: 3px solid #262b57; 
    width: 150px; height:150px;
    border-radius: 10px;
    transform: rotate(8deg);
    box-shadow: 9px 9px 7px rgba(0,0,0,0.3);
    filter: drop-shadow(9px 9px 9px rgba(0,0,0,0.3));
    filter: url(shadow.svg#drop-shadow);
    border: 3px dashed #262b57;
    box-shadow: 9px 9px 7px rgba(0,0,0,0.3);
    filter: drop-shadow(9px 9px 9px rgba(0,0,0,0.3));
    filter: url(shadow.svg#drop-shadow);

    Because it is only shadowing the border (which is just four pixels thick in this case) the filter version appears lighter.

    因为仅阴影边框(在这种情况下,边框仅厚四个像素),所以filter版本显得更亮。

    判断 (Judgement)

    filter(box-shadow) is definitely the winner in this round: it has far greater flexibility, and only loses when it comes to inset shadows and (current) lack of spread.

    filter(box-shadow)在这轮比赛中绝对是赢家:它具有更大的灵活性,并且仅在出现阴影和(当前)缺乏扩散时才失败。

    速度与品质 (Speed & Quality)

    While the rendering quality appears much the same between the two systems, drop-shadow filters have the advantage of hardware acceleration if the browser vendor supports it; box-shadow does not have access to that code. All other factors being equal, the drop-shadow filter will tend to render faster.

    虽然两个系统之间的渲染质量看起来非常相似,但是drop-shadow器具有硬件加速的优势(如果浏览器供应商支持的话)。 box-shadow无法访问该代码。 在所有其他因素相同的情况下, drop-shadow过滤器将倾向于更快地渲染。

    结论 (Conclusion)

    So which do you use? At this stage I think we can set a few simple rules:

    那么您使用哪个呢? 在此阶段,我认为我们可以设置一些简单的规则:

    1. if your element is solid and has a solid border (with or without border-radius), use box-shadow. It has better support, and will provide the same visual result as the drop-shadow filter, albeit a few milliseconds slower.

      如果您的元素是实心且具有实心边框(带有或不带有border-radius ),请使用box-shadow 。 它具有更好的支持,并且将提供与drop-shadow滤镜相同的视觉效果,尽管速度要慢几毫秒。

    2. If you want an inset shadow – for example, to achieve a vignette effect – use box-shadow.

      如果要inset阴影(例如,要获得晕影效果),请使用box-shadow

    If you have a PNG image with an alpha mask, there are several options:

    如果您有带Alpha蒙版PNG图像 ,则有以下几种选择:

    1. Bake in the shadow using Photoshop or your image editor of choice, so that every browser sees it the same way;

      使用Photoshop或您选择的图像编辑器烘烤阴影,以便每个浏览器都以相同的方式看到它;

    2. Leave the image unaltered and use the drop-shadow filter, knowing that only Webkit browsers will see the shadow for now.

      保持图像不变,并使用drop-shadow过滤器,知道只有Webkit浏览器才能看到阴影。

    3. Try to use an SVG drop-shadow filter on the content for equivalency in other browsers.

      尝试在内容上使用SVG阴影过滤器,以与其他浏览器等效

    If your element has an irregular outline that’s not controlled by border-radius - why not take advantage of CSS fallback techniques and use both?

    如果您的元素具有不受border-radius控制的不规则轮廓-为什么不利用CSS后备技术并同时使用两者?

    “Show a man what he expects to see, and he won’t look beneath the surface.”

    “向一个人展示他期望看到的东西,而他不会看起来在表面之下。”

    One cautionary note is that both shadow render systems will be active with this CSS: Webkit will “double up” the shadow on the regular element. However, you will achieve fallback support in older browsers that only have box-shadow.

    注意事项之一是, 两个阴影渲染系统都将与此CSS一起使用:Webkit将使常规元素上的阴影“加倍”。 但是,您将在仅具有box-shadow旧版浏览器中获得后备支持。

    I’m also going to place a bet that the filter version will be open to manipulation by CSS Custom Filters… which will be great for doing curved drop-shadows without any need for trickery.

    我还要打赌, filter版本将可以通过CSS自定义过滤器进行操作……这将非常适合制作弯曲的阴影而不需要任何技巧。

    As you can see, the two systems are very different, and appropriately named: hopefully this comparison can be a metric for you to decide how to use either in your future projects.

    如您所见,这两个系统非常不同,并且命名适当:希望这种比较可以成为您决定如何在将来的项目中使用其中一个的度量标准。

    翻译自: https://thenewcode.com/598/box-shadow-property-vs-drop-shadow-filter-a-complete-comparison

    box-shadow属性

    展开全文
  • 1. box-shadow 合阴影, 对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色} box-shadow属性的参数设置取值: 阴影类型...

    1. box-shadow

    合阴影, 对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色}

    box-shadow属性的参数设置取值:

    阴影类型:此参数可选。如不设值,默认投影方式是外阴影;如取其唯一值“inset”,其投影为内阴影;

    X-offset: 阴影水平偏移量,其值可以是正负值。如果值为正值,则阴影在对象的右边,其值为负值时,阴影在对象的左边;

    Y-offset: 阴影垂直偏移量,其值也可以是正负值。如果为正值,阴影在对象的底部,其值为负值时,阴影在对象的顶部;

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

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

    阴影颜色:此参数可选。如不设定颜色,浏览器会取默认色,但各浏览器默认取色不一致,特别是在webkit内核下的safari和chrome浏览器下表现为透明色,在Firefox/Opera下表现为黑色(已验证),建议不要省略此参数。

    2. drop-shadow

    filter: drop-shadow 滤镜,真正的阴影。 只有四个参数:x-offset, y-offset, 阴影模糊半径, 阴影颜色, 和box-shadow的区别:

    /*还未测试,静待。。。*/

    3. text-shadow

    字体的阴影, 对象选择器 {text-shadow:X轴偏移量 Y轴偏移量阴影模糊半径 阴影颜色}

    text-shadow属性的参数设置取值:

    X-offset: 阴影水平偏移量,其值可以是正负值。如果值为正值,则阴影在对象的右边,其值为负值时,阴影在对象的左边;

    Y-offset: 阴影垂直偏移量,其值也可以是正负值。如果为正值,阴影在对象的底部,其值为负值时,阴影在对象的顶部;

    阴影模糊半径:但其值只能是为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊;

    阴影颜色:设定颜色

    展开全文
  • drop-shadow与box-shadow都是阴影效果(光晕效果)的css属性,二者最大的不同点在于:box-shadow只能制作矩形的阴影,而drop-shadow则可以制作和物件不透明区域完全相同形状的阴影。底下是二个css属性的用法: ....
  • 比如:box-shadow,每次使用CSS3里的box-shadow,都记不清box-shadow怎么使用,都要查阅资料才能实现对应的效果,现在总结一下,box-shadow的使用方法以及box-shadow内阴影的使用,方便以后查看。 打造全网web前端...

    CSS里面的属性很多,有些属性长时间不用,就容易忘,尤其是那种需要设置多个值的属性。比如:box-shadow,每次使用CSS3里的box-shadow,都记不清box-shadow怎么使用,都要查阅资料才能实现对应的效果,现在总结一下,box-shadow的使用方法以及box-shadow内阴影的使用,方便以后查看。

     

    打造全网web前端全栈资料库(总目录)看完学的更快,掌握的更加牢固,你值得拥有(持续更新)

    相关推荐:

    一、box-shadow语法

    box-shadow: none | inset(可选值,不设置,为外投影,设置,为内投影) x-offset(阴影水平偏移量,正方向为right) y-offset(阴影垂直偏移量,正方向为bottom) blur-radius(阴影模糊半径,为正,0为无模糊效果,值越大,越模糊) spread-radius(阴影扩展半径,可正可负) color(设置对象的阴影的颜色)

    属性值描述:

    1.阴影类型:此参数可选,默认的投影方式是外阴影;如果取其唯一值“inset”,就是将外阴影变成内阴影
    2. X-offset:是指阴影水平偏移量,其值可正可负,正值,则阴影在对象的右边,负值,阴影在对象的左边
    3. Y-offset:是指阴影的垂直偏移量,其值也可以是正负值,正值,阴影在对象的底部,负值时,阴影在对象的顶部
    4.阴影模糊半径:此参数是可选,只能为正值,如果其值为0时,表示阴影不具有模糊效果,值越大阴影的边缘就越模糊
    5. 阴影扩展半径:此参数可选,其值可为正负值,正值,则整个阴影都延展扩大,反之,则缩小
    6.阴影颜色:此参数可选,不设定任何颜色时,浏览器会取默认色,但各浏览器默认色不一样,特别是在webkit内核下的safari和chrome浏览器将无色,也就是透明,建议不要省略此参数。
    注:多层阴影,最内层优先级最高,之后依次降低。使用逗号“,”隔开。

    二、box-shadow的实际运用

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

    box-shadow: 0 0 15px #f00;

    效果图:

    举例2: X轴与Y轴设为正值(正值 X轴向右 Y轴向下)

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

    效果图:

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

     

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

    效果图:

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

    box-shadow:-10px 0px 10px red,   /*左边阴影*/
     0px -10px 10px black,  /*上边阴影*/
     10px 0px 10px green,  /*右边阴影*/
     0px 10px 10px blue;" /*下边阴影*/ >

    效果图:

    以上介绍了CSS3里的box-shadow怎么使用,box-shadow:inset内部阴影怎么使用,以及box-shadow的实际运用。至于box-shadow周围设置什么样的效果,还要看具体要求。

    以上就是分享CSS3里box-shadow属性的使用方法,包括内阴影box-shadow:inset的详细内容,更多请关注我!!

    展开全文
  • 将对 CSS 的几个新属性 (text-shadow,box-shadow,and border-radius) 做基本介绍。这些 CSS3 属性通常用来加强页面布局。
  • box-shadow相信每个人都用过,可能你不知道box-shadow可以做出很多效果,下面我用box-shadow画一个机器猫,展示box-shadow的强大代码:&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &...
  • box-shadow: h-shadow v-shadow blur spread color inset; 值 说明 h-shadow 必需的。水平阴影的位置。允许负值 v-shadow 必需的。垂直阴影的位置。允许负值 blur 可选。模糊距离 spread 可...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,673
精华内容 3,069
关键字:

box-shadow