颜色边界角落seperatly [英] Color border in corners seperatly

问题描述

有什么方法可以在CSS中为边框角色着色？

I.e。 ： border-top-left-corner-color：red

如果无法在纯CSS中完成，可以用一些JS / jQuery技巧来完成吗？

您可以为每个边框角色分别着色具有4个伪元素，并且每个角的边框颜色，宽度和样式独立设置：

DEMO

.outer {width：500px;高度：500像素;背景：黄金; position：relative;} div：before，div：after {content：'';位置：绝对的;高度：10％; width：10％;}。outer：after {right：0; border-right：3px纯红色; border-top：3px solid red;} outer：before {border-left：3px solid green; border-top：3px solid green;}。inner：before {bottom：0; border-left：3px纯黑色; border-bottom：3px solid black;}。inner：after {bottom：0;右：0; border-right：3px纯蓝色; border-bottom：3px solid blue;}

< div类= 外 > < div class =inner>< / div>< / div>

Is there any way to color a border corner in CSS?

I.e. : border-top-left-corner-color: red

If it can't be done in pure CSS, can it be done with some JS/jQuery trickery?

解决方案

You can color each border corner seperately with 4 pseudo elements and style each corner's border color, width and style seperatly :

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>

这篇关于颜色边界角落seperatly的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！