CSS边框与阴影技巧-CSDN博客

㊀边框简介

CSS中的border可以给不同的边设置不同的风格，其也遵守“TRBL”原则(Top/Right/Bottom/Left)，例如单独写边框类型：

border-top-style:/* 元素顶部边框 */
border-right-style:/* 元素右边边框 */
border-bottom-style:/* 元素底部边框 */
border-left-style:/* 元素左边边框 */

还有一种简写形式：

border-style: solid; /* 一个值时，四条边都是solid类型 */
border-style: solid dotted;/* 两个值时，第1个上下边框，第2个左右边框 */
border-style: solid dotted dashed;/* 三个值时，第1个顶部边框，第2个左右边框，第3个底部边框 */
border-style: solid dotted dashed inset;/* 四个值时，1:顶，2:右，3:底，4:左 */

在CSS2中边框属性主要包括三个类型值：

❏border-width:设置元素边框粗细

❏border-color:设置元素边框颜色

❏border-style:设置元素边框类型

可以将上面三个属性合并在一起，其缩写语法：

border: border-width border-style border-color;

.elm {border:3px red} /* 此时“border-style”解析为“none” */

border-style值列表：

这些属性谁在使用？

❏border-color 受制于浏览器兼容性，至2014.7项目中使用该属性的几乎不存在。

❏border-image 浏览器支持强一些，但运用在项目中到2014.7仅存在一些前端爱好者的blog中。

❏border-radius 得到浏览器强大支持，在互联网上随处可见。

❏border-shadow 目前在Web页面上CSS3的盒子阴影特性应用非常广泛。

㊁CSS3边框颜色属性：

border-color: [<color> | transparent ] {1,4} | inherit

根据以上语法可知，如果使用border-color这种缩写，将不会有任何效果，必须将这个border-color标准写法拆分成四个边框，使用多颜色才会有效果：

❏border-top-colors:[<color>|transparent]{1,4}|inherit

❏border-right-colors:[<color>|transparent]{1,4}|inherit

❏border-bottom-colors:[<color>|transparent]{1,4}|inherit

❏border-left-colors:[<color>|transparent]{1,4}|inherit

由于CSS3的border-color属性还没成为标准规范，为了让不同浏览器能渲染正常，有必要加上前缀，如下是不同浏览器前缀：

“-webkit-”前缀也很常见。

例如，为了让border-color在Firefox浏览器下正常，需要加上“-moz-”：

-moz-border-top-colors: #111 #222 #333 #444 #555
-moz-border-right-colors: #111 #222 #333 #444 #555
-moz-border-bottom-colors: #111 #222 #333 #444 #555
-moz-border-left-colors: #111 #222 #333 #444 #555

Lea Verou制作了一个插件-prefix-free，使用这个插件，大家在平时的开发中就可以略去浏览器的前缀，从而节约开发时间和维护成本。

立体渐变边框效果：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>border-color制作立体渐变边框效果</title>
    <style type="text/css">
        div{
            width: 200px;
            height: 100px;
            border: 10px solid transparent;
            border-radius: 15px 0 15px 0;
            -moz-border-top-colors:#a0a #909 #808 #707 #606 #505 #404 #303;
            -moz-border-right-colors:#a0a #909 #808 #707 #606 #505 #404 #303;
            -moz-border-bottom-colors:#a0a #909 #808 #707 #606 #505 #404 #303;
            -moz-border-left-colors:#a0a #909 #808 #707 #606 #505 #404 #303;
        }
    </style>
</head>
<body>
<div></div>
</body>

运行结果表明：在最新版本的Chrome、Firefox、Edge浏览器上都没有任何渐变效果。修改前缀也没用。因为border是transparent的，所以在没有渐变颜色加持下，就显示一片空白了。

㊂图片边框属性

在CSS3中可以给任何元素（除了在table元素中border-collapse属性值为collapse之外）设置图片效果边框，还可以使用这个来制作圆角按钮效果、渐变的Tabs效果等。

border-image属性的语法：

border-image: none | <image> [<number> | <percentage>] {1,4} [/ <border-width> {1,4} ?[strech | repeat | round] {0,2}

❏none：默认值，表示边框无背景图片

❏<image>：设置背景图片，这跟background-image一样，可以使用绝对或相对的URL地址，来指定边框的背景图片。

❏<number>：number是一个数值，用来设置边框或者边框背景图片的大小，其单位是像素(px)，可以使用1~4个值，表示4个方位的值。

❏<percentage>：与number相似，只是percentage使用的是百分比。

❏stretch、repeat、round：stretch会拉伸边框背景图片(默认值)、repeat会重复边框背景图片、round会平铺边框背景图片。

border-image和background-image之间有一些类似之处，包括图片的引用和排列方式等。

border-image属性使用方法：

➀引入背景图片：border-image-source

border-image-source: url(imageUrl);
/* imageUrl可以是相对或绝对路径 */

➁切割引入背景图片：border-image-slice

border-image-slice:[<number>|percentage]{1,4} && fill ?

<number>/percentage就不必多说，取值遵守“TRBL”规则。

fill默认为空，写上这个关键字，就表示图片边界的中间部分将保留下来。

border-image-slice在实际应用中它就是一种纯粹的剪切，它把通过border-image-source取到的边框背景图片切成九份，再像background-image一样重新布置。

该属性规定图像的上、右、下、左侧边缘的向内偏移，图像被分割为九个区域：四个角、四条边以及一个中间区域。除非使用了关键词 fill，否则中间的图像部分会被丢弃。

右上图片效果代码如下：

div {
    border: 12px double green;
    -moz-border-image: url(../image/border.png) 124;
    -webkit-border-image: url(../image/border.png) 124;
    -o-broder-image: url(../image/border.png) 124;
    border-image: url(../image/border.png) 124;
}

这张图原大小1024*576去当作border.png，图中绿线就是124px切线。

设置<div style="width: 200px; height: 180px;">，效果图人为放大4倍，如下：

加上fill后:

通过上面效果图的角和边上数字及字母的压缩情况，就可以得出，图片被分割成9片，切割的角填充角、边填充边，加fill则中间的填充中间部分。

九宫格示意图border-width=27px：

九宫格对应区域：

border-image-slice通过border-image-source取到的边框背景图片切成九份，再像background-image一样重新布置。

(border.png：81×81px)

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style type="text/css">
        .border-image_h1 {
            width: 150px;
            height: 100px;
            border: 27px solid;
            border-image: url(border.png) 27 round stretch;
        }
        .border-image_h2 {
            width: 150px;
            height: 100px;
            border: 27px solid;
            border-image: url(border.png) 27 repeat stretch;
        }
        .border-image_h3 {
            width: 150px;
            height: 100px;
            border: 27px solid;
            border-image: url(border.png) 27 stretch stretch;
        }
        .border-image_v1 {
            width: 150px;
            height: 100px;
            border: 27px solid;
            border-image: url(border.png) 27 stretch round;
        }
        .border-image_v2 {
            width: 150px;
            height: 100px;
            border: 27px solid;
            border-image: url(border.png) 27 stretch repeat;
        }
    </style>
</head>
<body>
<div class="border-image_h1"></div><hr>
<div class="border-image_h2"></div><hr>
<div class="border-image_h3"></div><hr>
<div class="border-image_v1"></div><hr>
<div class="border-image_v2"></div>
</body>
</html>

在Chrome V80.0上运行效果如下：

stretch：指定用拉伸方式来填充边框背景图。

repeat：指定用平铺方式来填充边框背景图。当图片碰到边界时，如果超过则被截断。

round：指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的大小直至正好可以铺满整个边框。

➂边框图片的宽度：border-image-width

border-image-width: [<length> | <percentage> | <number> | auto] {1,4}

➃边框背景图片的排列方式：border-image-repeat

border-image-repeat: [stretch | repeat | round] {1,2}

border-image-repeat不遵循top、right、bottom、left的方位原则，它只接受一个或两个参数，第一个值表示水平方向的排列方式，第二个值表示垂直方向的排列方式。

对81px×81px的背景图片，在顶边、右边、底边、左边的第27px处切四刀，每个块的高和宽都是27px×27px，其中有四个部分是盲区，不管什么排列方式，这四个区都不变(border-top-right-image、border-bottom-right-image、border-bottom-left-image、border-top-left-image)。

在实际应用中，border-image各属性必须写在一起，不能分解。

border-image:<border-image-source> || <border-image-slice> [ / <border-image-width>? [ / <border-image-outset> ]? ]? || <border-image-repeat>

按钮圆角阴影效果：

（制作按钮的背景图片40×100px）

3条参考线分别对应：上50px,右18px,底50px,左18px

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>CSS3的border-image制作按钮</title>
    <style type="text/css">
        .border-image-btn {
            display: inline-block;
            border: 18px solid green;
            border-width: 0 18px;
            border-image: url("button_sprite.png") 0 18 50 18;
            -webkit-border-image: url("button_sprite.png") 0 18 50 18;
            -moz-border-image: url("button_sprite.png") 0 18 50 18;
            -o-border-image: url("button_sprite.png") 0 18 50 18;
            -ms-border-image: url("button_sprite.png") 0 18 50 18;

            padding: 13px 10px 17px;
            font-size: 16px;
            color: #fff;
            font-weight: bold;
            text-decoration:none;
            line-height: 15px;
            margin: 10px;
        }
        .border-image-btn:hover {
            border-image: url("button_sprite.png") 50 18 0 18;
            -webkit-border-image: url("button_sprite.png") 50 18 0 18;
            -moz-border-image: url("button_sprite.png") 50 18 0 18;
            -o-border-image: url("button_sprite.png") 50 18 0 18;
            -ms-border-image: url("button_sprite.png") 50 18 0 18;

            color: #000;
            border-color: yellow;
            text-decoration: none;
        }
    </style>
</head>
<body>
<a href="#" class="border-image-btn">Click Me!</a>
<a href="#" class="border-image-btn">用力点击我吧！</a>
<a href="#" class="border-image-btn">CSS3 Border-image Button</a>
</body>
</html>

制作tabs效果:

（制作Tab按钮的背景图片12×26px）

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>CSS3的border-image制作tabs效果</title>
    <style type="text/css">
        .tabs-box {
            border-bottom: 3px solid #9eaab6;
            margin: 0;
            padding: 0;
            overflow: hidden;
            zoom: 1;
        }
        .tabs-box li {
            float: left;
            display: inline;
            margin: 0 12px 0 0;
            list-style: none outside none;
            border: 1px solid #9EAAB6;
            padding: 5px;
            border-image: url("border-image-tab.png") 0 5 0 5;
            -moz-border-image: url("border-image-tab.png") 0 5 0 5;
            -webkit-border-image: url("border-image-tab.png") 0 5 0 5;
            -o-border-image: url("border-image-tab.png") 0 5 0 5;
            -ms-border-image: url("border-image-tab.png") 0 5 0 5;
            border-width: 0 5px;
            text-align: center;
            text-shadow: 0 -1px 0 rgba(0,0,0,0.8);
            color: rgba(0, 125, 200, 0.3);
        }
    </style>
</head>
<body>
<ul class="tabs-box">
    <li>Home</li>
    <li>CSS3</li>
    <li>Html5</li>
    <li>JavaScript</li>
    <li>jQuery</li>
</ul>
</body>
</html>

border-image切图：

（从中可知，border-width:0 5px是正确的）

制作圆角和阴影效果：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>CSS3的border-image制作圆角和阴影效果</title>
    <style type="text/css">
        .border-image-drop-boxshadow {
            width: 150px;
            height: 50px;
            padding: 10px;
            margin: 10px;
            border: 1px solid #ccc;
            border-width: 7px 7px 16px;
            border-image: url("border-image-box-shadow.png") 7 7 16 7;
            -moz-border-image: url("border-image-box-shadow.png") 7 7 16 7;
            -webkit-border-image: url("border-image-box-shadow.png") 7 7 16 7;
            -o-border-image: url("border-image-box-shadow.png") 7 7 16 7;
            -ms-border-image: url("border-image-box-shadow.png") 7 7 16 7;
        }
        .box2{
            width: 200px;
            height: 100px;
        }
    </style>
</head>
<body>
<div class="border-image-drop-boxshadow box1">小框</div>
<div class="border-image-drop-boxshadow box2">大框</div>
</body>
</html>

230×32px

㊃圆角边框属性

border-radius:[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?

取值：
<length>：
    用长度值设置对象的圆角半径长度。不允许负值
<percentage>：
    用百分比设置对象的圆角半径长度。不允许负值
说明：
设置或检索对象使用圆角边框。提供2个参数，2个参数以“/”分隔，每个参数允许设置1~4个参数值，
第1个参数表示水平半径，第2个参数表示垂直半径，如第2个参数省略，则默认等于第1个参数

border-radius:<length>{2}第1个值=左上角=右下角，第2个值=右上角=左下角

border-radius:<length>{3}第1个值=左上角，第2个值=右上角=左下角，第3个值=右下角

注：none是默认值，表示元素没有圆角。如果要重置元素没有圆角，取值none并无效果，需要将元素的border-radius取值为0。

❏border-top-left-raduis:<length>/<length>;定义元素左上角圆角

❏border-top-right-raduis:<length>/<length>;右上角

❏border-bottom-right-raduis:<length>/<length>;右下角

❏border-bottom-left-raduis:<length>/<length>;左下角

border-raduis的圆角：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>CSS3的border-radius制作圆角</title>
    <style type="text/css">
        .border-radius {
            width: 350px;
            height: 100px;
            border: 10px solid orange;
            border-radius: 10px  20px  30px  40px / 40px 30px 20px 10px;
        }
    </style>
</head>
<body>
<div class="border-radius"></div>
</body>
</html>

border-radius “/” 前面的表示水平圆角，后面的表示垂直圆角。

border-radius还有一个内半径和外半径的区别，元素边框值较大时，效果就很明显。当border-radius半径小于等于border的厚度时，元素边框内部就不具有圆角效果。

.border-radius {
    width: 350px;
    height: 100px;
    border: 30px solid orange;
    border-radius: 30px;
}

border>=border-radius时，内部为直角？这是因为：border-radius内径 = 外径 - 边框宽度。所以border-radius - border-width差值越大，内径圆角幅度就越大。

还有一种特殊情况，元素相邻边有不同宽度，那么这个角会从宽的边平滑过渡到窄的一边。如：

.border-radius {
    width: 350px;
    height: 100px;
    border: 30px solid orange;
    border-width: 20px 5px 30px 60px;
    border-radius: 100px;
}

如果每条边颜色不一样，两条相邻边颜色和样式转变的中心点是在一个和两边宽度成正比的角上。如果两条边宽度相同，这个临界点在45°角上，如果一条边是另一条边的2倍，这个临界点就在30°角上。界定这个转变的线就是连接在内外曲线上的两个点的直线。

.border-radius {
    width: 350px;
    height: 100px;
    border: 30px solid orange;
    border-width: 35px 35px 60px 30px;
    border-color: orange red green blue;
    border-radius: 80px;
}

图片应用圆角：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>图片上的圆角应用</title>
    <style type="text/css">
        img {
            border: 5px solid red;
            border-radius: 10px;
        }
    </style>
</head>
<body>
<img src="border.jpg" alt=""  width="150"  height="150" />
</body>
</html>

表格应用圆角：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>表格的圆角应用</title>
    <style type="text/css">
        table {
            margin: 10px;
            border:5px solid orange;
            border-radius: 10px;
        }
        .table1 {
            border-collapse: collapse;
        }
        .table2 {
            border-collapse: separate;
        }
    </style>
</head>
<body>
<table class="table1">
    <tr>
        <td>border-collapse:collapse</td>
    </tr>
</table>
<table class="table2">
    <tr>
        <td>border-collapse:separate</td>
    </tr>
</table>
</body>
</html>

可以看到当表格属性border-collapse是collapse时，圆角无效，只有是separate时表格圆角才正常显示。

实战体验：制作特殊图形

圆形、半圆、扇形、椭圆

div {/* 圆 */
    width: 100px;
    height: 100px;
    background-color: orange;
    border-radius: 50%;
}

.semicircle{/* 上半圆，其他左、右、下半圆类似 */
    width: 100px;
    height: 50px;
    background-color: orange;
    border-radius: 50px 50px 0 0;
}

.quarterCircle {/* 左上1/4扇形，其他左下、右上、右下扇形类似 */
    width: 100px;
    height: 100px;
    background-color: orange;
    border-radius: 100px 0 0 0;
}

.oval {/* 椭圆 */
    width: 100px;
    height: 50px;
    background-color: orange;
    border-radius: 100px / 50px;
}

㊄盒子阴影属性

box-shadow: <h-shadow> <v-shadow> [blur] [spread] [color] [inset];
参数：
h-shadow 必需。水平阴影偏移量。正值阴影在右边，负值在左边。
v-shadow 必需。垂直阴影偏移量。正值阴影在底部，负值在顶部。
blur 	可选。阴影模糊半径，取值越大越模糊，0表示无模糊效果。
spread 	可选。阴影扩展半径。正值阴影延展扩大，负值阴影缩小。
color 	可选。阴影的颜色。
inset 	可选。将外部阴影 (outset) 改为内部阴影。

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>box-shadow设置单边阴影效果</title>
    <style type="text/css">
        .box-shadow {
            width: 200px;
            height: 100px;
            border-radius: 5px;
            border: 1px solid #ccc;
            margin: 20px;
        }
        .top {
            box-shadow: 0 -4px 5px -3px red;
        }
        .right {
            box-shadow: 4px 0 5px -3px green;
        }
        .bottom {
            box-shadow: 0 4px 5px -3px blue;
        }
        .left {
            box-shadow: -4px 0 5px -3px orange;
        }
    </style>
</head>
<body>
<div class="box-shadow top"></div>
<div class="box-shadow right"></div>
<div class="box-shadow bottom"></div>
<div class="box-shadow left"></div>
</body>
</html>

(单边阴影效果)

这里要注意都设置了spread=-3px，默认是有阴影扩展的。

.top {
    box-shadow: 0 -4px 5px red; /* 去掉spread值 */
}

只设置阴影模糊半径和阴影颜色：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>box-shadow设置四边相同的阴影效果</title>
    <style type="text/css">
        .box-shadow{
            width: 200px;
            height: 100px;
            border-radius: 10px;
            border: 1px solid #ccc;
            margin: 20px;
            box-shadow: 0 0 10px 10px orange;
        }

    </style>
</head>
<body>
<div class="box-shadow"></div>
</body>
</html>

（四边都有阴影效果）此时如果将扩展半径改成“-10px”，则看不到任何阴影效果。

只设置扩展半径和阴影颜色：

.box-shadow{
    width: 200px;
    height: 100px;
    border-radius: 10px;
    border: 1px solid #ccc;
    margin: 20px;
    box-shadow: 0 0 0px 10px orange;
}

box-shadow与border对比：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>border与box-shadow</title>
    <style type="text/css">
        .box {
            width: 200px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            float: left;
            margin: 30px;
        }
        .border{
            border: 10px solid red;
        }
        .box-shadow {
            box-shadow: 0 0 0 10px red;
        }
    </style>
</head>
<body>
<div class="box border">Border</div>
<div class="box box-shadow">Box-shadow</div>
</body>
</html>

以上是border与box-shadow制作边框效果对比图。我们看到border边框距浏览器左边距为30+10px，而box-shadow边框距浏览器左边距为30+0px，这也与显示效果相符。

内阴影：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>box-shadow的内阴影</title>
    <style type="text/css">
        .box-shadow {
            width: 200px;
            height: 100px;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-shadow: inset 3px 3px 10px #06c;
        }
    </style>
</head>
<body>
<div class="box-shadow"></div>
</body>
</html>

注：box-shadow在inset内阴影直接运用在图片<img>上没有任何效果。

在<img>外添加一个容器标签，并将<img>转换成外容器的背景图片，将border-radius运用在外容器上才有圆角效果。如：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>图片内阴影效果</title>
    <style type="text/css">
        .box-shadow {
            display: inline-block;
            box-shadow: inset 5px 5px 10px #06c;
        }
        img {
            position:relative;
            z-index: -1;
            vertical-align: top;
        }
    </style>
</head>
<body>
<div class="box-shadow">
    <img src="border.jpg" alt="" width="200" />
</div>
</body>
</html>

多层阴影：

box-shadow可以多层阴影同时使用，每层阴影之间使用逗号“,”隔开。

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>box-shadow多层阴影效果</title>
    <style type="text/css">
        .box-shadow {
            width: 200px;
            height: 100px;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-shadow: -5px 0 5px red, 0 5px 5px blue, 5px 0 5px green, 0 -5px 5px orange;
        }
    </style>
</head>
<body>
<div class="box-shadow"></div>
</body>
</html>

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>box-shadow制作多色边框效果</title>
    <style type="text/css">
        .box-shadow {
            width: 200px;
            height: 100px;
            border: 1px solid #ccc;
            margin: 30px;
            box-shadow:
            0 0 0 1px red,
            0 0 0 5px blue,
            0 0 0 8px green,
            0 0 0 12px yellow,
            0 0 0 16px orange,
            0 0 0 20px purple;
        }
    </style>
</head>
<body>
<div class="box-shadow"></div>
</body>
</html>

注：先写的阴影在最顶层，依次类推。

实战体验：制作3D搜索表单

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>box-shadow制作立体导航</title>
    <style type="text/css">
        #formWrapper {
            width: 450px;
            padding: 8px;
            margin: 20px;
            overflow: hidden;
            border-width: 1px;
            border-style: solid;
            border-color: #dedede #bababa #aaa #bababa;
            box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
            border-radius: 10px;
            background-color: #f6f6f6;
            background-image: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#eae8e8));
            background-image: -webkit-linear-gradient(top, #f6f6f6, #eae8e8);
            background-image: -moz-linear-gradient(top, #f6f6f6, #eae8e8);
            background-image: -ms-linear-gradient(top, #f6f6f6, #eae8e8);
            background-image: -o-linear-gradient(top, #f6f6f6, #eae8e8);
            background-image: linear-gradient(top, #f6f6f6, #eae8e8);
        }
        #formWrapper .search {
            width: 330px;
            height: 20px;
            padding: 10px 5px;
            float: left;
            font: bold 16px 'lucida sans', 'trebuchet MS', 'Tahoma';
            border: 1px solid #ccc;
            box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
            border-radius: 3px;
        }
        #formWrapper .search:focus {
            outline: 0;
            border-color: #aaa;
            box-shadow: 0 1px 1px #bbb inset;
        }
        #formWrapper .search::-webkit-input-placeholder,
        #formWrapper .search:-moz-placeholder,
        #formWrapper .search:-ms-input-placeholder {
            color: #999;
            font-weight: normal;
        }
        #formWrapper .btn {
            float: right;
            border: 1px solid #00748f;
            height: 42px;
            width: 100px;
            padding: 0;
            cursor: pointer;
            font: bold 15px Arial, Helvetica;
            color: #fafafa;
            text-transform: uppercase;
            background-color: #0483a0;
            background-image: -webkit-gradient(linear, left top, left bottom, from(#31b2c3), to(#0483a0));
            background-image: -webkit-linear-gradient(top, #31b2c3, #0483a0);
            background-image: -moz-linear-gradient(top, #31b2c3, #0483a0);
            background-image: -ms-linear-gradient(top, #31b2c3, #0483a0);
            background-image: -o-linear-gradient(top, #31b2c3, #0483a0);
            background-image: linear-gradient(top, #31b2c3, #0483a0);
            border-radius: 3px;
            text-shadow: 0 1px 0 rgba(0, 0 ,0, .3);
            box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
        }
        #formWrapper .btn:hover,
        #formWrapper .btn:focus {
            background-color: #31b2c3;
            background-image: -webkit-gradient(linear, left top, left bottom, from(#0483a0), to(#31b2c3));
            background-image: -webkit-linear-gradient(top, #0483a0, #31b2c3);
            background-image: -moz-linear-gradient(top, #0483a0, #31b2c3);
            background-image: -ms-linear-gradient(top, #0483a0, #31b2c3);
            background-image: -o-linear-gradient(top, #0483a0, #31b2c3);
            background-image: linear-gradient(top, #0483a0, #31b2c3);
        }
        #formWrapper .btn:active {
            outline: 0;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
        }
        #formWrapper::-moz-focus-inner {
            border: 0;
        }
    </style>
</head>
<body>
<form id="formWrapper">
    <div class="formFiled clearfix">
        <input type="text" required="" placeholder="Search for CSS3, HTML5, jQuery ..." class="search">
        <input type="submit" class="btn submit" value="go">
    </div>
</form>
</body>
</html>

(Chrome)

(Firefox)

摘出最重要的3D效果部分：（用到了多层阴影表达出3D效果）

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        div {
            width: 450px;
            height: 50px;
            border-width: 1px;
            border-style: solid;
            border-color: #dedede #bababa #aaa #bababa;
            box-shadow:
                    0 3px 3px rgba(255,255,255,.1),
                    0 3px 0 #bbb,
                    0 4px 0 #aaa,
                    0 5px 5px #444;
            border-radius: 10px;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>