前端 CSS 盒子模型 边框 border属性
边框
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属性的更多相关文章
- [Web 前端] CSS 盒子模型，绝对定位和相对定位
cp : https://blog.csdn.net/web_yh/article/details/53239372 一.盒子模型: 标准模式和混杂模式(IE).在标准模式下浏览器按照规范呈现页面:在 ...
- 前端 CSS 盒子模型 目录
CSS盒子模型介绍 padding border属性
- 前端 CSS 盒子模型
盒模型的概念 在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和I ...
- 2 CSS盒子模型&边框&轮廓&外边距&填充&分组嵌套&尺寸&display与visibility
盒子模型 Box Model 所有HTML元素可以看做盒子,CSS模型本质上是一个盒子,封装周围的HTML元素 包括:边距,边框,填充和实际内容 盒子模型允许我们在其他元素和周围元素边框之间的空间放 ...
- css 盒子模型 以及 box-sizing属性
在标准的盒子模型下,css中 width,padding以及border的关系 关于css中的width和padding以及border的关系. 在css中,width和height指的是内容区域的宽 ...
- 前端 CSS 盒子模型 padding 内边距 属性
padding:就是内边距的意思,它是边框到内容之间的距离 另外padding的区域是有背景颜色的.并且背景颜色和内容区域的颜色一样.也就是说background-color这个属性将填充所有的bor ...
- <转>HTML+CSS总结/深入理解CSS盒子模型
原文地址:http://www.chinaz.com/design/2010/1229/151993.shtml 前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverf ...
- {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性 定位（position）z-index
前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...
- div介绍 盒子模型边框属性 CSS初始化 文字排版 边框调整 溢出
今天学习的div,了解了div是干什么用的掌握了什么是盒子模型,以及div的外边距内边距以及边框,运用div和CSS给文字排版,利用边框的来做图像,div溢出的处理 CSS初始化: 精确排版的时候用这 ...
随机推荐
- 微信支付-无法识别qrcode生成的二维码图片
1.开始使用 table方式,但是还是无法识别二维码 http://www.cnblogs.com/staticed/p/8549316.html var code_url = data.code_ ...
- 【转】js监听浏览器离开页面操作
[转]https://www.cnblogs.com/slly/p/7991474.html 序言 大家是否经常遇到在关闭网页的时候,会看到一个确定是否离开当前页面的提示框?想一些在线测试系统.信息录 ...
- Linux 性能测试工具Lmbench详解
Linux 性能测试工具Lmbench详解 2010-06-04 16:07 佚名 评测中心 字号:T | T Lmbench 是一套简易可移植的,符合ANSI/C 标准为UNIX/POSIX 而制定 ...
- default关键字
default关键字在JDK8中有两个用处. 1.在switch语句的时候使用default int gender = 3; String genderString; switch (gender) ...
- ios获取系统当前日期并以一定格式显示
NSDate *date=[NSDate date]; NSDateFormatter *dateformatter=[[NSDateFormatter alloc] init]; [dateform ...
- iOS给UIView添加点击事件
我要给一个UIView对象topView添加点击事件,方法如下: 步骤1:创建手势响应函数 (void)event:(UITapGestureRecognizer *)gesture { //处理事件 ...
- c# 谷歌动态口令对接
https://www.cnblogs.com/easyauthor/p/11054869.html Google 身份验证器与两步验证功能配合,可在您登录 Google 帐户时为您平添一重安全保障. ...
- 2019春Python程序设计作业2(0326--0401)
1-1 已知st="Hello World!",使用print(st[0:-1])语句可以输出字符串变量st中的所有内容. (2分) T F 1-2 Python程 ...
- js 反斜杠 处理
var t = jsonstr.replace(/\\/g,"\\\\\\\\"); --\\ 表示 代码 输出 \' 单引号 \" 双引号 \& 和号 \\ 反 ...
- jquery gt选择器 语法
jquery gt选择器 语法 作用::gt 选择器选取 index 值高于指定数的元素.index 值从 0 开始.经常与其他元素/选择器一起使用,来选择指定的组中特定序号之后的元素(如上面的例子) ...