角落的颜色边框分别

Question

有没有办法在 CSS 中为 边框角 着色？

即：border-top-left-corner-color: red

如果不能用纯 CSS 做，能不能用一些 JS/jQuery 技巧来做？

Answer 1

您可以使用 4 个伪元素分别为每个边框角上色，并分别设置每个角的边框颜色、宽度和样式：

DEMO

.outer{
    width:500px;
    height:500px;
    background:gold;
    position:relative;
}
div:before, div:after{
    content:'';
    position:absolute;
    height:10%;
    width:10%;
}
.outer:after{
    right:0;
    border-right: 3px solid red;
    border-top: 3px solid red;
}
.outer:before{
    border-left: 3px solid green;
    border-top: 3px solid green;
}
.inner:before{
    bottom:0;
    border-left: 3px solid black;
    border-bottom: 3px solid black;
}
.inner:after{
    bottom:0; right:0;
    border-right: 3px solid blue;
    border-bottom: 3px solid blue;
}

<div class="outer">
    <div class="inner"></div>
</div>

Answer 2

有点晚了..

这是我的解决方案

.test {
    width: 200px;
    height: 100px;
    border: 10px solid transparent;
    background-image: linear-gradient(0deg, white 0%, white 100%),
        linear-gradient(0deg, green 0%, green 100%),
        linear-gradient(0deg, red 0%, red 100%),
        linear-gradient(0deg, yellow 0%, yellow 100%),
        linear-gradient(0deg, blue 0%, blue 100%);
    background-origin: padding-box, border-box, border-box, border-box, border-box;
    background-repeat: no-repeat;
    background-size: 100% 100%, 50% 50%, 50% 50%, 50% 50%, 50% 50%;
    background-position: top left, top left, top right, bottom left, bottom right;
}

<div class="test"></div>

颜色是通过设置为边框框的 4 个背景来实现的。然后它们被设置为 padding-box 的白色背景所掩盖。

请注意，边框的粗细仍由border 属性设置。 （但边框本身是透明的）

另一种方法，使用伪元素来掩盖内部部分

.test {
    width: 200px;
    height: 100px;
    border: 10px solid transparent;
    background-image: linear-gradient(0deg, green 0%, green 100%),
        linear-gradient(0deg, red 0%, red 100%),
        linear-gradient(0deg, yellow 0%, yellow 100%),
        linear-gradient(0deg, blue 0%, blue 100%);
    background-origin: border-box, border-box, border-box, border-box;
    background-repeat: no-repeat;
    background-size: 50% 50%, 50% 50%, 50% 50%, 50% 50%;
    background-position: top left, top right, bottom left, bottom right;
    border-radius: 40px;
  position: relative;
}

.test:after {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  background-color: white;
  border-radius: 30px;
}

<div class="test"></div>

Answer 3

我必须做一些类似想要的结果的事情（我只是想让 正方形 角被着色）。

所以我做了这个：

div#jazzyDIV {
 --borderWidth: 5px;
 background-repeat: no-repeat;
 background-origin: padding-box, border-box, border-box, border-box, border-box;
 background-image: linear-gradient(0deg, transparent 0%, transparent 100%), linear-gradient(0deg, green 0%, green 100%), linear-gradient(0deg, red 0%, red 100%), linear-gradient(0deg, yellow 0%, yellow 100%), linear-gradient(0deg, blue 0%, blue 100%);
 width: 40px;
 height: 40px;
 border-width: var(--borderWidth);
 border-style: solid;
 border-color: transparent;
 background-size: cover, var(--borderWidth) var(--borderWidth), var(--borderWidth) var(--borderWidth), var(--borderWidth) var(--borderWidth), var(--borderWidth) var(--borderWidth);
 background-position: center,top left, top right, bottom right, bottom left;
}

<div id="jazzyDIV"></div>

如果你想扩大彩色角落，你可以在每对“背景大小”的值（宽度和高度）上使用“calc(...)”（跳过第一个，因为它用于内部背景)

如果你想要一张背景图片，你可以将 background-image 的第一个参数替换为“url('your_image.png')”。它将在填充框中呈现

另一个转折点：

div#jazzyDIV {
 --borderWidth: 5px;
 background-repeat: no-repeat;
 background-origin: padding-box, border-box, border-box, border-box, border-box, border-box, border-box, border-box, border-box;
 background-image: linear-gradient(0deg, transparent 0%, transparent 100%), linear-gradient(0deg, green 0%, green 100%), linear-gradient(0deg, red 0%, red 100%), linear-gradient(0deg, yellow 0%, yellow 100%), linear-gradient(0deg, blue 0%, blue 100%), linear-gradient(0deg, orange 0%, orange 100%), linear-gradient(0deg, pink 0%, pink 100%), linear-gradient(0deg, magenta 0%, magenta 100%), linear-gradient(0deg, cyan 0%, cyan 100%);
 width: 90px;
 height: 40px;
 border-width: var(--borderWidth);
 border-style: solid;
 border-color: transparent;
 background-size: cover, var(
 --borderWidth) var(--borderWidth), calc(100% - var(--borderWidth) * 2) var(--borderWidth), var(--borderWidth) var(--borderWidth), var(--borderWidth) calc(100% - var(--borderWidth) * 2), var(--borderWidth) var(--borderWidth), calc(100% - var(--borderWidth) * 2) var(--borderWidth), var(--borderWidth) var(--borderWidth), var(--borderWidth) calc(100% - var(--borderWidth) * 2);
 background-position: center,top left, top, top right, right, bottom right, bottom, bottom left, left;
}

<div id="jazzyDIV"></div>

两者都基于@vals 给出的解决方案。