边框

border:边框的意思，描述盒子的边框

边框有三个要素： 粗细 线性样式 颜色

border: solid

border特性

如果颜色不写，默认是黑色。如果粗细不写，不显示边框。如果只写线性样式，默认的有上下左右 3px的宽度,实体样式，并且黑色的边框。

通常使用简写方式

border :solid     5px  red;

        线性样式   粗细   颜色
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

    <style type="text/css">

        .box{

            width: 200px;

            height: 200px;

            border:solid 5px red;

        }

    </style>

</head>

<body>

    <div class="box"></div>

</body>

</html>

如果颜色不写，默认是黑色
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

    <style type="text/css">

        .box{

            width: 200px;

            height: 200px;

            border:solid 5px;

        }

    </style>

</head>

<body>

    <div class="box"></div>

</body>

</html>

如果只写线性样式，默认的有上下左右 3px的宽度,实体样式，并且黑色的边框。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

    <style type="text/css">

        .box{

            width: 200px;

            height: 200px;

            border:solid ;

        }

    </style>

</head>

<body>

    <div class="box"></div>

</body>

</html>

border写法还可以分开写

按照3要素来写border

3个要素  粗细 线性样式 颜色

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

    <style type="text/css">

        .box{

            width: 200px;

            height: 200px;

            /*border: 5px solid red;*/

            /* 按照3要素*/

            border-width: 5px;

            border-style: solid;

            border-color: red;

        }

    </style>

</head>

<body>

    <div class="box"></div>

</body>

</html>

等于 border: 5px solid red

border-width: 3px;

border-style: solid;

border-color: red;

后面可以继续写，方向和padding一样 上右下左

border-width: 5px 10px;  /* 上下 左右*/

border-style: solid dotted double dashed; /* 上右下左 */

border-color: red green yellow; /* 上 左右 下 */

按照方向划分

四个方向

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

    <style type="text/css">

        .box{

            width: 200px;

            height: 200px;

            /* 按照方向划分*/

            border-top-width: 10px;

            border-top-style: solid;

            border-top-color: red;

            border-right-width: 10px;

            border-right-style: solid;

            border-right-color: red;

            border-bottom-width: 10px;

            border-bottom-style: solid;

            border-bottom-color: red;

            border-left-width: 10px;

            border-left-style: solid;

            border-left-color: red;

        }

    </style>

</head>

<body>

    <div class="box"></div>

</body>

</html>

上面12条语句，相当于 bordr: 10px solid red;

另外还可以这样写法 效果一样：

border-top: 10px solid red;

border-right: 10px solid red;

border-bottom: 10px solid red;

border-left: 10px solid red;

清除border边框的默认样式，比如input输入框

 border:none;

 border:0;

设置一个方向没有

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

    <style type="text/css">

        .box{

            width: 200px;

            height: 200px;

            border-top: 10px solid red;

            border-right: 10px solid red;

            border-bottom: 10px solid red;

            border-left: 10px solid red;

            /* 设置border没有样式*/

            border-left: none;

        }

    </style>

</head>

<body>

    <div class="box"></div>

</body>

</html>

border-left: 0; 也可以
border-left: 0;

边框样式

值 描述
none 无边框。
dotted 点状虚线边框。
dashed 矩形虚线边框。
solid 实线边框。

前端 CSS 盒子模型 边框 border属性的更多相关文章

  1. [Web 前端] CSS 盒子模型，绝对定位和相对定位

    cp : https://blog.csdn.net/web_yh/article/details/53239372 一.盒子模型: 标准模式和混杂模式(IE).在标准模式下浏览器按照规范呈现页面:在 ...

  2. 前端 CSS 盒子模型 目录

    CSS盒子模型介绍 padding border属性

  3. 前端 CSS 盒子模型

    盒模型的概念 在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和I ...

  4. 2 CSS盒子模型&边框&轮廓&外边距&填充&分组嵌套&尺寸&display与visibility

    盒子模型 Box  Model 所有HTML元素可以看做盒子,CSS模型本质上是一个盒子,封装周围的HTML元素 包括:边距,边框,填充和实际内容 盒子模型允许我们在其他元素和周围元素边框之间的空间放 ...

  5. css 盒子模型 以及 box-sizing属性

    在标准的盒子模型下,css中 width,padding以及border的关系 关于css中的width和padding以及border的关系. 在css中,width和height指的是内容区域的宽 ...

  6. 前端 CSS 盒子模型 padding 内边距 属性

    padding:就是内边距的意思,它是边框到内容之间的距离 另外padding的区域是有背景颜色的.并且背景颜色和内容区域的颜色一样.也就是说background-color这个属性将填充所有的bor ...

  7. <转>HTML+CSS总结/深入理解CSS盒子模型

    原文地址:http://www.chinaz.com/design/2010/1229/151993.shtml 前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverf ...

  8. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性　　定位（position）z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  9. div介绍 盒子模型边框属性 CSS初始化 文字排版 边框调整 溢出

    今天学习的div,了解了div是干什么用的掌握了什么是盒子模型,以及div的外边距内边距以及边框,运用div和CSS给文字排版,利用边框的来做图像,div溢出的处理 CSS初始化: 精确排版的时候用这 ...

随机推荐

  1. STM32Cube IDE配置串口发送与接收

    此项目源码下载地址:https://github.com/lizhiqiang0204/STM32CubeIDE_Uart 串口与中断配置如下 在生成的main函数中,添加开启串口接收中断 HAL_I ...

  2. big.js常用方法

    官网api:http://mikemcl.github.io/big.js/ +:minus.minus(n) ⇒ Big  %:mod.mod(n) ⇒ Big -:plus.plus(n) ⇒ B ...

  3. HDU-6546-Function（贪心）

    链接: https://vjudge.net/problem/HDU-6546 题意: wls 有 n 个二次函数 Fi(x) = aix2 + bix + ci (1 ≤ i ≤ n). 现在他想在 ...

  4. NOIP2016提高A组五校联考4总结

    坑爹的第一题,我居然想了足足3个小时,而且还不确定是否正确. 于是,我就在这种情况下心惊胆跳的打了,好在ac了,否则就爆零了. 第二题,树形dp,本来差点就想到了正解,结果时间不够,没打完. 第三题, ...

  5. 织梦dedecms自定义表单导出到excel教程

    不写死任何字段,不写死任何东西,修改2个文件,让织梦自定义表单自由导出到Excel表格里. 添加教程 1.\dede\templets\diy_main.htm 找到 前台预览</a> 在 ...

  6. 如何查看 mysql 的视图？

    1.查询表(包括view) mysql> use iips; Database changed mysql> show tables; +------------------------- ...

  7. jquery eq()选择器 语法

    jquery eq()选择器 语法 作用::eq() 选择器选取带有指定 index 值的元素.index 值从 0 开始,所有第一个元素的 index 值是 0(不是 1).经常与其他元素/选择器一 ...

  8. SQL高级教程-TOP 子句

    TOP 子句 TOP 子句用于规定要返回的记录的数目. 对于拥有数千条记录的大型表来说,TOP 子句是非常有用的. 注释:并非所有的数据库系统都支持 TOP 子句. SQL Server 的语法: S ...

  9. sh_05_非公勿入

    sh_05_非公勿入 # 练习3: 定义一个布尔型变量 is_employee,编写代码判断是否是本公司员工 is_employee = False # 如果不是提示不允许入内 # 在开发中,通常希望 ...

  10. 【Leetcode】爬楼梯

    问题: 爬n阶楼梯,每次只能走1阶或者2阶,计算有多少种走法. 暴力计算+记忆化递归. 从位置 i 出发,每次走1阶或者2阶台阶,记录从位置 i 出发到目标 n 所有的走法数量,memoA[i] .记 ...