CSS进阶（三）视觉效果
文章目录
一、单侧投影
box-shadow语法
box-shadow: inset x-offset y-offset blur-radius spread-radius color;
box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;
用法解释：
box-shadow：2px 3px 4px rgba(0,0,0,.5);
投影的绘制过程：
- 以该元素相同的尺寸和位置，画一个rgba(0,0,0,.5)的矩形
- 将其向右移动2px，向下移动3px
- 使用高斯模糊算法进行4px的模糊处理
- 模糊后的矩形与原始元素的交集部分会被切除掉，而不是说元素叠在模糊层的上面，如果给元素设置半透明的背景，下层不会看到任何阴影。
绘制单侧阴影：
box-shadow：0 5px 4px -4px black;
注意：
- 第四个参数是用来缩小或者扩大投影的尺寸，若我们应用一个负的扩展半径，而它的值刚好等于模糊半径，那投影尺寸就会与投影所属元素的尺寸一致，除非用偏移移动他，否则我们将完全看不见任何投影。
二、邻边投影
把black、6px的阴影设置在右侧和底部
box-shadow：3px 3px 6px -3px black;
- 扩展半径不应该设置为模糊半径的现泛指，而是这个相反值的一半
- 水平和垂直方向的偏移量需要大于或者等于模糊半径的一半。
三、双侧投影
如左边和右边
解决方案：用两块投影（每边各一块）
box-shadow: 5px 0 5px -5px black,
-5px 0 5px -5px black;
四、不规则投影
解决方案：滤镜效果规范（http://e3.org/TR/filter-effects）引入了filter的属性，滤镜效果：**blur（）、grayscale（）、drop-shadow（）**等。可以同时使用多个滤镜。
1、drop-shadow用法：
drop-shadow可接受的参数基本与box-shadow相同，但不包括扩展半径、inset关键字，也不支持逗号分割的多层投影语法
box-shadow：2px 3px 4px rgba(0,0,0,.5);
用drop-shadow：
filter:drop-shadow(2px 3px 4px rgba(0,0,0,.5));
注意：
- 任何非透明的部分都会被一视同仁的打上阴影，包括文本。text-shadow和drop-shadow不是一码事，text-shadow也会从drop-shadow那里获得一层阴影。
五、染色效果
1、基于滤镜的方案
sepia（）：给图片增加一种降饱和度的橙黄色染色效果，色相值倍收敛到35~40saturate（）：给每个像素提升饱和度hue-rotate（）：把色相以指定的度数进行偏移
2、基于混合模式的方案
当两个元素叠加时，“混合模式”控制了上层元素的颜色与下层颜色进行混合的方式。实现染色效果时，需要的混合模式是：luminosity，这种混合模式会保留上层元素HSL亮度信息，并从它的下层吸取色相和饱和度信息。
background-blend-mode：为每层背景单独指定混合模式
mix-blend-mode：为整个元素设置混合模式
处理图片的方法：
- 第一种：把图片包裹在容器中，并把容器的背景色设置为想要的主调色
- 第二种：不用图片元素，而是用div的第一层背景设置为要染色的图片，第二层背景设置为想要的主调色
六、毛玻璃效果
<main>
<blockquote>
"The only way to get rid of a temptation is hhh nnnn jjj jjj adddd adajifjp adia fna asfni wjdfipanf awfnin"
<footer>-
<cite>
Oscar Wilde
The Picture of Dorian Gray
</cite>
</footer>
</blockquote>
</main>
body {
width: 1217px;
height: 550px;
display: flex;
justify-content: center;
align-items: center;
}
body ,main::before{
background: url("n4.jpg") 0 / cover fixed;
}
main {
width: 500px;
height: 300px;
position: relative;
background: hsla(0, 0%, 100%, .3);
overflow: hidden;
}
main::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
filter: blur(20px);
z-index: -1;
margin: -30px;
}
七、折角效果
7.1 45°折角的解决方案
<div>xixixi</div>
div {
width: 300px;
height: 200px;
line-height: 200px;
text-align: center;
background: #58a; /*回退模式*/
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.42em,#58a 0);
}
第二层渐变的折角尺寸是写在色标中的，因此它是沿着轴进行度量的。而background-size中的长度是背景贴片的**宽度和高度，是在水平和垂直方向上进行度量的。**所以需要进行调整。
7.2 其他角度的解决方案
div {
position: relative;
width: 300px;
height: 200px;
line-height: 200px;
text-align: center;
background: #58a; /*回退模式*/
background:
linear-gradient(-150deg,transparent 1.5em,#58a 0);
border-radius: .5em;
}
div::before {
content: '';
position: absolute;
top: 0;
right: 0;
background: linear-gradient(to left bottom, transparent 50%,rgba(0,0,0,.2) 0,rgba(0,0,0,.4)) 100% 0 no-repeat; //从右上到左下
width: 1.73em;
height: 3em;
transform-origin: bottom right; //右下角成为旋转中心
transform: translateY(-1.3em) rotate(-30deg);
border-bottom-left-radius: inherit;
box-shadow: -.2em .2em .3em -.1em rgba(0,0,0,.15);
}
使用预处理器：
@mixin folded-corner($background,$size,$angle:30deg){
position: relative;
background: $background; /*回退模式*/
background:
linear-gradient($angle-180deg,transparent $size,$background 0);
border-radius: .5em;
$x:$size / sin($angle);
$y:$size / cos($angle);
&::::before {
content: '';
position: absolute;
top: 0;
right: 0;
background: linear-gradient(to left bottom, transparent 50%,rgba(0,0,0,.2) 0,rgba(0,0,0,.4)) 100% 0 no-repeat; //从右上到左下
width: $y;
height: $x;
transform-origin: bottom right; //右下角成为旋转中心
transform: translateY($y - $x) rotate(2*$angle-90deg);
border-bottom-left-radius: inherit;
box-shadow: -.2em .2em .3em -.1em rgba(0,0,0,.15);
}
}
/*调用时*/
.note {
@include folded-corner(#58a,2em,40deg)
}
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/150441.html
