Question

我想将以下box-shadow应用于以下svg元素。

CSS：

box-shadow:0 10px 50px 20px rgba(0, 0, 0, 0.3);

SVG：

<svg width="50" height="60" viewBox="0 0 50 60" xmlns="http://www.w3.org/2000/svg">
            <g fill="none" fill-rule="evenodd"><path d="M46 38.57c2.53-3.908 4-8.567 4-13.57C50 11.193 38.807 0 25 0S0 11.193 0 25s11.193 25 25 25c5.003 0 9.662-1.47 13.57-4h4.427C44.657 46 46 44.655 46 42.997V38.57z" fill="#FF5656"/><path d="M25.368 14.797c-1.304.083-2.632.45-3.785 1.046-.507.263-1.003.57-1.395.868-.096.075-.22.164-.274.203-.278.188-.57.522-.714.81-.19.38-.28.85-.234 1.252.098.855.685 1.577 1.504 1.846.31.105.776.135 1.075.073.403-.082.725-.242 1.104-.54.6-.478 1.38-.837 2.156-.994 1.137-.23 2.282-.08 3.33.43 1.52.743 2.565 2.152 2.853 3.843.054.32.078 1.046.042 1.368-.24 2.217-1.807 4.016-3.95 4.542-.433.106-.686.136-1.152.136-.376 0-2.297-.053-2.926-.083-.128-.004-.424-.015-.658-.02l-.646-.022c-.123-.004-.448-.015-.72-.02-.275-.01-.553-.018-.616-.023-.202-.012-.74.03-1.052.085-.795.14-1.546.444-2.235.906-.942.63-1.67 1.466-2.176 2.49-.202.416-.295.662-.42 1.104-.05.176-3.096 17.62-3.11 17.744-.04.367-.014 1.114.052 1.485.38 2.154 1.99 3.892 4.088 4.412.206.05 5.384.967 8.406 1.487.848.147 1.45.16 2.1.045 2.02-.357 3.66-1.77 4.3-3.7.116-.342 5.154-29.16 5.198-29.41.104-.62.15-1.253.132-1.91-.04-1.442-.386-2.83-1.027-4.115-.177-.353-.346-.64-.613-1.04-.42-.63-.75-1.027-1.32-1.583-1.147-1.122-2.485-1.902-4.02-2.346-1.087-.312-2.207-.437-3.3-.367z" fill-rule="nonzero" fill="#FFF"/></g></svg>

我该怎么做？

非常感谢！马腾

Answer 1

您忘记了选择器svg

svg{
box-shadow:0 10px 50px 20px rgba(0, 0, 0, 0.3);
}

下面的代码段

svg{
-moz-box-shadow:0 10px 50px 20px rgba(0, 0, 0, 0.3);
-webkit-box-shadow:0 10px 50px 20px rgba(0, 0, 0, 0.3);
-o-box-shadow:0 10px 50px 20px rgba(0, 0, 0, 0.3);
box-shadow:0 10px 50px 20px rgba(0, 0, 0, 0.3);
}

<svg width="50" height="60" viewBox="0 0 50 60" xmlns="http://www.w3.org/2000/svg">
            <g fill="none" fill-rule="evenodd"><path d="M46 38.57c2.53-3.908 4-8.567 4-13.57C50 11.193 38.807 0 25 0S0 11.193 0 25s11.193 25 25 25c5.003 0 9.662-1.47 13.57-4h4.427C44.657 46 46 44.655 46 42.997V38.57z" fill="#FF5656"/><path d="M25.368 14.797c-1.304.083-2.632.45-3.785 1.046-.507.263-1.003.57-1.395.868-.096.075-.22.164-.274.203-.278.188-.57.522-.714.81-.19.38-.28.85-.234 1.252.098.855.685 1.577 1.504 1.846.31.105.776.135 1.075.073.403-.082.725-.242 1.104-.54.6-.478 1.38-.837 2.156-.994 1.137-.23 2.282-.08 3.33.43 1.52.743 2.565 2.152 2.853 3.843.054.32.078 1.046.042 1.368-.24 2.217-1.807 4.016-3.95 4.542-.433.106-.686.136-1.152.136-.376 0-2.297-.053-2.926-.083-.128-.004-.424-.015-.658-.02l-.646-.022c-.123-.004-.448-.015-.72-.02-.275-.01-.553-.018-.616-.023-.202-.012-.74.03-1.052.085-.795.14-1.546.444-2.235.906-.942.63-1.67 1.466-2.176 2.49-.202.416-.295.662-.42 1.104-.05.176-3.096 17.62-3.11 17.744-.04.367-.014 1.114.052 1.485.38 2.154 1.99 3.892 4.088 4.412.206.05 5.384.967 8.406 1.487.848.147 1.45.16 2.1.045 2.02-.357 3.66-1.77 4.3-3.7.116-.342 5.154-29.16 5.198-29.41.104-.62.15-1.253.132-1.91-.04-1.442-.386-2.83-1.027-4.115-.177-.353-.346-.64-.613-1.04-.42-.63-.75-1.027-1.32-1.583-1.147-1.122-2.485-1.902-4.02-2.346-1.087-.312-2.207-.437-3.3-.367z" fill-rule="nonzero" fill="#FFF"/></g></svg>

将drophadow应用于具有2个路径的svg元素

1 个答案: