html – Starburst效果在CSS3中可行吗？

概述有没有人知道如果以下图像可以在CSS中制作？光线和暗线可以而且应该是相等的宽度和边缘渐渐变暗，使整体背景是深色(在这种情况下是深蓝色)。 任何帮助都非常感激。我的谷歌技能没有提供任何这种效果的帮助，只有“starburst贴纸/徽章的东西”被发现。 不，不幸的是，css3生成的图像规格不包括锥形/角度梯度(尽管它们可能在下一个修订版本中出现)，这将是使用仅使用CSS的最有可能的方法。但是，您可以使 有没有人知道如果以下图像可以在CSS中制作？光线和暗线可以而且应该是相等的宽度和边缘渐渐变暗，使整体背景是深色(在这种情况下是深蓝色)。

任何帮助都非常感激。我的谷歌技能没有提供任何这种效果的帮助，只有“@R_656_4045@贴纸/徽章的东西”被发现。

解决方法 不，不幸的是，CSS3生成的图像规格不包括锥形/角度梯度(尽管它们可能在下一个修订版本中出现)，这将是使用仅使用CSS的最有可能的方法。但是，您可以使用CSS svg来执行此 *** 作。我实际上有一个这样的svg文件坐在我曾经做过的一个实验中：

<?xml version="1.0" enCoding="utf-8"?><!DOCTYPE svg PUBliC "-//W3C//DTD SVG 1.1//EN"   "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg wIDth="512px" height="512px" vIEwBox="-256 -256 512 512"  xmlns="http://www.w3.org/2000/svg" version="1.1"   xmlns:xlink="http://www.w3.org/1999/xlink"><Title>Burst</Title><defs>  <g ID="burst">    <g ID="quad">      <path ID="ray" d="M0,0 -69,-500 69,-500 z" />      <use xlink:href="#ray" transform="rotate(30)"/>      <use xlink:href="#ray" transform="rotate(60)"/>      <use xlink:href="#ray" transform="rotate(90)"/>    </g>    <use xlink:href="#quad" transform="rotate(120)"/>    <use xlink:href="#quad" transform="rotate(240)"/>  </g>  <radialGradIEnt ID="grad" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">    <stop offset="0%" stop-color="white" stop-opacity="0.65"/>    <stop offset="100%" stop-color="black" stop-opacity="0.65"/>  </radialGradIEnt>  <!-- a circle mask -->  <mask ID="m"><circle r="256" fill="white"/></mask></defs><!-- added a mask and scaled it to a different aspect ratio below. scale(x,y) --><g mask="url(#m)" transform="scale(1,0.75)">   <use xlink:href="#burst" fill="lightslateblue"/>  <use xlink:href="#burst" fill="darkslateblue" transform="rotate(15)"/>  <circle r="360px" fill="url(#grad)" /></g></svg>

将其设置为您的背景图像，并设置CSS的background-size：cover。而已。 Here’s a fiddle在数据网址中使用此图像。

总结

以上是内存溢出为你收集整理的html – Starburst效果在CSS3中可行吗？全部内容，希望文章能够帮你解决html – Starburst效果在CSS3中可行吗？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。