在网页中，边框随处可见，任何块元素和行内元素都可以设置边框属性。例如，div元素可以设置边框，img元素也可以设置边框，table元素也可以设置边框，span元素同样也可以设置边框等等。

目标

设置边框的三要素
简写边框法
单独设置边框

一个元素的边框，同时设置边框的宽度border-width、边框的外观border-style和边框的颜色border-color这三个属性值。

边框

边框的宽度--border-width

在CSS中，使用border-width属性来定义边框的宽度。

语法：border-width:像素值;

像素值越大，则线条越大。

不同大小的边框宽度

边框的外观--border-style

在CSS中，使用border-style属性来定义边框的外观

语法：border-style:属性值;

属性值有很多种，常用的只有实线和虚线

属性值

常用的是实线边框和虚线边框

各式各样的边框外观

边框的颜色--border-color

在CSS中，使用border-color属性来定义边框的颜色

语法：border-color:颜色值;

说明：颜色值是一个关键字或一个16进制的RGB值。

有颜色的边框

边框简写

在实际中，一般都会使用简写，就要按照顺序来设置属性：border-width、border-style、border-color。

单独设置边框要素，写法很繁琐

没有使用简写

使用简写法，方便简洁

使用了简写

单独边框设置

可以分别针对上下左右四条边框设置单独的样式

border-top(上边框)、border-bottom(下边框)、border-left(左边框)、border-right(右边框)

单独设置

个性的边框

总结

下边框_css基础篇07--边框样式相关推荐

css 背景效果_css基础篇06--背景样式
在CSS中,背景样式主要包括背景颜色和背景图像.在传统的布局中,只能使用少数的标签来定义背景图像和背景颜色.但是随着Web2.0时代的到来,设置背景样式不再使用传统HTML属性来定义,转而使用无限制. ...
MySQL基础篇(07)：用户和权限管理，日志体系简介
本文源码:GitHub·点这里 || GitEE·点这里一.MySQL用户 1.基础描述在数据库的使用过程中,用户作为访问数据库的鉴权因素,起到非常重要的作用,安装MySQL时会自动生成一个roo ...
CSS如何设置高度为屏幕高度_CSS基础篇笔记
css简介 css全称"层叠样式表",是由李爵士的挪威同事赖先生(hakon wium lie)首先提出的: css版本 css1 1996年 css2 1998年 css2.1 ...
基础篇07—一文掌握css的盒子模型(margin、padding)
1.CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封装周围 ...
Linux环境下Shell脚本基础篇-鸡兔同笼问题
概述鸡兔同笼,是古代著名典型趣题之一,记载于<孙子算经>之中,题目为"有若干只鸡兔同在一个笼子里,从上面数,有35个头,从下面数,有94只脚.问笼中各有多少只鸡和兔?" ...
SPSS（基础篇07）--随机数生成器
随机数生成器文章目录随机数生成器前言 COMPUTE的函数随机数生成器--设定随机种子前言概述: 真随机数:(1)完全不可重现.不可预测的数据序列:(2)实际上,只要给定了边界条件,真随机 ...
前端开发工程师 - 03.DOM编程艺术 - 第1章.基础篇(下)
第1章.基础篇(下) Abstract: 数据通信.数据存储.动画.音频与视频.canvas.BOM.表单操作.列表操作数据通信(HTTP协议) HTTP事务: 客户端向服务器端发送HTTP请求报文 ...
如何给table表格的tr行加border边框（解决篇）
文章目录一.如何给table表格的tr行加border边框二.样式 bug - 截图示下三.解决办法: 四.关于属性 `border-collapse`的取值.解析一.如何给table表格的t ...
easypoi导出excel不设置样式_EasyPOI 导出excel设置边框，背景颜色，字体样式
EasyPOI 导出excel设置边框,背景颜色,字体样式 EasyPOI 导出代码示例ExportParams exportParams = new ExportParams(); exportPa ...

下边框_css基础篇07--边框样式