相信做作为页面设计的我们都熟悉border的使用了，它还有什么东西吸引人的地方我们不知道的吗？我相信，在这篇文章中，你会发现还有你不知道的关于border的几件事！

　　不仅CSS3可以被用来创建圆角，就算是CSS2甚至更老的CSS也可以显示自定义的形状，告诉你这是真的。在过去，我们可能使用背景图像定位显示圆形或箭头。

　　值得庆幸的是这已不再是唯一的答案。

　　基础知识

　　你可能熟悉的最基本的使用边界。

　     border: 1px solid #000; 　

　   上面的代码将适用于1 1px的一个元素的边界。平原和简单，但我们也可以修改语法。 　

    　border-width: thick; 　　border-style: solid; 　　border-color: black; 　　

        除了 传递一个特定值边框宽度，三个关键字或者可能被用于thin 、 medium 、thick

   　当你需要做的效果是鼠标悬停在元素上而改变边框的颜色，使用简写形式，会要求你重复其它的值，如像1px solid,而你要做的仅仅是想改变颜色。

　　box { 　　border: 1px solid red; 　　} 　　.box:hover { 　　border: 1px solid green; 　　} 　

   　一个更优雅的和简短做法是专门更新的边框颜色属性。 　

    　.box { 　　border: 1px solid red; 　　} 　　.box:hover { 　　border-color: green; 　　}

　　觉得以上说的很无聊是吧，不久你会发现，这个技术是有帮助于使用CSS创建自定义形状的。

　　边界半径

　　边界半径CSS3的第一个新的属性，获得社会各界的广泛使用。这意味着，不包括Internet Explorer 8和下面，所有的浏览器可以显示圆角。 　　

        为了要正确地运用这个属性，有必要使用WebKit和Mozilla的供应商的前缀 　

     　webkit-border-radius: 10px; 　　moz-border-radius: 10px; 　　border-radius: 10px;

        正如人们所预料的，我们也可以指定每一个角自定义值。

　　border-top-left-radius: 20px; 　　border-top-right-radius: 0; 　　border-bottom-right-radius: 30px; 　　border-bottom-left-radius: 0;

　　在上面的代码，设置border-top-right-radius和border-bottom-left-radius为0是多余的，除非该元素继承值，需要重置。

　　如果你喜欢的话，你可以这么来写简写。 　

    　top left, top right, bottom right, bottom left */ 　　border-radius: 20px 0 30px 0;

　　我们来做一个例子，柠檬的形状可以用CSS的边框半径属性来做到，像这样： 　

    　.lemon { 　　width: 200px; height: 200px; 　　background: #F5F240; 　　border: 1px solid #F0D900; 　　border-radius: 10px 150px 30px 150px; 　　}　　

　　除了基础知识

　　很多设计师仍意犹未尽地使用着以上的知识点，然而，还有一些方法，我们可以进一步推,下期再讲。

本站技术原创栏目文章均为中睿原创或编译，转载请注明：文章来自中睿，本站保留追究责任的权利。