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 ...
随机推荐
- 关于《SQLSERVER走起》微信账号自动回复功能的升级
关于SQLSERVER走起微信账号自动回复功能的升级 由于腾讯对微信公众账号的升级,本公众账号也增加了关键词自动回复功能, 只需要输入某些特定关键词,本公众账号就会进行自动回复. 例如: 输入 sql ...
- .NET 控制Windows文件和目录访问权限研究（FileSystemAccessRule）
前一段时间学习了.net 控制windows文件和目录权限的相关内容,期间做了一些总结.想把这方面的研究跟大家分享,一起学习.其中不免得有些用词不太标准的地方,希望大家留言指正,我加以修改. 首先,我 ...
- 【PAT】B1039 到底买不买（20）（20 分）
/* 琢磨了很久,当时还没做几道题,参考了柳婼的思路 */ #include<stdio.h> #include<string.h> char arr[1000]={'\0'} ...
- Mysql基础之 事务
MySql事务 Mysql事务主要处理操作量大,复杂度高的数据. Mysql事务需要注意的三点: 1.在mysql中只有使用innodb数据库引擎的数据库或表才支持事务 2.事务处理可以用来维护数据库 ...
- Nginx实现页面缓存
页面缓存 1.缓存指令 Nginx的缓存配置比较直观简单,具体有下面几个指令需要知道: A.proxy_cache_path 格式:proxy_cache_path path [levels=numb ...
- python scrapy爬取知乎问题和收藏夹下所有答案的内容和图片
上文介绍了爬取知乎问题信息的整个过程,这里介绍下爬取问题下所有答案的内容和图片,大致过程相同,部分核心代码不同. 爬取一个问题的所有内容流程大致如下: 一个问题url 请求url,获取问题下的答案个数 ...
- Win10上启动UICrawler自动遍历时报 "org.openqa.selenium.WebDriverException: An unknown server-side error occur red while processing the command. Original error: Could not sign with default certifi cate."
操作步骤: 1.直接启动 Appium (我用的是 version 1.10.0) 2.打开命令窗口,切换到 UICrawler 所在路径 3.执行命令 java -jar UICrawler-2.2 ...
- 23个Python爬虫开源项目代码
今天为大家整理了23个Python爬虫项目.整理的原因是,爬虫入门简单快速,也非常适合新入门的小伙伴培养信心.所有链接指向GitHub,祝大家玩的愉快 1.WechatSogou [1]– 微信公众号 ...
- Cocos2d-x CCControlPotentiometer之圆形音量button及特效
1. 圆形音量button 事实上作者的本意应该是叫做"电位计button".可是我觉得它和我们的圆形音量button非常像,所以就这么叫它吧~先看效果: 好了,不多解释,本篇到此 ...
- day22 Pythonpython 本文json模块
json模块 •应用场景: json模块主要用于处理json格式的数据,可以将json格式的数据转化为python的字典,便于python处理,同时也可以将python的字典或列表等对象转化为json ...