border 边框

发布时间：2023-03-15 10:59:04 所属栏目：教程来源：

导读：border 边框
有时候在页面中需要做一些分割来区分不同的区域，这个属性不但可以用来给元素添加一个边框，也可以作为不同区域的分割线。

1. 官方解释
CSS 的 border 属性是一个用于设置各种单独的边界属性的简写

border 边框
有时候在页面中需要做一些分割来区分不同的区域，这个属性不但可以用来给元素添加一个边框，也可以作为不同区域的分割线。

1. 官方解释
CSS 的 border 属性是一个用于设置各种单独的边界属性的简写属性。 border 可以用于设置一个或多个以下属性的值： border-width、border-style、border-color。

2. 解释
任何一个 h5 标签通过添加一个 border 属性，可以给它设置边框的宽度、展示出来的样子（实线、虚线、圆点等）和颜色。

3. 语法
border: [border-width ||border-style ||border-color |inherit] ;
属性值：

参数名称   参数类型   解释
border-width   [‘px’|‘rem’|’%’]   控制边框的宽度
border-style   string   控制边框的样式
border-color   string   控制边框的颜色
inherit   [’’|’’]   控制边框展示在元素宽高尺寸的外部还是内部
border-width、border-style、border-color它们的用法遵循 css 的：左上、右上、右下、左下的原则。最多可以添加 4 个参数。

参数名称   参数类型
border-top   [border-width |border-style |border-color |inherit]
border-bottom   [border-width |border-style |border-color |inherit]
border-right   [border-width |border-style |border-color |inherit]
border-left   [border-width |border-style |border-color |inherit]
boder可以直接设置元素的宽度、边框样式、颜色，不需要再去单独通过border-width、border-style、border-color去设置。

4. 兼容性
IE   Edge   Firefox   Chrome   Safari   Opera   ios   android
all   all   all   all   all   all   all   all
5. 实例
接下来我们通过一个 div 元素，来说明 border 的使用方法。

<div class="demo"></div>
为 demo 增加边框
.demo{
width:px;
height: px;
border:px solid #ddd;

为 demo 增加边框效果图
解释：通过border 为div四周增加一个宽度为 1px、填充样式为solid(实线)、颜色为#ddd的边框。

只给 demo 的顶部增加一个边框：
.demo{
width:px;
height: px;
border-top:px solid #000;
background: #f2f2f2;

只给 demo 的顶部增加一个边框效果图
解释：通过border-top可以只给 div 的顶部增加边框而不会影响其它部分的样式。

修改 button 默认的边框样式
<button class="btn"></button>
.btn{
border-width: px;

修改 button 默认的边框样式效果图
解释：左边是默认的 button 效果, 右边图片是我们修改后的效果。

个性化 demo 每个边框的颜色。
.demo{
width:px;
height: px;
border:px solid;
border-top-color:red;
border-right-color:green;
border-bottom-color:black;
border-left-color:orange;

个性化 demo 每个边框的颜色效果图
这里千万不能写成 border-right:green;

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!