CSS3中漂亮的嵌入边框

Question

我真的很喜欢我最近在管子上看到的这种边框风格：

如果你只是在网站上查看它可能看起来更好：http://markdotto.com/bootstrap/

我对他们如何创造这种效果特别感兴趣，似乎底部边框突出显示而顶部变暗。我知道我在Photoshop中如何做到这一点，但他们如何在CSS中做到这一点？

code, pre {
  background-color: rgba(0, 0, 0, 0);
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.15)), to(rgba(0, 0, 0, 0)));
  /* Konqueror */

  background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
  /* FF 3.6+ */

  background-image: -ms-linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
  /* IE10 */

  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.15)), color-stop(100%, rgba(0, 0, 0, 0)));
  /* Safari 4+, Chrome 2+ */

  background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
  /* Safari 5.1+, Chrome 10+ */

  background-image: -o-linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
  /* Opera 11.10 */

  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(0, 0, 0, 0.15)', endColorstr='rgba(0, 0, 0, 0)', GradientType=0);
  /* IE6 & IE7 */

  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(0, 0, 0, 0.15)', endColorstr='rgba(0, 0, 0, 0)', GradientType=0)";
  /* IE8+ */

  background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
  /* the standard */

  background-color: rgba(0, 0, 0, 0.3);
  font-family: "Monaco", Courier New, monospace;
  font-size: 12px;
  font-weight: normal;
  line-height: 20px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 0 rgba(255, 255, 255, 0.25);
  -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 0 rgba(255, 255, 255, 0.25);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 0 rgba(255, 255, 255, 0.25);
}
code {
  padding: 3px 6px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
pre {
  margin: 20px 0;
  padding: 20px;
  color: #fff;
  -moz-border-radius: 6px;
  border-radius: 6px;
  white-space: pre-wrap;
}

我对边境的背景并不感兴趣。您必须访问该网站才能真正体会到它。

Answer 1

这实际上很容易实现。我已经设置了一点jsfiddle，其中概述了在这种情况下如何实现效果，解释了您发布的代码。

希望这清除它！如果没有，我会被激发去详细说明。我喜欢css，很少有机会在我的工作中使用它。

编辑 - 来自jsfiddle的答案：

<pre>的顶部用黑色透明的盒子阴影变暗：

box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25)

rgba（）这里的意思是红色，绿色，蓝色，Alpha 。 0,0,0表示黑色，.25表示25％不透明，或75％透明。

<pre>的底部衬有正常的白色单像素透明盒子阴影：

box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);

因此插入的黑色阴影主持元素内部，给出深度，而白色（255,255,255）阴影悬挂在元素下方1个像素，给出了高光的错觉。

很酷的是，在这段代码中，两个声明组合在一起：

box-shadow: inset 0 1px 3px rgba(0, 0, 0, .25), 0 1px 0 rgba(255, 255, 255, 0.25);

以下是示例中使用的css，为简洁起见，删除了供应商前缀声明：

body {
  background: url('http://subtlepatterns.com/patterns/debut_dark.png');
  padding: 30px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

p {
  font-family: sans-serif;
  margin: 10px 0px;
  font-size: 14px;
}

code {
  font-family: monospace;
  margin: 10px 0px;
}

pre {
  margin: 20px;
  padding: 20px;
  color: #fff;
  border-radius: 6px;
  white-space: pre-wrap;
  background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
  background-color: rgba(0, 0, 0, 0.1);
  font-family: Menlo, monospace;
  font-size: 12px;
  font-weight: normal;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .25), 0 1px 0 rgba(255, 255, 255, 0.25);
}

它可以应用于<pre>元素以查看所需的效果。如果这不起作用，您可能需要将供应商前缀应用于box-shadow和background-image。

Answer 2

你似乎在谈论的效果的关键部分 - 边缘的外观，而不是其他答案所解释的背景中的渐变 - 是：

-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 0 rgba(255, 255, 255, 0.25);
-moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 0 rgba(255, 255, 255, 0.25);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 0 rgba(255, 255, 255, 0.25);

在那里应用了两个阴影：一个标准的盒子阴影（Photoshop称之为“阴影”），底部颜色较浅（rgba(255, 255, 255, 0.25)），一个插入阴影（Photoshop会称之为顶部的“内部阴影”，颜色较深（rgba(0, 0, 0, 0.25)）。

Answer 3

好吧，这个是一个棘手的问题。看起来他们所做的就是在暗到亮的渐变中使用相当暗的透明/ alpha效果。所以看起来它随着网站壁纸或背景而变化。

你有代码所以给你一个例子毫无意义。所以它真的是一个引人注目的网站背景。