边框样式的使用-CSS入门基础（011）

最新推荐文章于 2024-06-24 06:45:20 发布

虾米大王

最新推荐文章于 2024-06-24 06:45:20 发布

阅读量330

点赞数

分类专栏： CSS 文章标签： css css3 javascript html html5

本文链接：https://blog.csdn.net/modern358/article/details/111397622

版权

CSS 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

今天我们说说边框样式的内容。

在网页中，任何块元素和行内元素都可以设置边框属性。像div、img、table、span都可以设置边框属性的。

设置边框一般有三个方面，一是边框的宽度，二是边框的外观，三是边框的颜色。

语法：

border-width:像素值；border-style:属性值；border-color：颜色值；

边框的属性
属性	说明
border-width	边框的宽度
border-style	边框的外观
border-color	边框的颜色

在对一个元素设置边框时，必须同时设定以上三个属性，边框才有效果出现。

border-width属性：

语法：

border-width:像素值；

border-style属性：

语法：

border-style:属性值；

border-style属性值
属性值	说明
none	无样式
hidden	与none相同，对于表，hidden用于解决边框冲突
solid	实线
dashed	虚线
dotted	点线
double	双线

示例代码：

<html>  <head>    <title>border-style</title>    <style type="text/css">      div      {        width:300px;        height:50px;        margin-bottom:20px;        border-width:2px;        border-color: black;      }      #d1 { border-style:none;}      #d2 { border-style:hidden;}      #d3 { border-style:solid;}      #d4 { border-style:dashed;}      #d5 { border-style:dotted;}      #d6 { border-style:double;}    </style>  </head>  <body>    <div id="d1">none</div>    <div id="d2">hidden</div>    <div id="d3">solid</div>    <div id="d4">dashed</div>    <div id="d5">dotted</div>    <div id="d6">double</div>  </body></html>

border-style属性值（3D边框）
属性值	说明
inset	内凹
outset	外凸
ridge	脊线
groove	槽线

示例代码：

<html>  <head>    <title>3D边框</title>    <style type="text/css">      div      {        width:300px;        height:60px;        margin-bottom:20px;        border-width:20px;        border-color:green;      }      #d1 { border-style:inset;}      #d2 { border-style:outset;}      #d3 { border-style:ridge;}      #d4 { border-style:groove;}    </style>  </head>  <body>    <div id="d1">inset</div>    <div id="d2">outset</div>    <div id="d3">ridge</div>    <div id="d4">groove</div>  </body></html>

需要使用3D边框时，边框的宽度需要大一些，才会有效果。

虽然以上属性值比较多，但是在实际开发中，也只有solid和dashed这两个属性用的多一些，其他基本不用。

border-color属性：

语法：

border-color：颜色值；

对于颜色，可以使用关键字颜色，也可以使用十六进制颜色。

简洁写法：

定义一个元素的边框必须同时设置三个属性：border-width，border-style和border-color。但是每个元素都写三遍，不仅麻烦，还容易出错。

css有一种简洁写法，可以减少代码量，并且非常好用。

语法：

border: 1px solid black;边框：宽度 外观 颜色；

原则上这种写法是没有顺序的，但是为了规范些，建议大家按照以上写法，进行简洁语法。

下节我们接着分享边框样式的内容。