我想知道如何将阴影应用于 svg 图像(例如三 Angular 形)。我找到了像 polyfill 这样的解决方案,但它并没有按照我想要的方式工作。我做了一个JSFiddle给你看我想给的影子。
我的 HTML:
<div class="spikes"></div>
我的 CSS:
body {
background-color: #ccc;
}
.spikes {
margin-top: 20px;
width: 250px;
transform: rotate(180deg);
background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGFhZ18xIiBkYXRhLW5hbWU9IkxhYWcgMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMjUgMjUiPg0KICA8ZGVmcz4NCiAgICA8c3R5bGU+DQogIC AgICAuY2xzLTEgew0KICAgICAgICBmaWxsOiAjZmZmZmZmOw0KICAgICAgfQ0KICAgIDwvc3R5bGU+DQog IDwvZGVmcz4NCiAgPHRpdGxlPmthcnRlbDwvdGl0bGU+DQogIDxwb2x5Z29uIGNsYXNzPSJjbHMtMSIgcG9pbnRzPSIyNSAxOS43IDI1IDI1IDAgMjUgMCAyMC4yNSAxMi43NyA3LjQ3IDI1IDE5LjciLz4NCjwvc3ZnPg0K");
height: 20px;
position: absolute;
max-width: 1000px;
transition: 0.75s;
-webkit-box-shadow: -2px -2px 5px 0px rgba(97,97,97,1);
-moz-box-shadow: -2px -2px 5px 0px rgba(97,97,97,1);
box-shadow: -2px -2px 5px 0px rgba(97,97,97,1);
}
最佳答案
您不能将阴影应用于 background-image
,因为它是 CSS 属性而不是元素。
您可以做的是将filter:drop-shadow
应用于元素。
如果 SVG 具有透明度/alpha,它将看起来像这样:
body {
background-color: #ccc;
}
.spikes {
margin-top: 20px;
width: 250px;
transform: rotate(180deg);
background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGFhZ18xIiBkYXRhLW5hbWU9IkxhYWcgMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMjUgMjUiPg0KICA8ZGVmcz4NCiAgICA8c3R5bGU+DQogICAgICAuY2xzLTEgew0KICAgICAgICBmaWxsOiAjZmZmZmZmOw0KICAgICAgfQ0KICAgIDwvc3R5bGU+DQogIDwvZGVmcz4NCiAgPHRpdGxlPmthcnRlbDwvdGl0bGU+DQogIDxwb2x5Z29uIGNsYXNzPSJjbHMtMSIgcG9pbnRzPSIyNSAxOS43IDI1IDI1IDAgMjUgMCAyMC4yNSAxMi43NyA3LjQ3IDI1IDE5LjciLz4NCjwvc3ZnPg0K");
height: 20px;
position: absolute;
max-width: 1000px;
transition: 0.75s;
filter: drop-shadow(-1px -1px 1px black);
}
<div class="spikes"></div>
关于javascript - 使用 CSS 将阴影应用于三 Angular 形 SVG,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41167250/