尼斯嵌入边框CSS3 [英] Nice inset border in CSS3

问题描述

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

I'm really loving this border style I've seen around on the tubes lately:

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

It'll probably look better if you just view it on the site: http://markdotto.com/bootstrap/

m特别感兴趣的是如何创建这种效果，看起来底部边框突出显示，而顶部变暗。我知道我该怎么做在Photoshop，但他们是如何在CSS中做的？

I'm particularly interested in how they're creating this effect, it seems that the bottom border is highlighted while the top is darkened. I know how I'd do this in Photoshop, but how are they doing it in 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;
}

我对背景不感兴趣。你必须访问该网站才能真正感谢它。

I'm not interested so much in the background as the border. You'll have to visit the site to truly appreciate it.

推荐答案

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

This is actually pretty straight forward to accomplish. I've set up a little jsfiddle that kind of outlines how the effect is being achieved in this case, explaining the code you posted.

希望这会清除它！如果没有，我会鼓励更多。我很喜欢css，很少有机会在我的工作中使用它。

Hope this clears it up! If not, I'd be stoked to elaborate more. I love css and rarely get a chance to use it in my work.

< pre> 的顶部变暗，内嵌黑色透明框阴影：

The top of the <pre> is darkened with an inset black, transparent box-shadow:

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

rgba（）这里是指红色，绿色，蓝色，阿尔法。 0，0，0表示黑色，而.25表示25％不透明或75％透明。

rgba() here means Red, Green, Blue, Alpha. 0, 0, 0 means black, and .25 means 25% opaque, or 75% transparent.

< 内有正常的白色单像素透明框阴影：

The bottom of the <pre> is lined with a normal, white, single pixel transparent box-shadow:

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

所以黑色阴影在元素内部给出深度，而白色（255,255 ，255）阴影挂在元素下面1个像素，给出一个突出的错觉。

So the inset black shadow presides inside of the element, giving depth, while the white (255, 255, 255) shadow hangs 1 pixel below the element, giving the illusion of a highlight.

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

The cool thing is, in this code the two declarations are combined:

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

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

Here is the css used in the sample, with vendor prefixed declarations removed for brevity:

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。

It can be applied to a <pre> element to see the desired effect. If this doesn't work, you may need to apply vendor prefixes to box-shadow and background-image.

这篇关于尼斯嵌入边框CSS3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！