如何用CSS为圆角边框的四个25%分段设置不同颜色？

Great question! Achieving a circular border split into four colored quarters (red, blue, green, pink) is totally doable with a couple of clean CSS approaches. Let's break down two reliable methods:

Method 1: Pseudo-Elements & Child Elements (Great for Older Browser Compatibility) #

This approach uses small, positioned elements to build each colored quarter of the circle. We'll use the main div as a clipping container to keep everything neat:

<div class="colorful-circle">
  <div class="quarter-1"></div>
  <div class="quarter-2"></div>
</div>

.colorful-circle {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 50%; /* Shorthand for a perfect circle since width/height are equal */
  overflow: hidden; /* Clip any overflowing parts of the quarter elements */
}

/* Style all quarter elements consistently */
.colorful-circle::before,
.colorful-circle::after,
.colorful-circle .quarter-1,
.colorful-circle .quarter-2 {
  content: '';
  position: absolute;
  width: 50%;
  height: 50%;
  box-sizing: border-box;
}

/* Top-left red quarter */
.colorful-circle::before {
  top: 0;
  left: 0;
  border-top: 1px solid red;
  border-left: 1px solid red;
  border-top-left-radius: 100%;
}

/* Top-right blue quarter */
.colorful-circle::after {
  top: 0;
  right: 0;
  border-top: 1px solid blue;
  border-right: 1px solid blue;
  border-top-right-radius: 100%;
}

/* Bottom-right green quarter */
.colorful-circle .quarter-1 {
  bottom: 0;
  right: 0;
  border-bottom: 1px solid green;
  border-right: 1px solid green;
  border-bottom-right-radius: 100%;
}

/* Bottom-left pink quarter */
.colorful-circle .quarter-2 {
  bottom: 0;
  left: 0;
  border-bottom: 1px solid pink;
  border-left: 1px solid pink;
  border-bottom-left-radius: 100%;
}

How This Works: #

Each quarter element only has borders on the two sides that form the outer edge of the circle. We use border-radius on each corner to match the circle curve, and the parent's overflow: hidden hides any parts of the elements that extend beyond the main circle.

Method 2: Conic Gradient + Mask (Modern, Clean & No Extra DOM Elements) #

If you're targeting modern browsers, this method is far more concise. We'll use a conic gradient to create the four colored sections, then a radial gradient mask to "cut out" the middle, leaving only a 1px border:

<div class="colorful-circle"></div>

.colorful-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  /* Create a conic gradient with 4 equal color segments (90 degrees each) */
  background: conic-gradient(
    red 0deg 90deg,
    blue 90deg 180deg,
    green 180deg 270deg,
    pink 270deg 360deg
  );
  /* Use a radial gradient mask to show only the 1px outer border */
  mask: radial-gradient(
    circle,
    transparent calc(50% - 1px),
    black calc(50% - 1px)
  );
  /* For Safari compatibility, add the -webkit- prefix */
  -webkit-mask: radial-gradient(
    circle,
    transparent calc(50% - 1px),
    black calc(50% - 1px)
  );
}

How This Works: #

• The conic-gradient paints the entire circle with four distinct color blocks, each taking up a quarter of the circle (90 degrees).
• The mask (and -webkit-mask for Safari) uses a radial gradient to make the inner part of the circle transparent, while keeping a 1px thick outer ring visible. This effectively turns the full colored circle into a border.

Quick Notes: #

• Method 1 works on older browsers that don't support CSS gradients or masks.
• Method 2 is cleaner and requires no extra HTML elements, but needs modern browser support (most major browsers released after 2020 handle this well).

内容的提问来源于stack exchange，提问作者Mohammed Sabir