有没有办法将 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;
}