html – 使用CSS合并节标记的边框颜色

我创建了一个稍微旋转的中心部分边框.另外,我给这个部分的每一面都有不同的颜色.这是我的基本代码：

body{
    background-color: #594451;
    color: #fff;
}

.Boxed{
    position: absolute;
    margin:auto;
    /* border: 3pc solid rgba(255,255,1); */
    border-left: solid rgba(127,203,170,1) 3pc;
    border-right: solid rgba(186,179,173,1) 3pc;
    border-bottom: solid rgba(0,171,238,1) 3pc;
    border-top: solid rgba(229,99,57,1) 3pc;
    height: 20pc;
    width: 20pc;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    
}

<h1>Welcome to Rahul's Lab</h1>
    <section class="Boxed">
        <!-- <p>This will contain the Box properly</p> -->
    </section>

我可以实现相互重叠的边界吗？是否可以通过使用CSS或我是否必须为此创建单独的部分/ div？
HTML & CSS Design and build websites

参考：封面图片HTML& CSS设计和构建Jon Duckett的网站.

解决方法

边界重叠是不可能的……

…但是,这里只是一个使用CSS创建效果的解决方案,使用：

>多个线性渐变来创建背景
> background-blend-mode混合角落中的颜色

⋅
⋅
⋅

更新的代码段：
使用背景速记语法,就像Temani在这里做的那样https://stackoverflow.com/a/50526694/5061000

.Boxed {
  position: absolute;
  margin: 5pc auto; /* Modified to better fit in tiny snippet */
  --border-pc: 10%; /* You could even use a CSS variable to store the width if you want to be able to modify it easily. Or the colors. Or both. */
  background:
    /* Shorthand Syntax used below: image position/sizeX sizeY */
    linear-gradient(rgba(229,099,057,1),rgba(229,1)) top   /100% var(--border-pc),/* Orange with CSS var */
    linear-gradient(rgba(000,rgba(000,1)) bottom/100% var(--border-pc),/* Blue */
    linear-gradient(rgba(127,rgba(127,1)) left  /var(--border-pc) 100%,/* Green */
    linear-gradient(rgba(186,rgba(186,1)) right /var(--border-pc) 100%; /* Gray */
  background-blend-mode: multiply;
  background-repeat: no-repeat;
  height: 20pc;
  width: 20pc;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: rotate(45deg);
}

<section class="Boxed">
  <!-- <p>This will contain the Box properly</p> -->
</section>

⋅
⋅
⋅

旧样式片段：
是的,它有效,但我更喜欢第一个！

.Boxed {
  position: absolute;
  margin: 5pc auto; /* Modified to better fit in tiny snippet */
  --border-pc: 10%; /* You could even use a CSS variable to store the width if you want to be able to modify it easily. Or the colors. Or both. */
  /* I tried to indent it to better see the code: */
  background-image:
    linear-gradient(to top,/* Blue */
      rgba(0,1) 0%,rgba(0,1) var(--border-pc),/* example use of the CSS var */
      transparent var(--border-pc) ),linear-gradient(to right,/* Green */
      rgba(127,1) 10%,transparent 10% ),linear-gradient(to bottom,/* Orange */
      rgba(229,linear-gradient(to left,/* Gray */
      rgba(186,transparent 10% );
  background-blend-mode: multiply; /* Added to mix the colors */
  height: 20pc;
  width: 20pc;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: rotate(45deg);
}

<section class="Boxed">
  <!-- <p>This will contain the Box properly</p> -->
</section>

(请注意,如果您不使用背景混合模式,您可以通过播放订单来选择哪些渐变与其他渐变重叠！)

希望能帮助到你.

html – 使用CSS合并节标记的边框颜色

解决方法

猜你在找的HTML相关文章