时间戳

首页 > 解决方案 > 使用 CSS 合并部分标签的边框颜色

html - 使用 CSS 合并部分标签的边框颜色

问题描述

我创建了一个居中稍微旋转的部分边框。另外，我给截面的每一面都赋予了不同的颜色。这是我的基本代码的样子：

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

.boxed{
    position: absolute;
    margin:auto;
    /* border: 3pc solid rgba(255, 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 设计和构建网站

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

标签： htmlcssborder

解决方案

边界重叠是不可能的……</p>

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

  • 多个linear-gradients 创建background
  • background-blend-mode混合角落的颜色

⋅ ⋅ ⋅</p>

更新片段：
使用背景速记语法，就像 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, 099, 057, 1)) top   /100% var(--border-pc), /* Orange with CSS var */
    linear-gradient(rgba(000, 171, 238, 1), rgba(000, 171, 238, 1)) bottom/100% var(--border-pc), /* Blue */
    linear-gradient(rgba(127, 203, 170, 1), rgba(127, 203, 170, 1)) left  /var(--border-pc) 100%, /* Green */
    linear-gradient(rgba(186, 179, 173, 1), rgba(186, 179, 173, 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>

⋅ ⋅ ⋅</p>

旧样式片段：
是的，它正在工作，但我更喜欢第一个！

.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, 171, 238, 1) 0%,
      rgba(0, 171, 238, 1) var(--border-pc), /* example use of the CSS var */
      transparent var(--border-pc) ),
    linear-gradient(to right, /* Green */
      rgba(127, 203, 170, 1) 0%,
      rgba(127, 203, 170, 1) 10%,
      transparent 10% ),
    linear-gradient(to bottom, /* Orange */
      rgba(229, 99, 57, 1) 0%,
      rgba(229, 99, 57, 1) 10%, 
      transparent 10% ),
    linear-gradient(to left, /* Gray */
      rgba(186, 179, 173, 1) 0%,
      rgba(186, 179, 173, 1) 10%,
      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>

（请注意，如果您不使用 ，background-blend-mode您可以通过玩它们的顺序来选择哪些渐变与其他渐变重叠！）

希望能帮助到你。

推荐阅读