border——边框属性
一、第一层次（复合样式）
<style>
p.one{border:1px solid black;}
/*边框:1像素 实心的 黑色；*/
</style> <body>
<p class="one">边框:1像素 实心的 黑色;</p>
</body>
运行效果图:
二、第二层次（边框三要素：宽度、样式、颜色）
2.1、边框宽度
<style>
p.one{
border:1px solid black;
border-width:10px 20px 30px 40px;
}
/*边框宽度:上 右 下 左；*/
</style> <body>
<p class="one">边框宽度:上 右 下 左；</p>
</body>
运行效果图:
2.2、边框样式
<style>
p{border-width:10px;}
p.none {border-style:none;}
p.dotted {border-style:dotted;}
p.dashed {border-style:dashed;}
p.solid {border-style:solid;}
p.double {border-style:double;}
p.groove {border-style:groove;}
p.ridge {border-style:ridge;}
p.inset {border-style:inset;}
p.outset {border-style:outset;}
p.hidden {border-style:hidden;}
</style> <body>
<p class="none">无边框none</p>
<p class="dotted">虚线边框dotted</p>
<p class="dashed">虚线边框dashed</p>
<p class="solid">实线边框solid</p>
<p class="double">双边框double</p>
<p class="groove"> 凹槽边框groove</p>
<p class="ridge">垄状边框ridge</p>
<p class="inset">嵌入边框inset</p>
<p class="outset">外凸边框outset</p>
<p class="hidden">隐藏边框hidden</p>
</body>
运行效果图：
2.3、边框颜色
支持三种形式：name - 指定颜色的名称，如 "red" ； RGB - 指定 RGB 值, 如 "rgb(255,0,0)" ；Hex - 指定16进制值, 如 "#ff0000"。
另外，也可以设置为"transparent"，与父级颜色一致，可以理解为透明。
<style>
p{width:400px;border-width:10px;border-style:solid;}
p.red {border-color:red;}
p.green {border-color:rgb(0,155,0);}
p.blue {border-color:#3366FF;}
</style> <body style="background: #ccc;">
<p class="red">红色边框</p>
<p class="green">绿色边框</p>
<p class="blue">蓝色边框</p>
</body>
运行效果图：
2.4、边框的宽度|样式|颜色，分别可以设置一至四个值。下面以边框样式为例：
三、第三层次（方向）
<style>
p{width:400px;height:200px;} /*方向复合样式*/
.one{
border-top:1px solid #000;
border-right:2px dotted red;
border-bottom:3px solid deeppink;
border-left:4px dashed green;
}
/*方向分层样式 可以同样的方式设置*/
.two{
border-top-width:1px;
border-top-style:solid;
border-top-color:#000;
border-right-width:2px;
border-right-style:dotted;
border-right-color:red;
border-bottom-width:3px;
border-bottom-style:solid;
border-bottom-color:deeppink;
border-left-width:4px;
border-left-style:dashed;
border-left-color:green;
} </style> <body>
<p class="one">方向复合样式</p>
<p class="two">方向分层样式 可以同样的方式设置</p>
</body>
运行效果图：
四、注意事项
在【同一个容器】下四条边框【相邻】且【颜色不一样时】,会出现梯形。
<style>
div{
width: 200px;
height: 70px;
border-width: 20px;
border-style: solid;
border-color: yellow green blue black;
}
</style>
运行效果如图：
利用边框的这一特性，我们可以做出三角形。
<style>
div{
width: 0;
height: 0;
overflow: hidden;
border-width: 100px;
border-color: transparent transparent #ccc transparent;
border-style: dashed dashed solid dashed;
}
</style>
运行效果如图：
五、兼容
1、边框宽度（border-width）、边框颜色（border-color）、边框方向（border-top|right|bottom|left）以及复合样式|分层样式，全兼容。
2、边框样式（border-style）：
2.1、IE6支持solid、dashed、2px以上的dotted(1px不支持，截图平铺解决)、3px以上的double(1px和2px不支持，截图平铺解决)，3D样式需要设置宽度才能更好的显示。
2.2、标准浏览器以及IE7以上，支持solid、dashed、dotted、3px以上的double(1px和2px不支持，截图平铺解决)，3D样式需要设置宽度才能更好的显示。
border——边框属性的更多相关文章
- border边框属性
边框属性: 边框宽度(border-width):thin.medium.thick.长度值 边框颜色(border-color):颜色.transparent(透明) 边框样式(border-sty ...
- CSS border边框属性教程(color style)
CSS 边框即CSS border-border边框样式颜色.边框样式.边框宽度的语法结构与应用案例教程篇 一.CSS 边框基础知识 CSS 边框即CSS border是控制对象的边框边线宽度.颜色. ...
- CSS .css边框属性（border）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS3——盒子模型 border(边框) 轮廓(outline)属性 margin外边距 padding填充
盒子模型 包括——边距,边框,填充,和实际内容 Margin(外边距) - 清除边框外的区域,外边距是透明的. Border(边框) - 围绕在内边距和内容外的边框. Padding(内边距) - 清 ...
- border边框的宽度/样式/颜色 全部值
border 用emmet写border的时候, 缩写是:bd. 不是b, 也不是bdr: b会扩展成bottom, bdr 会扩展成 border-right, border的宽度: 1px 基本上 ...
- css3设置边框属性
css设置边框属性:设置边框圆角 <!DOCTYPE html> <html> <head lang="en"> <meta charse ...
- CSS的背景属性和边框属性
CSS的背景属性: background 简写属性,作用是将背景属性设置在一个声明中 background-attachment 背景图像是否固定或者随着页面的其余部分滚动 background-co ...
- div介绍 盒子模型边框属性 CSS初始化 文字排版 边框调整 溢出
今天学习的div,了解了div是干什么用的掌握了什么是盒子模型,以及div的外边距内边距以及边框,运用div和CSS给文字排版,利用边框的来做图像,div溢出的处理 CSS初始化: 精确排版的时候用这 ...
- padding(内边框), border(边框), margin, 标准文档流, 块级元素和行内元素, 浮动 ,margin的用法
盒模型 在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和IE模型 ...
随机推荐
- Mac快捷键大全及cheatsheet插件
常用快捷键 CheatSheet 在微信上看到一篇文章分享了一款小软件,觉得有必要推荐一下.名叫CheatSheet.如果你想知道某程序的所有快捷键,只需在Mac上安装CheatSheet,然后长按住 ...
- Python时间、日期、时间戳之间的转换
一.字符串与为时间字符串之间的互相转换 方法:time模块下的strptime方法 a = "2012-11-11 23:40:00" # 字符串转换为时间字符串 import t ...
- 在ABP中使用linq
private IQueryable<MembershipEntity> SelectOrScrrenMember(GetMemberInput input) { string[] use ...
- [js]js设计模式小结
js设计模式小结 工厂模式/构造函数--减少重复 - 创建对象有new - 自动创建obj,this赋值 - 无return 原型链模式 - 进一步去重 类是函数数据类型,每个函数都有prototyp ...
- 580A
#include <stdio.h> #include <string.h> #define MAXSIZE 100024//之前数据少开了一个量级 int money[MAX ...
- python 对反斜杠的处理问题
首先,"/"左倾斜是正斜杠,"\"右倾斜是反斜杠,可以记为:除号是正斜杠一般来说对于目录分隔符,Unix和Web用正斜杠/,Windows用反斜杠,但是现在Wi ...
- C#-----类FileStream的使用
1.枚举类FileMode 指定操作系统打开文件的方式 CreateNew 指定操作系统应创建一个新的文件 Create 指定操作系统应创建一个新的文件. 如果该文件已存在,则会覆盖它 Open ...
- react和vue，angular的比较
就这几天我所了解到react情况和大家探讨一下子react的知识: react由facebook团队维护的一套框架,已经应用在instagram网站上了,react以其独特的性能优化方案,正在被越来越 ...
- 将Bdd100k数据集转为CoCo数据集
小可爱,加油噻~ 添加上级目录 import sys sys.append('../..') 这样 from ... import 就会把加入的路径要扫描哒 os.walk() 方法用于通过在目录树中 ...
- 使用solr进行配置文件
我现在使用的是一个已经搭建好的solr环境下进行的测试: 第一步,需要配置solrhome中的一个配置文件schema.xml 配置内容如下,上面配置的是IK分词器,下面是配置完成的域. 因为我在这个 ...