css 实现div背景上下虚化效果

小菜花29

已于 2022-01-21 11:29:50 修改

阅读量3.7k

点赞数 1

文章标签： css 前端 css3

于 2022-01-21 10:44:01 首次发布

本文链接：https://blog.csdn.net/jinse29/article/details/122615653

版权

1. box-shadow属性

2.liner-gradient()函数

1. box-shadow属性

大部分遇到的场景，边框虚化的话，用box-shadow属性可以轻松解决，例如下面这种效果

一行简单的代码即可搞定

box-shadow属性设置参数如下：

但是如果我只要上下边或者左右需要的效果，使用box-shadow属性有很大的局限了，例如效果图如下

（为了演示效果，用了比较显眼的颜色。。。。）

2.liner-gradient()函数

可能box-shadow使用起来达不到这么理想的效果，我们可以换一个方式，设置div的背景图，利用线性渐变属性实现。（写到这感觉更像是介绍liner-gradient()函数了~）

代码截图如下

background-image: linear-gradient(to bottom, 
                                  rgba(171,0,0, 0.7) 0%, 
                                  rgba(171,0,0, 0.3) 15%, 
                                  rgba(13, 36, 67, 0) 50%, 
                                  rgba(171,0,0, 0.3) 85%, 
                                  rgba(171,0,0, 0.7) 100%);

可以根据我们的实际效果图，去设定，先看下linear-gradient()的参数