CSS Border属性图文详解！[多图]

类型：

大小：

评分：

平台：

标签：

立即下载

作为网页设计者来说，css border是大家最为熟悉不过了，但是嗨客小编就来给大家说说还有你不知道的一些css border知识吧：

不仅可以用CSS3来创建圆角，使用原有CSS一样可以显示自定义图形。

这是正确的（有待考究）；在过去，没发现这种技术之前，我们可能使用背景图像定位来显示一个园或箭头。幸运的是，我们能放下PS图象处理软件了。

你可能很熟悉边的最基本用法。

border: 1px solid black;

上面的代码将给元素应用1px的边。即简洁又简单；但我们也可以稍作修改。

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

除了指定具体的边框宽度值，也可以使用这三个关键词：thin，medium 和 thick。

虽然乍看起来单个属性的方式没必要，但有极少数的情况下，当它是有利的，例如当你需要在特定的事件发生时更新边的部分属性。

也许你需要在用户将鼠标悬停在一个特定的元素上时改变这个元素的边框颜色。使用复合属性需要重复像素值和边的样式。

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

一个更优雅的和简洁（DRY，don't repeat yourself）的做法是只更新边的颜色属性。

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