63

使用 Photoshop，我可以为具有两种不同颜色的元素设置两个不同的边框。有了它，我可以用我的元素制作许多动态阴影效果。即使使用 Photoshop 效果，我也可以使用投影和内阴影来管理它。

在网页设计方面，如果我有如下图所示的设计，我怎样才能用 CSS 实现呢？真的有可能吗？
不同颜色的边框

注意：我给白色元素设置了两个边框：外边框是白色的，内边框是灰色的。它们一起创造了一种动态的外观，让人感觉像是一个嵌入元素，白色元素是枕头压花的。所以事情有点：

div.white{
   border: 2px solid white;
   border: 1px solid grey;
}

但是你知道这是一个双重声明，并且是无效的。那么如何在 CSS 中管理这样的事情呢？

如果我把border-style: double你知道我不能为单double边框传递两种不同的颜色。

div.white{
       border: double white grey;
}

此外，我熟悉 LESS CSS 预处理器。因此，如果使用 CSS 预处理器可以做到这一点，请告诉我。

4

8 回答 8

106

或者，您可以使用伪元素来这样做:) 伪元素解决方案的优点是您可以使用它来将内部边框与实际边框相距任意距离，并且背景将通过该空间显示. 标记：

body {
  background-image: linear-gradient(180deg, #ccc 50%, #fff 50%);
  background-repeat: no-repeat;
  height: 100vh;
}
.double-border {
  background-color: #ccc;
  border: 4px solid #fff;
  padding: 2em;
  width: 16em;
  height: 16em;
  position: relative;
  margin: 0 auto;
}
.double-border:before {
  background: none;
  border: 4px solid #fff;
  content: "";
  display: block;
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  pointer-events: none;
}
<div class="double-border">
  <!-- Content -->
</div>

如果您想要彼此连续的边框（它们之间没有空格），您可以使用多个box-shadow声明（用逗号分隔）来这样做：

body {
  background-image: linear-gradient(180deg, #ccc 50%, #fff 50%);
  background-repeat: no-repeat;
  height: 100vh;
}
.double-border {
  background-color: #ccc;
  border: 4px solid #fff;
  box-shadow:
    inset 0 0 0 4px #eee,
    inset 0 0 0 8px #ddd,
    inset 0 0 0 12px #ccc,
    inset 0 0 0 16px #bbb,
    inset 0 0 0 20px #aaa,
    inset 0 0 0 20px #999,
    inset 0 0 0 20px #888;
  /* And so on and so forth, if you want border-ception */
  margin: 0 auto;
  padding: 3em;
  width: 16em;
  height: 16em;
  position: relative;
}
<div class="double-border">
  <!-- Content -->
</div>

于 2013-10-19T08:22:59.830 回答
26

我使用了一个简单有效的 css 2 属性。看看这个，很简单，甚至很容易制作动画：

.double-border {
  display: block;
  clear: both;
  background: red;
  border: 5px solid yellow;
  outline: 5px solid blue;
  transition: 0.7s all ease-in;
  height: 50px;
  width: 50px;
}
.double-border:hover {
  background: yellow;
  outline-color: red;
  border-color: blue;
}
<div class="double-border"></div>

于 2015-10-14T12:05:02.277 回答
8

您可以使用 css3 使用 box-shadow 添加无限边框 假设您想在一个 div 上应用多个边框，则代码如下：

div {
    border-radius: 4px;
    /* #1 */
    border: 5px solid hsl(0, 0%, 40%);
    
    /* #2 */
    padding: 5px;
    background: hsl(0, 0%, 20%);
    
    /* #3 */
    outline: 5px solid hsl(0, 0%, 60%);
    
    /* #4 AND INFINITY!!! (CSS3 only) */
    box-shadow:
        0 0 0 10px red,
        0 0 0 15px orange,
        0 0 0 20px yellow,
        0 0 0 25px green,
        0 0 0 30px blue;
}
于 2016-03-03T07:29:35.227 回答
6

Terry建议的伪元素的使用有一个 PRO 和一个 CON：

  1. PRO - 良好的跨浏览器兼容性，因为旧 IE 也支持伪元素。
  2. CON - 它需要创建一个额外的（即使已生成）元素，该元素实际上被定义为pseudo-element。

无论如何是一个很好的解决方案。

其他解决方案：

如果您可以接受 IE9 以来的兼容性（IE8 不支持此功能），您可以通过其他两种可能的方式达到预期的效果：

  1. 使用与单个插图outline结合的属性border box-shadow
  2. 使用两个box-shadow结合border.

这是一个带有Terry修改代码的 jsFiddle，并排显示了这些其他可能的解决方案。每个的主要具体属性如下（其他在.double-border课堂上共享）：

.left
{
  outline: 4px solid #fff;
  box-shadow:inset 0 0 0 4px #fff;
}

.right
{
  box-shadow:0 0 0 4px #fff, inset 0 0 0 4px #fff;
}

更少的代码：

您询问了使用 LESS 等预处理器的可能优势。在这种特殊情况下，实用程序不是很好，但无论如何你可以优化一些东西，用 @variable 声明颜色和边框/ouline/ shadow。

这是我的 CSS 代码示例，在 LESS 中声明（更改颜色和边框宽度变得非常快）：

@double-border-size:4px;
@inset-border-color:#fff;
@content-color:#ccc;

.double-border 
{
  background-color: @content-color;
  border: @double-border-size solid @content-color;
  padding: 2em;
  width: 16em;
  height: 16em;
  float:left;
  margin-right:20px;
  text-align:center;
}

.left
{
  outline: @double-border-size solid @inset-border-color;
  box-shadow:inset 0 0 0 @double-border-size @inset-border-color;
}

.right
{
  box-shadow:0 0 0 @double-border-size @inset-border-color, inset 0 0 0 @double-border-size @inset-border-color;
}
于 2015-10-15T09:09:19.740 回答
3

也许使用大纲属性

    <div class="borders">
      Hello
    </div>

    .borders{
    border: 1px solid grey; 
    outline: 2px solid white;
     }

https://jsfiddle.net/Ivan5646/5eunf13f/

于 2016-04-18T22:19:40.070 回答
2

您可以使用带有轮廓偏移的轮廓

<div class="double-border"></div>
.double-border{
background-color:#ccc;
outline: 1px solid #f00;
outline-offset: 3px;
}
于 2015-12-07T12:01:54.827 回答
1

尝试以下结构以应用两种颜色边框，

<div class="white">
    <div class="grey">
    </div>
</div>

.white
{
    border: 2px solid white;   
}

.grey
{
    border: 1px solid grey;   
}
于 2013-10-19T08:14:40.553 回答
0

您可以使用边框和 box-shadow 属性以及 CSS 伪元素来实现三边框效果。请参阅下面的示例，了解如何在 div 的底部创建三个边框：

.triple-border:after {
    content: " ";
    display: block;
    width: 100%;
    background: #FFE962;
    height: 9px;
    padding-bottom: 8px;
    border-bottom: 9px solid #A3C662;
    box-shadow: -2px 11px 0 -1px #34b6af;
}
<div class="triple-border">Triple border bottom with multiple colours</div>

您必须使用这些值才能正确对齐。但是，您也可以实现更大的灵活性，例如，如果您将某些属性放在适当的元素中而不是伪选择器中，则为 4 个边框。

于 2017-09-09T17:09:11.333 回答