如何解决有没有办法将 padding 或 boxshadow 添加到 css conic-gradient 部分
我正在尝试使用 css 实现自定义饼图。
有没有我可以为每个圆锥渐变段添加一点填充或框阴影的方法?
代码
HTML
<div class="pie-chart">
</div>
CSS
.pie-chart {
background:
radial-gradient(
circle closest-side,transparent 66%,white 0
),conic-gradient(
#8C071F 90deg,#F2884B 0 180deg,#F2B705 0 270deg,#6CBAD9 0
);
position: relative;
width: 150px;
min-height: 350px;
margin: 0;
outline: px solid #ccc;
}
解决方法
border-radius、box-shadow 和一些变换可以轻松解决您的问题,无需 import sys
from lxml import etree as ET
xml_file = sys.argv[1]
tree = ET.parse(xml_file)
root = tree.getroot()
ns = {}
element_tree = ET.iterparse(xml_file,events=["start-ns"])
try:
for event,(prefix,qualified_name) in element_tree:
ET.register_namespace(prefix,qualified_name)
ns[prefix] = qualified_name
except ET.ParseError as err:
sys.exit(1)
for somecode in tree.findall('def:somecode',namespaces=ns):
somecode.text = somecode.text + "# updated with a comment"
tree.write('output.xml',xml_declaration=True,encoding="UTF-8")
conic-gradient
.pie-chart {
margin:25px;
width: 200px;
height: 200px;
display: flex;
flex-wrap: wrap;
}
.pie-chart div {
width: 50%;
height: 50%;
}
.pie-chart div:nth-child(1) {
border-top-left-radius: 200px;
background: red;
transform: translate(-5px,-5px);
box-shadow: -3px -3px 12px 2px grey;
}
.pie-chart div:nth-child(2) {
border-top-right-radius: 200px;
background: blue;
transform: translate(5px,-5px);
box-shadow: 3px -3px 12px 2px grey;
}
.pie-chart div:nth-child(3) {
border-bottom-left-radius: 200px;
background: green;
transform: translate(-5px,5px);
box-shadow: -3px 3px 12px 2px grey;
}
.pie-chart div:nth-child(4) {
border-bottom-right-radius: 200px;
background: purple;
transform: translate(5px,5px);
box-shadow: 3px 3px 12px 2px grey;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。