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

目录

        ​​​​​​​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()的参数

第一个值是渐变效果的方向，设置比较灵活，可以直接写to left top或者0.25turn或者180deg

详细设置可参考linear-gradient() - CSS: Cascading Style Sheets | MDN (mozilla.org) 

其实linear-gradient()函数还是很灵活的，只是我接触较少，发现它真香了

后续：小笔记写的随七八糟，做到最后发现越来越菜，任重而道远~