CSS 边框(border)实例
CSS 边框(border)实例：
元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。 CSS border 属性允许你规定元素边框的样式、宽度和颜色。 CSS 边框属性
属性 描述
border 简写属性，用于把针对四个边的属性设置在一个声明。
border-style 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom 简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color 设置元素的下边框的颜色。
border-bottom-style 设置元素的下边框的样式。
border-bottom-width 设置元素的下边框的宽度。
border-left 简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color 设置元素的左边框的颜色。
border-left-style 设置元素的左边框的样式。
border-left-width 设置元素的左边框的宽度。
border-right 简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color 设置元素的右边框的颜色。
border-right-style 设置元素的右边框的样式。
border-right-width 设置元素的右边框的宽度。
border-top 简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color 设置元素的上边框的颜色。
border-top-style 设置元素的上边框的样式。
border-top-width 设置元素的上边框的宽度。 ################## 定义和用法
border-style 属性用于设置元素所有边框的样式，或者单独地为各边设置边框样式。 只有当这个值不是 none 时边框才可能出现。 例子 1
border-style:dotted solid double dashed;
上边框是点状
右边框是实线
下边框是双线
左边框是虚线
####################
可能的值
值 描述
none 定义无边框。
hidden 与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted 定义点状边框。在大多数浏览器中呈现为实线。
dashed 定义虚线。在大多数浏览器中呈现为实线。
solid 定义实线。
double 定义双线。双线的宽度等于 border-width 的值。
groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge 定义 3D 垄状边框。其效果取决于 border-color 的值。
inset 定义 3D inset 边框。其效果取决于 border-color 的值。
outset 定义 3D outset 边框。其效果取决于 border-color 的值。
inherit 规定应该从父元素继承边框样式。
########################## 1.所有边框属性在一个声明之中
本例演示用简写属性来将所有四个边框属性设置于同一声明中。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
p{border:medium double rgb(250,0,255)}
</style>
</head>
<body> <p>Some text</p>
</body> 2.设置四边框样式
本例演示如何设置四边框样式。
<style type="text/css">
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: outset}
</style>
</head>
<body>
<p class="dotted">A dotted border</p> <p class="dashed">A dashed border</p> <p class="solid">A solid border</p> <p class="double">A double border</p> <p class="groove">A groove border</p> <p class="ridge">A ridge border</p> <p class="inset">An inset border</p> <p class="outset">An outset border</p>
</body> 3.设置每一边的不同边框
本例演示如何在元素的各边设置不同的边框。
<style class="text/css">
p.soliddouble {border-style: solid double}
p.doublesolid {border-style: double solid}
p.groovedouble {border-style:groove double}
p.three {vorder-style:solid double groove}
</style>
</head>
<body>
<p class="soliddouble">Some text</p>
<P class="doublesolid">Some text</P>
<p class="groovedouble">Some text</p>
<p class="three">Some text</p>
</body> 4.所有边框宽度属性在一个声明之中
本例演示用简写属性来将所有边框宽度属性设置于同一声明中。
<style type="text/css">
p.one{border-style: solid;border-width: 5px;}
p.two{border-style:solid;border-width:thick}
p.three{border-style:solid;border-width:5px 10px}
p.four{border-style:solid;border-width:5px 10px 1px}
p.five{border-style: solid;border-width:5px 10px 1px medium}
</style>
</head>
<body>
<p class="one"> Some text</p>
<p class="two"> Some text</p>
<p class="three"> Some text</p>
<p class="four">Some text</p>
<p class="five">Some text</p> </body> 5.设置四个边框的颜色
本例演示如何设置四个边框的颜色。可以设置一到四个颜色。
<style type="text/css">
p.one {border-style:solid;
border-color: #0000ff;}
p.two{border-style:solid;border-color: #ff0000 #0000ff}
p.three{border-style:solid;border-color:#ff0000 #0000ff #00ff00}
p.four{border-style:solid;border-color:#ff0000 #00ff00 #0000ff rgb(250,0,255)}
</style>
</head>
<body>
<p class="one">Some text</p>
<p class="two"> Some text</p>
<p class="three"> Some text</p>
<p class="four">Some text</p>
</body> 6.所有下边框属性在一个声明中
本例演示用简写属性来将所有下边框属性设置在同一声明中。
<style type="text/css">
p{border-style:solid;border-bottom:thick dotted #ff0000} </style>
</head>
<body>
<p>This is some test</p>
</body> 7.设置下边框的颜色
本例演示如何设置下边框的颜色。
<style type="text/css">
p{border-style:solid;border-bottom-color:#ff0000}
</style>
</head>
<body>
<p>This is some text in a paragraph.</p> 8.设置下边框的样式
本例演示如何设置下边框的样式。
<title>Title</title>
<style type="text/css">
p {border-style:solid}
p.none {border-bottom-style:none}
p.dotted {border-bottom-style:dotted}
p.dashed {border-bottom-style:dashed}
p.solid {border-bottom-style:solid}
p.double {border-bottom-style:double}
p.groove {border-bottom-style:groove}
p.ridge {border-bottom-style:ridge}
p.inset {border-bottom-style:inset}
p.outset {border-bottom-style:outset}
</style>
</head>
<body> <p class="none">No bottom border.</p>
<p class="dotted">A dotted bottom border.</p>
<p class="dashed">A dashed bottom border.</p>
<p class="solid">A solid bottom border.</p>
<p class="double">A double bottom border.</p>
<p class="groove">A groove bottom border.</p>
<p class="ridge">A ridge bottom border.</p>
<p class="inset">An inset bottom border.</p>
<p class="outset">An outset bottom border.</p>
</body>
9.设置下边框的宽度
本例演示如何设置下边框的宽度。
<style type="text/css">
p.one{border-style: solid;border-bottom-width:15px}
p.two{border-style:solid;border-bottom-width:thin}
</style>
</head>
<body>
<p class="one"><b>注释</b>“border-nottom-widt” 属性如果单独使用得话是不会起作用的。请首先使用"border-style" 属性来设置边框</p>
<p class="two">Some text.</p>
</body> 10.所有左边框属性在一个声明之中
所有左边框属性在一个声明之中
<style type="text/css">
p{border-style:solid;border-left:thick double #ff0000;}
</style>
</head>
<body>
<P>This is some text</P>
</body> 11.设置左边框的颜色
本例演示如何设置左边框的颜色。 <style type="text/css">
p{border-style:solid;border-left-color: #ff0000}
</style>
</head>
<body>
<p>some text.</p>
</body> 12.设置左边框的样式
本例演示如何设置左边框的样式。
<style type="text/css">
p
{
border-style:solid;
}
p.none {border-left-style:none}
p.dotted {border-left-style:dotted}
p.dashed {border-left-style:dashed}
p.solid {border-left-style:solid}
p.double {border-left-style:double}
p.groove {border-left-style:groove}
p.ridge {border-left-style:ridge}
p.inset {border-left-style:inset}
p.outset {border-left-style:outset}
</style>
</head> <body>
<p class="none">No left border.</p>
<p class="dotted">A dotted left border.</p>
<p class="dashed">A dashed left border.</p>
<p class="solid">A solid left border.</p>
<p class="double">A double left border.</p>
<p class="groove">A groove left border.</p>
<p class="ridge">A ridge left border.</p>
<p class="inset">An inset left border.</p>
<p class="outset">An outset left border.</p>
</body> 13.设置左边框的宽度
本例演示如何设置左边框的宽度。 <style type="text/css">
p.one{border-style:solid;border-left-width:15px}
p.two{border-style:solid;border-left-width:thin}
</style>
</head>
<body>
<p class="one"><b>注释：</b>"border-left-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框。</p>
<p class="two">Some text. Some more text.</p> 14.所有右边框属性在一个声明之中
本例演示一个简写属性，用于把所有右边框属性设置在一条声明中。
<style type="text/css">
p {border-style:solid;border-right:thick double #ff0000;}
</style>
</head>
<body>
<p>This is some text </p>
</body> 15.设置右边框的颜色
本例演示如何设置右边框的颜色。 <style type="text/css">
p{border-style:solid;border-right-color:#ff0000}
</style>
</head>
<body>
<p>Some text.</p>
</body> 16.设置右边框的样式
本例演示如何设置右边框的样式。
<style type="text/css">
p.dotted {border-right-style: dotted}
p.dashed {border-right-style: dashed}
p.solid {border-right-style: solid}
p.double {border-right-style: double}
p.groove {border-right-style: groove}
p.ridge {border-right-style: ridge}
p.inset {border-right-style: inset}
p.outset {border-right-style: outset}
</style>
</head> <body>
<p class="dotted">A dotted border</p> <p class="dashed">A dashed border</p> <p class="solid">A solid border</p> <p class="double">A double border</p> <p class="groove">A groove border</p> <p class="ridge">A ridge border</p> <p class="inset">An inset border</p> <p class="outset">An outset border</p> 17.设置右边框的宽度
本例演示如何设置右边框的宽度。 <title>Title</title>
<style type="text/css">
p.one {border-style:solid;border-right-width:15px}
p.two{border-style:solid;border-right-width:thin}
</style>
</head>
<body>
<p class="one"><b>注释：</b>"border-right-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框。</p>
<p class="two">Some text. Some more text.</p>
18.所有上边框属性在一个声明之中
本例演示用简写属性来将所有上边框属性设置于同一声明之中。 p
{
border-style:solid;
border-top:thick double #ff0000;
}
</style>
</head> <body>
<p>This is some text in a paragraph.</p>
</body> 19.设置上边框的颜色
本例演示如何设置上边框的颜色。
<style type="text/css">
p.one {border-style:solid;border-right-width:15px}
p.two{border-style:solid;border-right-width:thin}
</style>
</head>
<body>
<p class="one"><b>注释：</b>"border-right-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框。</p>
<p class="two">Some text. Some more text.</p> 20.设置上边框的样式
本例演示如何设置上边框的样式。
<style type="text/css">
p
{
border-style:solid;
}
p.none {border-top-style:none}
p.dotted {border-top-style:dotted}
p.dashed {border-top-style:dashed}
p.solid {border-top-style:solid}
p.double {border-top-style:double}
p.groove {border-top-style:groove}
p.ridge {border-top-style:ridge}
p.inset {border-top-style:inset}
p.outset {border-top-style:outset}
</style>
</head> <body>
<p class="none">No top border.</p>
<p class="dotted">A dotted top border.</p>
<p class="dashed">A dashed top border.</p>
<p class="solid">A solid top border.</p>
<p class="double">A double top border.</p>
<p class="groove">A groove top border.</p>
<p class="ridge">A ridge top border.</p>
<p class="inset">An inset top border.</p>
<p class="outset">An outset top border.</p>
</body> 21.设置上边框的宽度
本例演示如何设置上边框的宽度。 <style type="text/css">
p.one
{
border-style: solid;
border-top-width: 15px
}
p.two
{
border-style: solid;
border-top-width: thin
}
</style>
</head> <body>
<p class="one"><b>注释：</b>"border-top-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框。</p>
<p class="two">Some text. Some more text.</p>
</body>
CSS 边框(border)实例的更多相关文章
- W3School-CSS 边框(border)实例
CSS 边框(border)实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin) 实例 CSS 内边 ...
- 理解CSS边框border
前面的话 边框是CSS盒模型属性中默默无闻的一个普通属性,CSS3的到来,但得边框属性重新焕发了光彩.本文将详细介绍CSS边框 基础样式 边框是一条以空格分隔的集合样式,包括边框粗细(边框宽度 ...
- css盒子模型、边框border、外边距margin、填充padding、轮廓outline
盒子模型:盒子默认的宽度为容器的宽度,也可以自省设定宽度,高度根据内容适应,也可以自行设定高度.min-height设定最小高度 一个盒子包括外边距.边框.内边距和实际内容 Margin(外边距):清 ...
- 前端 CSS 盒子模型 边框 border属性
边框 border:边框的意思,描述盒子的边框 边框有三个要素: 粗细 线性样式 颜色 border: solid border特性 如果颜色不写,默认是黑色.如果粗细不写,不显示边框.如果只写线性样 ...
- CSS 边框
CSS 边框属性 CSS边框属性允许你指定一个元素边框的样式和颜色. 边框样式 边框样式属性指定要显示什么样的边界. border-style属性用来定义边框的样式 border-style 值: ...
- CSS 的 border 样式
制作过网页的人都有为画线而烦恼的经历,先来认识一下“Border”(画边框),它是CSS的一个属性,用它可以给能确定范围的HTML标记(如TD.DIV等等)画边框,它可以定义边框线的类型.宽度和颜色, ...
- CSS 分类 (Classification) 实例
CSS 分类 (Classification) 实例CSS 分类属性 (Classification)CSS 分类属性允许你控制如何显示元素,设置图像显示于另一元素中的何处,相对于其正常位置来定位元素 ...
- html5--6-40 CSS边框
html5--6-40 CSS边框 实例 div动态阴影 学习要点 掌握CSS边框属性的使用 元素的边框就是围绕元素内容和内边距的一条或多条线. 元素的边框属性: border 简写属性,用于把针对四 ...
- CSS：CSS 边框
ylbtech-CSS:CSS 边框 1.返回顶部 1. CSS 边框 CSS 边框属性 边框样式 边框样式属性指定要显示什么样的边界. border-style属性用来定义边框的样式 border ...
随机推荐
- datagridview 行高列宽的自动设置
1) 设定行高和列宽自动调整 [C#]// 设定包括Header和所有单元格的列宽自动调整 DataGridView1.AutoSizeColumnsMode = DataGridViewAutoSi ...
- 用友U8年度账结转 常用凭证丢失
用友年度账结转常用凭证丢失解决方法 1.将新年度账两个表备份后清空:gl-bfreq和gl-bfreqinfo 2.复制旧年度账中gl-bfreq和gl-bfreqinfo两个表数据到新年度账即可.
- January 28th, 2018 Week 05th Sunday
I wish you all I ever wanted for you, I wish you the best. 我希望你不负我的期望,愿你一切安好. I hope I can live up t ...
- mysql字符串查询常用命令
对于针对字符串位置的操作,第一个位置被标记为1. ASCII(str) 返回字符串str的最左面字符的ASCII代码值.如果str是空字符串,返回0.如果str是NULL,返回NULL. mysql' ...
- （下一篇博客）提示5G信道
原本注册这个博客是要不定期更新一些产品的测试内容的 但由于一些个人原因并没有坚持去做到, 每次有点子的时候却没能来得及记下来导致很内容的缺失 接下来将关键点以图片形式 和一些摘要形式先发上来, 已做备 ...
- OutputStreamWriter与InputStreamReader（转换流）的编码解码
import java.io.FileInputStream; import java.io.FileNotFoundException; import java.io.FileOutputStrea ...
- Python中的 redis keyspace 通知
介绍 Redis是内存中的数据结构存储,用于缓存.高速数据摄取.处理消息队列.分布式锁定等等. 与其他内存存储相比,使用Redis的优势在于它提供了持久性和数据结构,比如列表.集合.排序集合和散列. ...
- MyISAM to InnoDB: Why and How（MYSQL官方译文）
原文地址:https://www.mysql.com/why-mysql/presentations/myisam-2-innodb-why-and-how/ MySQL使用一个插拔式的存储引擎架构, ...
- QT 13 窗口屏幕设置大小与居中显示
<pre name="code" class="cpp">#include "mainwindow.h" #include &l ...
- Appium——处理混合APP中H5的操作
https://blog.csdn.net/iiyting/article/details/51887488