用d3写出div的css模糊与透明、阴影的效果

这几天写了一个关于d3小程序，所以分享一下。

是div和css做的

在这个图形中，最上面的使用了div中左右颜色渐变和上下透明度的使用。background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 1%, rgba(0, 0, 0, 0.6) 46%, rgba(0, 0, 0, 0.2) 98%, rgba(255, 255, 255, 0.1) 99%),linear-gradient(to right,red,#5A4242);  这段代码是上面所做成的效果。下面用d3实现相同效果。

在d3中首先上面使用的是path绘制，由于在d3中无法同时使用两种渐变效果以及加上四周的阴影效果。所以要想达到可以考虑多个叠加来完成。使用两个path放在同一个位置，然后分别设置垂直和水平的颜色与透明度见面。至于周围的阴影效果，之前看了很多都是显示的在右下角，所有可以通过svg中的模糊，在最后面一层加入一个path，这样在设置模糊，从而整体看出来就有了一样的效果。

<linearGradient id="myLinearGradient1"

                x1="0%" y1="0%"

                x2="0%" y2="100%"

                >

  <stop offset="1%"  stop-color="#FFFFFF" stop-opacity="0.1"/>

  <stop offset="46%"  stop-color="#000000" stop-opacity="0.6"/>

  <stop offset="98%"  stop-color="#000000" stop-opacity="0.2"/>

  <stop offset="99%" stop-color="#FFFFFF" stop-opacity="0.1"/>

</linearGradient>

上面这个对应于css中的linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 1%, rgba(0, 0, 0, 0.6) 46%, rgba(0, 0, 0, 0.2) 98%, rgba(255, 255, 255, 0.1) 99%)

这个<linearGradient id="aa"

                    x1="0%" y1="0%"

                    x2="100%" y2="0%"

                    >

      <stop offset="1%"  stop-color="#CC0000" stop-opacity="1"/>

      <stop offset="99%" stop-color="#5A4242" stop-opacity="1"/>

    </linearGradient>

对应于linear-gradient(to right,red,#5A4242)。

这几段代码中的百分数代表所对应的图形的位置。