Comparison of CSS Shadow Effect between drop-Shadow and box-Shadow

Drop-shadow and box-shadow are css properties of shadow effects (halo effects). The biggest difference between them is that box-shadow can only make rectangular shadows, whereas drop-shadow can make shadows of exactly the same shape as the opaque areas of the object.Below are the usages of two css attributes:

.drop-shadow {
    -webkit-filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.7));
    filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.7))
}

.box-shadow {
    box-shadow: 12px 12px 7px rgba(0, 0, 0, 0.7);
}

Because they are all shadow effects (halo effects), the parameters that can be set are almost the same: in the example above, all value s of the parameters are left to right: horizontal offset, vertical offset, shadow blur distance, shadow color.Next, you'll compare drop-shadow with box-shadow

Partners interested in web front-end technology can join our learning circle. They have been working for the sixth year and share some learning methods with you. Details of actual development need attention.767-273-102 autumn skirt.How to learn the front end from zero base.Are a group of people with dreams, we may be in different cities, but we will travel together Front End Front End

Border and distortion effects

Both drop-shadow and box-shadow shadows reflect the rounded corners and distortion of the border.The difference is: drop-shadow reflects the shape of the actual border, the shadow of the solid line of the solid wireframe, the shadow of the dashed line of the dashed line frame; box-shadow treats the border and its contents as a complete square and creates the shadow of the entire square, while the style of the border is ignored and treated as a real wireframe directly.

.box {
    border: 5px solid #262b57;
    width: 120px;
    height: 120px;
    border-radius: 10px;
    transform: rotate(15deg);
    font-size: 40px;
    text-align: center;
    line-height: 120px;
}

.dashed {
    border-style: dashed;
}
//Front-end learning and communication group: 731771211, which is the front-end of learning, the group will update the latest teaching and learning methods from time to time, want to learn the front-end of the web, or change careers, or college students, and work to improve their own ability of the front-end web Party Welcome to join

Background and Transparency

If the square has a set color (not transparent), the drop-shadow and box-shadow shadows will look similar.What if the background of the square is translucent?We can see from the picture that the color around the shadow is darker and the color in the middle is lighter, so we can infer that transparency has an effect on drop-shadow and no effect on box-shadow.

.bk {
    background-color: #ffcc66;
}

.bk-alpha {
    background-color: rgba(255, 204, 102, 0.3);
}

image border

From the example, we know that drop-shadow can reflect the irregular shape of image-border, while box-shadow treats the border as a solid frame directly, ignoring the shape of the border picture.The owl in the picture is a transparent PNG file. Drop-shadow not only reflects the shape of the border picture, but also the shape of the owl inside the border. Box-shadow adheres to the principle of consistency and treats the border and the picture as a complete square.

.frame {
    width: 286px;
    height: 240px;
    -moz-border-image: url(frame_green_.png) 25 25 repeat;
    -webkit-border-image: url(frame_green_.png) 25 25 repeat;
    border-width: 25px;
    border-image: url(frame_green_.png) 25 25 repeat;
    border-color: #79b218;
    border-style: inset;
    border-width: 25px;
    box-sizing: border-box;
    display: block;
    margin: 10px;
}

Pseudo Elements

Pseudo elements drop-shadow can reflect the shape of pseudo elements, while box-shadow ignores them.

.addition {
    width: 100px;
    height: 100px;
    background-color: #ffcc66;
    margin: 10px 60px;
    position: relative;
    display: inline-block;
}

.addition:before {
    width: 50px;
    height: 50px;
    background-color: #ff8833;
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    margin-left: -40px;
    transform: rotate(45deg);
    margin-top: -10px;
}

.addition:after {
    width: 60px;
    height: 60px;
    background-color: #ff8833;
    margin: 10px;
    content: '';
    display: block;
    transform: rotate(20deg);
    transform: skew(20deg, 20deg);
    top: 5px;
    right: -40px;
    position: absolute;
}

A small block within a block

The drop-shadow's shadow can reflect the shape of all the elements in the block, while the box-shadow's shadow directly reflects the rectangular shape of the block.

.square {
    width: 50px;
    height: 50px;
    display: inline-block;
    background-color: #ffcc66;
    margin: 20px;
}
.circle {
    width: 50px;
    height: 50px;
    display: inline-block;
    border-radius: 50%;
    background-color: #ff8833;
    margin: 20px;
}
<div class="demo-wrap">
    <div class="drop-shadow">
        <span class="square"></span>
        <span class="circle"></span>
        <p>drop-shadow</p>
    </div>
    <div class="box-shadow">
        <span class="square"></span>
        <span class="circle"></span>
        <p>box-shadow</p>
    </div>
</div>

drop-shadow is different from box-shadow

Drop-shadow has no inset shadow or spread.For the supporting part, IE does not currently support drop-shadow attributes; box-shadow is already universally supported in all browsers.

Tags: Web Development IE

Posted on Sat, 24 Aug 2019 18:14:12 -0700 by gordsmash