css边框border(含代码,易懂)
css中边框有很多的属性方法，让我为大家介绍一下吧！
1.边框样式(border-style)
| 常用属性 | 简单介绍 |
|---|---|
| none | 没有边框,即忽略所有边框的宽度(默认值) |
| solid | 设置边框为实线 |
| dashed | 设置边框为虚线 |
| dotted | 设置边框为点线 |
| double | 设置边框为双实线 |
如下代码：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边框样式title>
<style>
div {width: 100px;height: 100px;}
.none {border-style: none; /* 无边框 */}
.solid {border-style: solid; /* 实线 */}
.dashed {border-style: dashed;/* 虚线 */}
.dotted {border-style: dotted;/* 点线 */}
.double {border-style: double;/* 双实线 */}
style>
head>
<body>
<div class="none">div>
<div class="solid">div>
<div class="dashed">div>
<div class="dotted">div>
<div class="double">div>
body>
html>
在我们设置边框样式的时候我们可以指定某一条边进行修饰,也可以为四条边进行修饰
| 属性名 | 对应的边框方位 |
|---|---|
| border-top-style | 上边框样式(属性值为上面表格内的常用属性) |
| border-right-style | 右边框样式(属性值为上面表格内的常用属性) |
| border-bottom-style | 下边框样式(属性值为上面表格内的常用属性) |
| border-left-style | 左边框样式(属性值为上面表格内的常用属性) |
如下代码：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>带方向的边框样式title>
<style>
div {width: 100px;height: 100px;}
.top {border-left-style: none; /* 无上边框 */}
.right {border-right-style: solid; /* 右边框为实线 */}
.bottom {border-bottom-style: dashed;/* 下边框为虚线 */}
.left {border-left-style: dotted;/* 左边框为点线 */}
style>
head>
<body>
<div class="top">div>
<div class="right">div>
<div class="bottom">div>
<div class="left">div>
body>
html>
border-style也是可以同时设置四个方向的边框
| 属性名 | 属性值对应的边框方位 |
|---|---|
| border-style | 4个值时对应的边框样式(上 右 下 左) |
| border-style | 3个值时对应的边框样式(上 左右 下) |
| border-style | 2个值时对应的边框样式(上下 左右) |
| border-style | 1个值时对应的边框样式(上下左右) |
代码如下:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>四个值及以下title>
<style>
div {width: 100px;height: 100px;}
.one {border-style: solid; /* 上右下左(边框)都为实线 */}/*(样式属性一个值时)*/
.two {border-style: solid dashed; /* 上下(实线),左右(虚线)*/}/*(样式属性二个值时)*/
.three {border-style:solid dashed dotted;/* 上(实线),左右(虚线),下(点线) */}/*(样式属性三个值时)*/
.four {border-style:solid dashed double dotted;/* 上(实线),右(虚线),下(双实线),左(点线) */}/*(样式属性四个值时)*/
style>
head>
<body>
<div class="one">div>
<div class="two">div>
<div class="three">div>
<div class="four">div>
body>
html>
2.边框宽度(border-width)
特别注意要设置边框样式
在我们边框里是可以设置某一条边框的宽度的，特别注意添加边框宽度前要给边框上边框样式
| 属性名 | 需要设置边框宽度的方位 |
|---|---|
| border-top-width | 上边框宽度,宽度为数值类型(记住要跟px) |
| border-right-width | 右边框宽度,宽度为数值类型(记住要跟px) |
| border-bottom-width | 下边框宽度,宽度为数值类型(记住要跟px) |
| border-left-width | 左边框宽度,宽度为数值类型(记住要跟px) |
代码如下：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>带方向的边框样式title>
<style>
/* 特别注意,需要设置给边框宽度前一定要给边框设置边框样式 */
div {width: 100px;height: 100px;border-style:solid;}
/* 记住要值为数值型,要加上px(像素) */
.top {border-left-width: 1px; /* 上边框宽度1px */}
.right {border-right-width: 1px; /* 右边框宽度1px */}
.bottom {border-bottom-width: 1px;/* 下边框宽度1px */}
.left {border-left-width: 1px;/* 左边框宽度1px */}
style>
head>
<body>
<div class="top">div>
<div class="right">div>
<div class="bottom">div>
<div class="left">div>
body>
html>
border-width也是可以同时设置四个方向边框的宽度
| 属性名 | 属性值对应的边框宽度方位 |
|---|---|
| border-width | 4个值时对应的边框宽度(上 右 下 左) |
| border-width | 3个值时对应的边框宽度(上 左右 下) |
| border-width | 2个值时对应的边框宽度(上下 左右) |
| border-width | 1个值时对应的边框宽度(上下左右) |
代码如下:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>四个方向边框宽度title>
<style>
/* 特别注意添加边框宽度之前需要添加边框样式 */
/* 记住要值为数值型,要加上px(像素) */
div {width: 100px;height: 100px;border-style:solid;}
.one {border-width: 1px; /* 上右下左(宽度1px) */}/*(一个值时)*/
.two {border-width: 1px 2px; /* 上下(1px),左右(2px)*/}/*(二个值时)*/
.three {border-width:1px 2px 3px;/* 上(1px),左右(2px),下(3px) */}/*(三个值时)*/
.four {border-width:1px 2px 3px 4px;/* 上(实线),右(虚线),下(双实线),左(点线) */}/*(四个值时)*/
style>
head>
<body>
<div class="one">div>
<div class="two">div>
<div class="three">div>
<div class="four">div>
body>
html>
3.边框颜色(border-color)
border-color可以取英文颜色,rgb(r,g,b),rgba(r,g,b,a)可以设置透明,十六进制的方法#AABBCC 来设置边框的颜色
特别注意要设置边框样式
设置边框颜色各个方向:
| 属性名 | 对应的边框颜色 |
|---|---|
| border-top-color | 上边框颜色 |
| border-right-color | 右边框颜色 |
| border-bottom-color | 下边框颜色 |
| border-left-color | 左边框颜色 |
代码如下:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边框颜色title>
<style>
/* 特别注意要添加边框样式 */
div {width: 100px;height: 100px;border-style: solid;}
.top {border-left-color: pink; /* 左边框为粉色 */}
.right {border-right-color: rgb(0, 0, 0); /* 右边框为黑色 */}
.bottom {border-bottom-color: #fff;/* 下边框为白色 */}
.left {border-left-color: rgba(0, 0, 0, 0.1);/* 左边框为透明的黑色 */}
style>
head>
<body>
<div class="top">div>
<div class="right">div>
<div class="bottom">div>
<div class="left">div>
body>
html>
border-color也是可以同时设置四个方向边框的颜色
| 属性名 | 属性值对应的边框颜色方位 |
|---|---|
| border-color | 4个值时对应的边框颜色(上 右 下 左) |
| border-color | 3个值时对应的边框颜色(上 左右 下) |
| border-color | 2个值时对应的边框颜色(上下 左右) |
| border-color | 1个值时对应的边框颜色(上下左右) |
代码如下:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边框颜色设置多个值时title>
<style>
/* 特别注意要设置边框样式 */
div {width: 100px;height: 100px;border-style: solid;}
.one {border-color: rgb(0, 0, 0); /* 上右下左(黑色) */}/*(属性值一个时)*/
.two {border-color: #fff #000; /* 上下(白色),左右(黑色)*/}/*(属性值二个时)*/
.three {border-color:pink orange red;/* 上(粉色),左右(橙色),下(红色) */}/*(属性值三个时)*/
.four {border-color:rgba(0, 0, 0, 0.1) pink orange red;/* 上(透明的黑色),右(粉色),下(橙色),左(红色) */}/*(属性值四个时)*/
style>
head>
<body>
<div class="one">div>
<div class="two">div>
<div class="three">div>
<div class="four">div>
body>
html>
4.边框复合属性(border)
我们也可以指定某一条边进行修饰，也是有复合属性
| 属性名 | 属性值 |
|---|---|
| border-top | 边框宽度 边框样式 边框颜色 |
| border-right | 边框宽度 边框样式 边框颜色 |
| border-bottom | 边框宽度 边框样式 边框颜色 |
| border-left | 边框宽度 边框样式 边框颜色 |
代码如下:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边框复合属性title>
<style>
div {width: 100px;height: 100px;}
.top {border-left: 1px solid #fff; /* 上边框宽度1px,白色的实线 */}
.right {border-right:2px dashed #000; /* 右边框宽度2px,黑色的虚线 */}
.bottom {border-bottom: 3px dotted #fff;/* 下边框宽度3px,白色的点线 */}
.left {border-left:4px double #000;/* 左边框宽度4px,黑色的双实线 */}
style>
head>
<body>
<div class="top">div>
<div class="right">div>
<div class="bottom">div>
<div class="left">div>
body>
html>
在我们边框里有一种非常常用的写法直接border
复合属性的基本格式 border:边框宽度 边框样式 边框颜色；(这是最常用的方法)
代码如下:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边框复合属性title>
<style>
.box {
width: 100px;
height: 100px;
border: 1px solid #000;/* 一个边框宽度为1px,实线边框,边框也是为黑色的元素 */
}
style>
head>
<body>
<div class="box">我是复合属性div>
body>
html>
本文章进入尾声，感谢各位大佬的阅读，如果有什么不对的地方，还请大家指出一下，十分感谢！