CSS-边框属性

最新推荐文章于 2024-07-03 06:17:57 发布

「已注销」

最新推荐文章于 2024-07-03 06:17:57 发布

阅读量1.3k

点赞数

分类专栏： BS学习

本文链接：https://blog.csdn.net/limeijng/article/details/78717871

版权

BS学习专栏收录该内容

29 篇文章 0 订阅

订阅专栏

边框有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个边框，也只能给出一组边框的宽度和样式，而其他的边框属性只能给出某一个边框的属性，包括样式、宽度和颜色。