前端练习十一：视觉效果示例

1.单侧投影

box-shadow 的第三个参数为模糊半径，该值并不会影响到投影的大小，它是从投影的边缘开始计算，像内开始模糊。

box-shaodw 的第四个参数为拓展半径，该值设置为正值时，投影会在四个方向上加上该正值。如果该值为负值，则投影会在四个方向上减去该负值的绝对值。

box-shadow 可以指定 inset 关键字，将投影设置为内投影。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            .box {
                width: 240px;
                height: 160px;
                margin: 24px auto;
                background-color: #f07810;
                box-shadow: 0 5px 4px -4px #000;
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
    </body>
</html>

 

2.不规则投影

当我们为一些伪元素或者半透明的元素添加了 box-shadow 就会遇到以上问题，这类情况包括:

1. 半透明图像、背景图像、或者 border-image。

2. 元素设置了点状、虚线或者半透明的边框，但没有背景。

3. 对话气泡的小尾巴。切角效果。折角效果。利用 clip-path 生成的菱形图片。

解决以上问题的办法是使用 filter 的 drop-shadow 属性。

 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            .container {
                display: flex;
                flex-flow: row nowrap;
                justify-content: center;
                padding-top: 32px;
            }
            .shape {
                width: 120px;
                height: 120px;
                line-height: 120px;
                text-align: center;
                background-color: #ff5959;
                box-sizing: border-box;
            }
            .shape:not(:last-child) {
                margin-right: 36px;
            }
            .shape-1 {
                position: relative;
                border-radius: 8px;
                box-shadow: 0 0 4px 1px rgba(0,0,0,0.5)
            }
            .shape-1::after {
                content: "";
                position: absolute;
                top: 50%;
                left: 100%;

                width: 0;
                height: 0;
                border: 12px solid #ff5959;
                border-color: transparent transparent transparent #ff5959;

                transform: translateY(-50%);
            }
            .shape-2 {
                border: 8px dashed #ff5959;
                background-color: #FFF;
                box-shadow: 0 0 4px 1px rgba(0,0,0,.5);
            }
            .shape-3 {
                background: 
                    linear-gradient(135deg, transparent 16px, #ff5959 0) left top,
                    linear-gradient(-135deg, transparent 16px, #ff5959 0) right top,
                    linear-gradient(45deg, transparent 16px, #ff5959 0) left bottom,
                    linear-gradient(-45deg, transparent 16px, #ff5959 0) right bottom;
                background-size: 50% 50%;
                background-repeat: no-repeat;
                box-shadow: 0 0 4px 1px rgba(0,0,0,.5);
            }    
        </style>
    </head>
    <body>
        <div class="container">
            <div class="shape shape-1">Hello World</div>
            <div class="shape shape-2">Hello World</div>
            <div class="shape shape-3">Hello World</div>
        </div>
    </body>
</html>

 

 示例2：

drop-shadow 和 box-shadow 相比，它没有第四个参数拓展半径，也不支持以逗号分隔的多层设置语法。

drop-shadow 会给任何非透明的部分打上投影，包括文本（如果背景是透明的）。

 

 https://hwaphon.github.io/WebProject/CSSSecrets/index.html#/

 

posted on 2018-12-29 18:05  myworldworld  阅读(152)  评论(0)    收藏  举报

导航