HTML 学习笔记 CSS样式(边框)

元素的边框(border)是围绕元素内容和内边距的一条或多条线

CSS border 属性允许你规定边框的样式 宽度和颜色


CSS 边框

在 HTML 中,我们使用表格来创建文本周围的边框,但是通过使用 CSS 边框属性,我们可以创建出效果出色的边框,并且可以应用于任何元素。
元素外边距内就是元素的的边框 (border)。元素的边框就是围绕元素内容和内边据的一条或多条线。
每个边框有 3 个方面:宽度、样式,以及颜色。在下面的篇幅,我们会为您详细讲解这三个方面。


边框与背景
CSS 规范指出,边框绘制在“元素的背景之上”。这很重要,因为有些边框是“间断的”(例如,点线边框或虚线框),元素的背景应当出现在边框的可见部分之间。
CSS2 指出背景只延伸到内边距,而不是边框。后来 CSS2.1 进行了更正:元素的背景是内容、内边距和边框区的背景。大多数浏览器都遵循 CSS2.1 定义,不过一些较老的浏览器可能会有不同的表现。


边框的样式
样式是边框最重要的一个方面,这不是因为样式控制着边框的显示(当然,样式确实控制着边框的显示),而是因为如果没有样式,将根本没有边框。
CSS 的 border-style 属性定义了 10 个不同的非 inherit 样式,包括 none。
例如,您可以为把一幅图片的边框定义为 outset,使之看上去像是“凸起按钮”:

 

定义单边样式
如果您希望为元素框的某一个边设置边框样式,而不是设置所有 4 个边的边框样式,可以使用下面的单边边框样式属性:
border-top-style
border-right-style
border-bottom-style
border-left-style
因此这两种方法是等价的:
p {border-style: solid solid solid none;}
p {border-style: solid; border-left-style: none;}

边框颜色用 border-color 属性来设置 相对应的右 border-top-color border-right-color border-bottom-color border-left-color

边框的宽度 border-wiath属性来设置 对应的也有四个边框的宽度属性 border-right-weight ......

例子

<html>
<head>
<style type="text/css">
p 
{
border: medium double rgb(250,0,255)
}
</style>
</head>

<body>
<p>Some text</p>
</body>

</html>

CSS  边框属性

 

posted @ 2016-12-16 14:15  幻影-2000  阅读(498)  评论(0编辑  收藏  举报