html中加好看的边框,html – CSS3中的嵌入边框很好

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

我对他们如何创造这种效果特别感兴趣,似乎底部边框突出显示而顶部变暗.我知道我在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;

}

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