您的位置：首页 > Web前端 > CSS

CSS-边框属性

2017-12-05 21:24 260 查看
       边框有3个属性：一是边框宽度属性，用于设置边框的宽度；二是边框颜色，用于设置边框的颜色；三是边框样式，用于设置边框的样式。

 1.1边框样式border-style

       使用边框样式属性可以定义边框的风格样式，这个属性必须用于指定可见的边框。可以分别设置上边框样式border-top-style、下边框样式border-bottom-style、左边框样式border-left-style和右边框样式border-right-style。

语法：

border-style:样式表

border-top-style:样式值

border-rigth-style:样式值

border-bottom-style:样式值

border-left-style:样式值

举例：

<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312"/>
<title>边框样式</title>
<style type ="text/css">
<!--
.b {
border-top-style :dashed ;
border-right-style :dashed ;
border-bottom-style :dotted ;
border-left-style :solid ;
}
-->
</style>
</head>
<body>
<img src="images/biao.jpg" width="119" height ="188" align="left">
红色的花朵让我想到火,白色的花朵让我想到雪.
火与雪是不相容的：但是这两盆花却融洽地开在一起,宛如火上有雪,
或雪上有火.我故而乐之,小小的心灵里觉得十分奇妙,十分有趣
</body>
</html>


1.2边框宽度 border-width
边框宽度用于设置元素边框的宽度。

语法：

border-width:宽度值

border-top-width:宽度值

border-rigth-width:宽度值

border-bottom-width:宽度值

border-left-width:宽度值

说明：

边框宽度border-width的取值范围如下：

medium表示默认宽度；

thin表示小于默认宽度；

thick表示大于默认宽度；

<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312"/>
<title>边框样式</title>
<style type ="text/css">
<!--
.b {
border-top-style :dashed ;
border-right-style :dashed ;
border-bottom-style :dotted ;
border-left-style :solid ;
border-top-width:2px;
border-top-width:2px;
border-bottom-width:2px;
border-left-width:2px;
}
-->
</style>
</head>
<body>
<img src="images/biao.jpg" width="119" height ="188" align="left">
红色的花朵让我想到火,白色的花朵让我想到雪.
火与雪是不相容的：但是这两盆花却融洽地开在一起,宛如火上有雪,
或雪上有火.我故而乐之,小小的心灵里觉得十分奇妙,十分有趣
</body>
</html>


1.3  边框颜色 border-color

border-color 属性用来设置边框的颜色，可以用16种颜色的关键字或RGB值来设置。
语法：

border-top-color:颜色值

border-rigth-color:颜色值

border-bottom-color:颜色值

border-left-color:颜色值

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312"/>
<title>边框样式</title>
<style type ="text/css">
<!--
.b {
border-top-style :dashed ;
border-right-style :dashed ;
border-bottom-style :dotted ;
border-left-style :solid ;
border-top-width :2px;
border-top-width :2px;
border-bottom-width :2px;
border-left-width :2px;
border-top-color :#ff9900;
border-right-color :#0099ff;
border-bottom-color :#cc33ff;
border-left-color :#ccffff;
}
-->
</style>
</head>
<body>
<img src="images/biao.jpg" width="119" height ="188" align="left">
红色的花朵让我想到火,白色的花朵让我想到雪.
火与雪是不相容的：但是这两盆花却融洽地开在一起,宛如火上有雪,
或雪上有火.我故而乐之,小小的心灵里觉得十分奇妙,十分有趣
</body>
</html>


1.4 边框属性 border

使用border属性可以设置元素的边框样式、宽度和颜色。
语法：

border：边框宽度边框样式颜色值

border-top:上边框宽度上边框样式颜色值
border-rigth:右边框宽度右边框样式颜色值
border-bottom:下边框宽度下边框样式颜色值
border-left:左边框宽度左边框样式颜色值
说明：
       边框属性border只能同时设置4个边框，也只能给出一组边框的宽度和样式，而其他的边框属性只能给出某一个边框的属性，包括样式、宽度和颜色。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航