logo标签列表

使用CSS合并区块标签的边框颜色

htmlcssborder
8
我创建了一个居中且略微旋转的分区边框。此外，我给该分区的每个侧面赋予了不同的颜色。以下是我的基本代码： 

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设计构建网站》封面图片。
4个回答
5

边框重叠是不可能的……

但是，这里有一个只使用CSS创建您想要的效果的解决方案，使用：

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

⋅ ⋅ ⋅

更新片段：
使用背景简写语法，就像Temani在这里所做的https://dev59.com/_Kvka4cB1Zd3GeqPwqhJ#50526694。

.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>

⋅ ⋅ ⋅

旧式代码片段：
是的，它能工作，但我更喜欢第一个!

.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，您可以通过调整它们的顺序选择哪些渐变重叠在其他渐变上！）
希望对您有所帮助。
感谢@TakitIsy，我想只使用四种颜色来实现它，也感谢额外的提示。 - rahulkesharwani
1
@rahulkesharwani 你一定想看使用Temani方法简化后的更新片段！ - Takit Isy
3

由于边框始终以某个角度相遇在一个 div 中，因此不可能真正地重叠边框。但是，仍然可以通过制作单独的块来创建您的效果。属性 mix-blend-mode 可以提供与您的图像提供的叠加效果。

请注意，mix-blend-mode 不支持 IE/Edge。

以下是如何完成此操作：

body {
  margin: 30px
}

.block1 {
  background: rgba(127, 203, 170, 1);
}

.block2 {
  background: rgba(0, 171, 238, 1);
  transform: rotate(90deg);
  transform-origin: 20px 0;
  mix-blend-mode: color-burn;
}

.block3 {
  background: rgba(186, 179, 173, 1);
  transform: translateY(140px);
  mix-blend-mode: color-burn;
}

.block4 {
  background: rgba(229, 99, 57, 1);
  transform: translateY(30px) translateX(90px) rotate(90deg);
  mix-blend-mode: darken;
}

.block {
  height: 20px;
  width: 200px;
}
<div class="block1 block"></div>
<div class="block2 block"></div>
<div class="block3 block"></div>
<div class="block4 block"></div>

谢谢你的解决方案，我喜欢只使用单个div块的想法，但一定会研究mix-blend-mode。 - rahulkesharwani
45度并不总是适用的。边框相遇的角度与它们的边框宽度成比例。- https://codepen.io/Paulie-D/pen/aGgjGj - Paulie_D
@Paulie_D，你说得对，感谢指出。我编辑了我的答案。 - Maharkus
2

这里有另一种解决方案，它使用渐变而不需要 mix-blend-mode。思路是使用渐变来制作每个角落，这样您可以轻松控制颜色并模拟重叠：

.box {
  margin:50px;
  height:200px;
  width:200px;
  box-sizing:border-box;
  
  background:
    /*The 4 corners*/
    linear-gradient(#905c3f,#905c3f) top left/20px 20px,
    linear-gradient(#b04d32,#b04d32) top right/20px 20px,
    linear-gradient(#02a9ae,#02a9ae) bottom left/20px 20px,
    linear-gradient(#0085aa,#0085aa) bottom right/20px 20px,
    
    /*The 4 borders*/
    linear-gradient(#e6663a,#e6663a) top/100% 20px,
    linear-gradient(#01adf0,#01adf0) bottom/100% 20px,
    linear-gradient(#7fcaac,#7fcaac) left/20px 100%,
    linear-gradient(#bab1ae,#bab1ae) right/20px 100%;  
   background-repeat:no-repeat;
   
   transform:rotate(45deg);
}
<div class="box">

</div>

1
@TakitIsy 这是用于多重背景的语法 ;) .. 对于每个背景，您需要指定图像[在这种情况下是渐变色]，并同时指定大小和位置。然后将所有内容设置为 no-repeat 非常重要，否则它们都会被重复，并且无法正常工作。 - Temani Afif
1
@TakitIsy 不是的 :) 所有的诀窍都在那里，颜色不是图片，因此您不能应用大小/位置...颜色只能用作最终图层 [background-color] ...但是，如果您使用相同颜色指定线性渐变，您将拥有可以轻松调整的YOUR颜色 ;) 所以我所做的正是这样，但使用有效的语法。 - Temani Afif
1
@TemaniAfif 我喜欢你的解决方案，语法比我的简单多了。你可以去掉角落并添加 background-blend-mode:multiply; 来满足 OP 的所有需求（只有一个 div，只有 4 种颜色）。 - Takit Isy
1
@TakitIsy 随意处理吧 ;) 但我的解决方案的主要思路是不使用混合模式，以避免浏览器支持问题。这就是为什么我提出了一种只使用渐变的更受支持的解决方案。 - Temani Afif
1
@TemaniAfif 很抱歉回复晚了，当时我正在搬家，现在我刚试了一下，这真的是一个优雅的解决方案，它与其他部分完美地配合，而且我还在学习中，非常感谢!!! - rahulkesharwani
显示剩余4条评论
0

我找到的唯一方法是以下这样做，可能还有更好的选择：

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

.boxed1, .boxed2, .boxed3, .boxed4 {
    position: absolute;
    margin:auto;
    /* border: 3pc solid rgba(255, 255, 255 ,1); */
    box-sizing: border-box;
    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);
    
}

.boxed1 {
    border-top: solid rgba(229, 99, 57, 1) 3pc;
}

.boxed2 {
    border-right: solid rgba(186, 179, 173, 1) 3pc;
}

.boxed3 {
    border-bottom: solid rgba(0, 171, 238, 1) 3pc;
}

.boxed4 {
    border-left: solid rgba(127, 203, 170, 1) 3pc;
}
<h1>Welcome to Rahul's Lab</h1>
    <section class="boxed1">
        <!-- <p>This will contain the box properly</p> -->
    </section>
    <section class="boxed2">
        <!-- <p>This will contain the box properly</p> -->
    </section>
    <section class="boxed3">
        <!-- <p>This will contain the box properly</p> -->
    </section>
    <section class="boxed4">
        <!-- <p>This will contain the box properly</p> -->
    </section>

希望这能有所帮助。
Inacio，我想要在角落处合并边框，不管怎样，谢谢你的回答！ - rahulkesharwani
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接