css3 投影效果-CSS3新特性视觉效果示例

本文介绍了Css3新特性的视觉效果，包括单边阴影、不规则投影、染色体效果、毛玻璃效果、角点效果。 具体实现如下：

1.单面阴影

1、box-shadow属性的应用css3 投影效果，格式：h-shadow v-shadow Blur spread color inset 属性值介绍 h-sahdow：水平阴影的位置，允许负值

①v-shadow：垂直阴影的位置，允许负值

②blur：模糊距离

③spread：阴影的规格，扩展距离，可以为正数

④color：阴影的颜色

⑤inset/outset：内部或外部阴影

2. 阴影的扩展距离对四个边均有效，不能单独应用于单边。

3. Box-shadow支持多组值同时生效的设置

示例代码：

.wrap{
            width: 200px;
            height: 120px;
            background: yellowgreen;
            box-shadow: 2px 0px 4px -2px black,
                        -2px 0px 4px -2px black;
        }

2、投影不规则

1.利用border-radius生成的形状，使用投影很好，但是如果加上伪元素和半透明装饰，阴影表现会很糟糕，在以下情况下会出现问题。

① 半透明图像、背景图像或边框图像

②该元素有片状、点状或半透明边框，但没有背景（或者当background-clip不是border-box时）

③ 元素内部存在用伪元素生成的小角点

④clip-path生成的形状

解决方案：使用svg的drop-shadow来实现

示例代码：

.wrap{
            width: 200px;
            height: 120px;
            border: 6px dotted yellowgreen;
            --box-shadow: 0px 0px 4px 0px black;
            -webkit-filter: drop-shadow(2px 0px 2px rgba(0,0,0,1))
        }

3. 染色体功效

1、基于滤镜实现，应用滤镜属性的相关值来调整图像的饱和度、亮度等值

2.基于min-blend-mode实现，功能：实现元素内容与背景以及下面元素的“混合”

3. 基本background-blend-mode实现，功能：实现背景色与背景图、背景图与图像的混合

三种情况的示例代码：

.wrap1{
            width: 200px;
            height: 120px;
            overflow: hidden;
        }
        .wrap1 > img{
            max-height: 100%;
            max-width: 100%;
            -webkit-filter: sepia(1) saturate(4) hue-rotate(150deg);
        }
        .wrap2{
            width: 200px;
            height: 120px;
            background: hsl(335, 100%, 50%);
            overflow: hidden;
        }
        .wrap2 > img{
            height: 100%;
            width: 100%;
            mix-blend-mode: luminosity;
        }
        .wrap3{
            width: 200px;
            height: 120px;
            background-size: cover;
            background-color: hsl(335, 100%, 50%);
            background-image: url("../img/cat.png"); 
            background-blend-mode: luminosity;
        }

4、磨砂玻璃的疗效

主要实现原理：内容伪元素背景与底层背景图相同； 和filter:blur 可以添加模糊滤镜。 注意css3 投影效果，模糊不能应用于底层背景，也不能应用于元素的背景（这会模糊元素本身并导致文本不可见），它只能用在伪元素上。

代码如下所示：

body{
    background: url("../img/cat.png") no-repeat;
    background-size: cover;
}
.wrap{
    position: relative;
    width: 500px;
    margin: 0px auto;
    padding: 10px;
    line-height: 1.5;
    background: hsla(0, 0%, 100%, .3);
    overflow: hidden;
}
.wrap::before{
    content: '';
    background: url("../img/cat.png") 0/cover fixed;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    filter: blur(20px);
    z-index: -1;
    margin: -30px;
}

代码说明： 1、body和wrap伪元素都应用相同的背景图片

2、wrap的background-attachment设置为fixed，这样背景图就不会随着滚动而移动

3、wrap伪元素设置为绝对定位，z-index级别仅低于背景

4.使用blur设置wrap伪元素的模糊规范

5、使用margin的负值来减少长度，父元素使用overflow:hidden来隐藏溢出，让模糊的背景更加真实。

5.角度疗效

实施步骤

1.首先使用线性渐变实现切角的效果 2.然后使用线性渐变生成三角形并设置其位置、宽度和高度

代码如下所示：

.wrap{
        background: linear-gradient(to left bottom, transparent 50%, rgba(0, 0, 0, .4) 0) no-repeat 100% 0/2em 2em,
        linear-gradient(-135deg, transparent 1.4em, #58a 0);
        width: 200px;
        height: 120px;
    }

注意

1. 100% 0/2em 2em定位背景元素的位置和宽度，特别是2em的宽度和高度是背景元素的正常长度。

2、第二个线性渐变中的1.4em是沿渐变轴测量的，即渐变轴到元素上边缘的距离。 在这个例子中，它是从渐变轴到右下角顶部的距离

3.to left Bottom表示从左下角开始渐变

以上就是本文的全部内容。 希望对您的学习有所帮助，也希望您多多支持脚本之家。