Html CSS3 中漂亮的内嵌边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8129775/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Nice inset border in CSS3
提问by Naftuli Kay
I'm really loving this border style I've seen around on the tubes lately:
我真的很喜欢我最近在管子上看到的这种边框样式：
It'll probably look better if you just view it on the site: http://markdotto.com/bootstrap/
如果您只是在网站上查看它可能会更好看：http: //markdotto.com/bootstrap/
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?
我对他们如何创建这种效果特别感兴趣，似乎底部边框突出显示而顶部变暗。我知道我会如何在 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;
}
I'm not interested so much in the background as the border. You'll have to visit the site to truly appreciate it.
我对背景的兴趣不如边界。您必须访问该网站才能真正欣赏它。
回答by Steve Adams
This is actually pretty straight forward to accomplish. I've set up a little jsfiddlethat kind of outlines how the effect is being achieved in this case, explaining the code you posted.
这实际上很容易实现。我已经设置了一个小jsfiddle，它概述了在这种情况下如何实现效果，并解释了您发布的代码。
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.
希望这能解决问题！如果没有，我会很想详细说明。我喜欢 css 并且很少有机会在我的工作中使用它。
edit - The answer from the jsfiddle:
编辑 - 来自 jsfiddle 的答案：
The top of the <pre>is darkened with an inset black, transparent box-shadow:
顶部<pre>用插入的黑色透明框阴影变暗：
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25)
rgba() here means Red, Green, Blue, Alpha. 0, 0, 0 means black, and .25 means 25% opaque, or 75% transparent.
rgba() 这里的意思是Red, Green, Blue, Alpha。0、0、0 表示黑色，0.25 表示 25% 不透明或 75% 透明。
The bottom of the <pre>is lined with a normal, white, single pixel transparent box-shadow:
底部<pre>衬有一个普通的白色单像素透明框阴影：
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
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.
所以插入的黑色阴影位于元素内部，提供深度，而白色 (255, 255, 255) 阴影悬挂在元素下方 1 像素处，给人一种高光的错觉。
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);
Here is the css used in the sample, with vendor prefixed declarations removed for brevity:
这是示例中使用的 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);
}
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.
它可以应用于<pre>元素以查看所需的效果。如果这不起作用，您可能需要将供应商前缀应用于 box-shadow 和 background-image。
回答by Noah Witherspoon
The key part of the effect you seem to be talking about—the appearance of the edges, not the gradient in the background as explained by the other answers—is this:
您似乎正在谈论的效果的关键部分 - 边缘的外观，而不是其他答案所解释的背景中的渐变 - 是这样的：
-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);
There are two shadows being applied there: a standard box shadow (which Photoshop would call a “Drop Shadow”) at the bottom with a lighter color (rgba(255, 255, 255, 0.25)), and an inset one (which Photoshop would call an “Inner Shadow”) at the top with a darker color (rgba(0, 0, 0, 0.25)).
那里应用了两种阴影：底部带有较浅颜色 ( rgba(255, 255, 255, 0.25))的标准框阴影（Photoshop 称为“投影”），以及位于底部的插入阴影（Photoshop 称为“内阴影”）。顶部颜色较深 ( rgba(0, 0, 0, 0.25))。
回答by John Riselvato
Alright this one was a tricky one. looks like all they did was use a fairly dark clear transparent/alpha effect in a dark to light gradient. so it looks like its changing with the websites wallpaper or background.
好吧，这是一个棘手的问题。看起来他们所做的只是在从暗到亮的渐变中使用了相当暗的透明/alpha 效果。所以它看起来像随着网站壁纸或背景而变化。
You have the code so its pointless to give you an example. So its really a trick to the eye with the background to the website.
你有代码，所以给你举个例子毫无意义。所以它真的是一个以网站背景为背景的眼花缭乱的技巧。
