<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>无标题文档</title>
<SCRipT>
function c(CSS)
{up.className=css
alert(css)}
</SCRIPT>
<STYLE>TABLE,td,div {
FONT-SIZE: 9ptCURSOR: handFONT-FAMILY: 宋体
}
BODY {
FONT-SIZE: 9ptFONT-FAMILY: TahomaBACKGROUND-COLOR: #637994
}
.yellow {
BORDER-RIGHT: #8a6100 2px solidBORDER-TOP: #ffe3a4 2px solidBORDER-LEFT: #ffe3a4 2px solidCOLOR: #ffff00BORDER-BOTTOM: #8a6100 2px solidBACKGROUND-COLOR: #e19d00
}
.blue {
BORDER-RIGHT: #002200 2px solidBORDER-TOP: #a6c1df 2px solidBORDER-LEFT: #a6c1df 2px solidCOLOR: #ffffffBORDER-BOTTOM: #002200 2px solidBACKGROUND-COLOR: #3a6ea5
}
.green {
BORDER-RIGHT: #002200 2px solidBORDER-TOP: #b9ffb9 2px solidBORDER-LEFT: #b9ffb9 2px solidCOLOR: #ffff00BORDER-BOTTOM: #002200 2px solidBACKGROUND-COLOR: #008000
}
.menu {
BORDER-RIGHT: #FFFFFF 2px solidBORDER-TOP: #000000 2px solidBORDER-LEFT: #000000 2px solidCOLOR: #000080BORDER-BOTTOM: #FFFFFF 2px solidBACKGROUND-COLOR: #d8d8d0
}
.menu1 {
BORDER-RIGHT: #000000 2px solidBORDER-TOP: #adbac9 2px solidBORDER-LEFT: #adbac9 2px solidCOLOR: #ffffffBORDER-BOTTOM: #000000 2px solidBACKGROUND-COLOR: #637994
}
.blue1 {
BORDER-RIGHT: #000000 2px solidBORDER-TOP: #d0ecff 2px solidBORDER-LEFT: #d0ecff 2px solidCOLOR: #ffff00BORDER-BOTTOM: #000000 2px solidBACKGROUND-COLOR: #0099ff
}
.black {
BORDER-RIGHT: #000000 2px solidBORDER-TOP: #d0d0d0 2px solidBORDER-LEFT: #d0d0d0 2px solidCOLOR: #ffffffBORDER-BOTTOM: #000000 2px solidBACKGROUND-COLOR: #000000
}
</STYLE>
</head>
<body bgColor=#adbac9>
<DIV class=yellow id=up
style="left: 294width: 196position: absolutetop: 79height: 72">
<P align=center><br>
<br>
有立体效果的层 </P></DIV>
<DIV align=center>
<CENTER>
<TABLE cellSpacing=0 cellPadding=0 width=400 border=0>
<TBODY>
<TR>
<TD class=menu onclick='c("menu")' align=middle width=50>灰</TD>
<TD class=green onclick='c("green")' align=middle width=50>绿</TD>
<TD class=blue onclick='c("blue")' align=middle width=50>蓝</TD>
<TD class=yellow onclick='c("yellow")' align=middle width=50>黄</TD>
<TD class=menu1 onclick='c("menu1")' align=middle width=50>灰1</TD>
<TD class=blue1 onclick='c("blue1")' align=middle width=50>浅蓝</TD>
<TD class=black onclick='c("black")' align=middle width=50>黑</TD>
</TR>
</TBODY>
</TABLE>
</CENTER>
</DIV>
</body>
</html>
div{widht:100pxheight:100pxborder-width:2px}
上面这样的设置 div 在页面中实际站位是 104px，如果不注意很容易造成页面错乱。这是因为我们大部分情况下盒模型使用的是 W3C 标准的’box-sizing: content-box’，它在页面中实际宽度 = width+border( 该公式仅针对上面例子）。
border-image-source背景图片源
border-image-slice需要展示出来图片的尺寸，如果这个量等于图片的尺寸就都相当于整个图片展示出来
border-image-width图片边框的宽度。
border-image-outset边框图像区域超出边框的量。
border-image-repeat图片的填充形式
这个属性的兼容性不是很好，所以在正常的前端开发工作中很难用到，但是在不考虑兼容性的情况下，它无疑的一个很强大的属性，因为它可以自定义漂亮的边框，而不在是单调的线条。
这个属性使用并不太难，不过其中的border-image-slice属性在使用的时候有一个小技巧，就是当想要其中 image 不失真即不拉伸，slice 要和 width 一样。
例如：
.demo{border-width:20pxborder-image-slice:20}
.demo2{
width: 100px
height: 100px
background: #ccc
border-width: 20px
border-style: solid
border-image-source: url(./../img/border-image.jpg)
border-image-slice:20
border-image-outset:22px
border-image-repeat: repeat
}
order-image 使用时候一定要设定 border-style 虽然这个属性没什么用，但是如果不设定它 border-image 就不生效。
border-image-slice 如果设定数值当 px 用时候直接写数字就可以 如果加上 px 反而会不生效。
border-width 用来设定边框的宽度，它决定图片边框展示的厚度(即围绕宽度)。
不要让 border-radius 的 % 值大于 50，因为如果两个相邻的半径和超过了对应的盒子的边的长度，那么浏览器要重新计算以保证它们不重合。虽然表面上看没有问题但是这样会对性能有影响。
如果用 rem、em 单位在移动端用border-radius 画圆，在部分机型里面是椭圆的问题，可以通过 50% 来解决 ，或者使用 px 配合缩放 scale 来实现 rem 单位的效果。
在内联元素span这类标签使用这个属性的时候同样有效但是记得不要使用%这样会导致一些span 标签的圆角不一样因为 % 是参考长和宽计算的。
border-radius 圆角并不会隐藏标签内部元素的内容，如果有内容溢出的情况记得增加overflow:hidden
任何元素都可以使用这个属性,包括视频、音频标签等。
一般情况下不推荐 border-top-left-radius 这类的写法除非是需要在某种交互过程中需要改变其中一个的圆角值而其它的保持不变。因为这类的标签会影响浏览器渲染的性能。
使用这个属性可以让页面更有立体感，给元素添加一个阴影，使得元素看起来是悬浮在原来的位置，下面就看看它的用法吧。
效果如下图
它主要用来告诉浏览器怎么计算元素的展示宽高的。
推荐大家设置 box-sizing 为border-box 这样方便我们写样式不必在去减去 padding 也不会造成 IE 和 Chorme 这类浏览器展示不同的 bug 。如果不设置 box-sizing 不同浏览器会有不同的计算方式。
