CSS-边框属性

最新推荐文章于 2022-07-12 16:56:12 发布

「已注销」

最新推荐文章于 2022-07-12 16:56:12 发布

阅读量456

点赞数

分类专栏： BS学习

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

版权

BS学习专栏收录该内容

29 篇文章 0 订阅

订阅专栏

边框有三个属性：一是边框宽度属性，用于设置边框的宽度；二十边框颜色，用于设置边框的颜色；三是边框样式，用于控制边框的样式。

1.1边框样式 border-style

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

语法：

border-style：样式值

border-top-style：样式值

border-right-style:样式值

border-bottom-style:样式值

border-left-style:样式值

说明：

边框样式的取值有9种

举例：

<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;
        line-height:20px;
        }
        -->
        </style>
</head>
<body>
    祥子老家在乡间，十八岁时，父母去世，他便跑到北平来赚钱谋生。
    带着乡间小伙子的健壮、木讷、勤快与诚实，卖力气换饭吃的事做过不少，
    最后他认定，拉车是件最好挣钱的活儿。
    当他拉着租来的新车，就下定决心，一定要攒钱买一辆自己的车。   
</body>
</html>

1.2边框宽度 border-width

边框宽度用于设置元素边框的宽度。

语法:

border-width:宽度值

border-top-width:宽度值

border-right-width:宽度值

border-bottom-width:宽度值；

border-left-width:宽度值

说明:

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

medium表示默认宽度；

thin表示小于默认宽度；

thick表示大于默认宽度；

长度则是由数字和单位组成的长度值，不可为负值。

举例：

<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;
        line-height:20px;
        border-top-width:2px;
        border-right-width:2px;
        border-bottom-width:2px;
        border-left-width:2px;
        }
        -->
        </style>
</head>
<body>
    祥子老家在乡间，十八岁时，父母去世，他便跑到北平来赚钱谋生。
    带着乡间小伙子的健壮、木讷、勤快与诚实，卖力气换饭吃的事做过不少，
    最后他认定，拉车是件最好挣钱的活儿。
    当他拉着租来的新车，就下定决心，一定要攒钱买一辆自己的车。   
</body>
</html>

1.3边框颜色 border-color

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

语法：

border-top-color:宽度值

border-right-color:宽度值

border-bottom-color:宽度值；

border-left-color:宽度值

说明：

border-tip-color、border-right-color、border-bottom-color和border-left-clolr属性分别用来设置上、下

左边框的颜色，也可以使用border-color属性统一设置4个边框的颜色。

举例：

<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;
        line-height:20px;
        border-top-width:2px;
        border-right-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>
    祥子老家在乡间，十八岁时，父母去世，他便跑到北平来赚钱谋生。
    带着乡间小伙子的健壮、木讷、勤快与诚实，卖力气换饭吃的事做过不少，
    最后他认定，拉车是件最好挣钱的活儿。
    当他拉着租来的新车，就下定决心，一定要攒钱买一辆自己的车。   
</body>
</html>

我的分享结束，谢谢你的观看。