双边框有不同的颜色

Question

使用Photoshop,我可以将两个不同的边框放在一个具有两种不同颜色的元素上.有了它,我可以用我的元素制作许多动态的阴影效果.即使使用Photoshop效果,我也能用Drop Shadow和Inner Shadow来管理它.

关于Web设计问题,如果我有如下图所示的设计,我怎样才能用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预处理器可以做到这一点,请告诉我.

Answer 1

或者,您可以使用伪元素来实现这一点:)伪元素解决方案的优点是您可以使用它来将内边界与实际边界隔开一段任意距离,并且背景将通过该空间显示.标记:

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>

Answer 2

我使用大纲简单的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>

Answer 3

您可以使用 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;
}

Answer 4

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

1. PRO - 很好的跨浏览器兼容性,因为旧的IE也支持伪元素.
2. CON - 它需要创建一个额外的(即使生成的)元素,这实际上是定义的伪元素.

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

其他解决方案:

如果你可以接受兼容性,因为IE9(IE8不支持此功能),你可以通过其他两种可能的方式获得所需的结果:

1. 使用outline属性结合border和单个插入 box-shadow
2. 使用两个box-shadow结合border.

这里有一个jsFiddle与 Terry的修改代码,并排显示这些其他可能的解决方案.每个的主要特定属性如下(其他在.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;
}