您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

使用CSS3的SVG投影

使用CSS3的SVG投影

这是一个使用’filter’属性将dropshadow应用于某些svg的示例。如果要控制阴影的不透明度,请查看此示例。该slope属性控制赋予阴影的透明度。

示例中的相关位:

<filter id="dropshadow" height="130%">
  <feGaussianBlur in="SourceAlpha" stdDeviation="3"/> <!-- stdDeviation is how much to blur -->
  <feOffset dx="2" dy="2" result="offsetblur"/> <!-- how much to offset -->
  <feComponentTransfer>
    <feFuncA type="linear" slope="0.5"/> <!-- slope is the opacity of the shadow -->
  </feComponentTransfer>
  <feMerge> 
    <feMergeNode/> <!-- this contains the offset blurred image -->
    <feMergeNode in="SourceGraphic"/> <!-- this contains the element that the filter is applied to -->
  </feMerge>
</filter>
<circle r="10" style="filter:url(#dropshadow)"/>

@R_31_2419@-shadow被定义为可以在CSS@R_31_2419@上工作(阅读:矩形),而svg比矩形更具表现力。阅读SVG入门),进一步了解SVG过滤器的功能

CSS 2022/1/1 18:21:25 有300人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶