css边框border(含代码,易懂)

简介: 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>

本文章进入尾声,感谢各位大佬的阅读,如果有什么不对的地方,还请大家指出一下,十分感谢!

相关文章
|
4天前
|
前端开发
前端 CSS 经典:弧形边框选项卡
前端 CSS 经典:弧形边框选项卡
11 0
|
5天前
|
前端开发
CSS边框
CSS边框。
12 1
|
7天前
|
Web App开发 前端开发 JavaScript
只需一行CSS代码,让长列表网页的渲染性能提升几倍以上!
只需一行CSS代码,让长列表网页的渲染性能提升几倍以上!
|
9天前
|
存储 移动开发 JavaScript
jQuery 根据 css 类筛选 DOM 元素的代码
jQuery 根据 css 类筛选 DOM 元素的代码
19 1
|
9天前
|
移动开发 HTML5
HTML5/CSS3粒子效果进度条代码
HTML5/CSS3进度条应用。这款进度条插件在播放进度过程中出现粒子效果,就像一些小颗粒从进度条上散落下来
23 0
HTML5/CSS3粒子效果进度条代码
|
9天前
|
前端开发
CSS边框
【5月更文挑战第4天】CSS边框。
21 2
|
9天前
|
缓存 前端开发 IDE
【专栏:工具与技巧篇】HTML与CSS代码压缩与合并
【4月更文挑战第30天】本文探讨了优化Web性能的关键——HTML和CSS代码压缩与合并。代码压缩通过移除空白字符、注释和缩短标识符减小文件大小,而代码合并则减少HTTP请求。开发者可借助在线工具、构建工具插件、编辑器扩展或手动方式实现压缩和合并。最佳实践中,应保留未压缩备份,测试压缩效果,利用缓存并自动化流程。同时,注意适度优化,避免影响首屏渲染速度。关注新工具和策略以维持网站性能和可维护性。
|
9天前
|
前端开发 UED
【专栏:CSS基础篇】CSS背景与边框:设计网页外观
【4月更文挑战第30天】CSS中的背景和边框是网页设计的关键元素,能增强视觉层次和用户体验。背景可通过`background-color`设置颜色,`background-image`添加图像,`background-position`和`background-size`调整位置和大小。边框用`border-style`定义样式,`border-width`设定宽度,`border-radius`创建圆角。理解并巧妙运用这些属性,结合媒体查询实现响应式设计,将使网页更具吸引力和功能性。不断学习和创新是提升设计能力的关键。
|
9天前
|
前端开发 UED 开发者
【专栏】探讨了CSS3动画卡顿的原因,包括复杂动画效果、过多元素参与、低效代码结构和硬件资源限制,并提出优化措施
【4月更文挑战第29天】本文探讨了CSS3动画卡顿的原因,包括复杂动画效果、过多元素参与、低效代码结构和硬件资源限制,并提出优化措施:简化动画路径、控制元素数量、优化代码结构、利用硬件加速及性能监测。通过实际案例展示了优化效果,强调了性能优化对提升用户体验的重要性。在开发中,应持续关注并优化动画性能,以适应网页应用的需求。
|
9天前
|
前端开发 JavaScript 容器
JavaScript、CSS像素动画特效代码
此示例创建一个带有像素粒子的容器,每隔300毫秒就会动态添加一个新的像素粒子,然后通过CSS的关键帧动画(`@keyframes`)使它们产生上升和逐渐消失的动画效果。你可以根据需要修改像素粒子的颜色、大小、动画效果和创建速度。
14 0