W3School-CSS 边框(border)实例
CSS 边框(border)实例
CSS 实例
- CSS 背景实例
- CSS 文本实例
- CSS 字体(font)实例
CSS 边框(border)实例- CSS 外边距 (margin) 实例
- CSS 内边距 (padding) 实例
- CSS 列表实例
- CSS 表格实例
- 轮廓（Outline） 实例
- CSS 尺寸 (Dimension) 实例
- CSS 分类 (Classification) 实例
- CSS 定位 (Positioning) 实例
- CSS 伪类 (Pseudo-classes)实例
- CSS 伪元素 (Pseudo-elements)实例
01所有边框属性在一个声明之中
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>01所有边框属性在一个声明之中</title>
<style type="text/css">
body{
background-color: #FF985E;
}
p{
border: medium double rgb(94,234,255);
}
</style>
</head>
<body>
<p>编点啥呢，真费脑筋啊！</p>
</body>
</html>
02设置四边框样式
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>02设置四边框样式</title>
<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: inset;}
p.outset{border-style: outset;}
</style>
</head>
<body>
<p class="dotted">我是dotted border</p>
<p class="dashed">我是dashed border</p>
<p class="solid">我是solid border</p>
<p class="double">我是double border</p>
<p class="groove">我是groove border</p>
<p class="ridge">我是ridge border</p>
<p class="inset">我是inset border</p>
<p class="outset">我是outset border</p>
</body>
</html>
03设置每一边的不同边框
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>03设置每一边的不同边框</title>
<style type="text/css">
p.soliddouble{border-style:solid double;}
p.doublesolid{border-style:double solid;}
p.groovedouble{border-style:groove double;}
p.three{border-style:solid double groove;}
</style>
</head>
<body>
<p class="soliddouble">两个参数：上下左右</p>
<p class="doublesolid">两个参数：上下左右</p>
<p class="groovedouble">两个参数：上下左右</p>
<p class="three">三个参数：上左右下</p>
</body>
</html>
04所有边框宽度属性在一个声明之中
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>04所有边框宽度属性在一个声明之中</title>
<style type="text/css">
body {
background-color: #FFEFBF;
}
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">"border-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框</p>
<p class="two">"border-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框</p>
<p class="three">"border-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框</p>
<p class="four">"border-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框</p>
<p class="five">"border-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框</p>
</body>
</html>
05设置四个边框的颜色
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>05设置四个边框的颜色</title>
<style type="text/css">
body {
background-color: #B2C5FF;
}
p.one {
border-style: solid;
border-color: #C3DB51;
}
p.two {
border-style: solid;
border-color: #C3DB51 #D863F2;
}
p.three {
border-style: solid;
border-color: #C3DB51 #D863F2 #E0E0F8;
}
p.four {
border-style: solid;
border-color: #C3DB51 #D863F2 #E0E0F8 #7787C5;
}
</style>
</head>
<body>
<p class="one">One-colored border!</p>
<p class="two">Two-colored border!</p>
<p class="three">Three-colored border!</p>
<p class="four">Four-colored border!</p>
</body>
</html>
06所有下边框属性在一个声明中
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>06所有下边框属性在一个声明中</title>
<style type="text/css">
body {
background-color: #DAFECB;
}
p {
border-style: solid;
border-bottom: thick dotted #FF0000;
}
</style>
</head>
<body>
<p>对对对这个人就是就是那个叫什么隆力奇！</p>
</body>
</html>
07设置下边框的颜色
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>07设置下边框的颜色</title>
<style type="text/css">
body {
background-color: #DAFECB;
}
p {
border-style: solid;
border-bottom-color: #FF0000;
}
</style>
</head>
<body>
<p>对对对就设置一个瞎编筐</p>
</body>
</html>
08设置下边框的样式
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>08设置下边框的样式</title>
<style type="text/css">
body {
background-color: #DAFECB;
}
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>
</html>
09设置下边框的宽度
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>09设置下边框的宽度</title>
<style type="text/css">
body {
background-color: #DAFECB;
}
p.one {
border-style: solid;
border-bottom-width: 15px;
}
p.two {
border-style: solid;
border-bottom-width: thin;
}
</style>
</head>
<body>
<p class="one">"border-bottom-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框。</p>
<p class="two">"border-bottom-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框。</p>
</body>
</html>
10所有左边框属性在一个声明之中
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>10所有左边框属性在一个声明之中</title>
<style type="text/css">
body {
background-color: #DAFECB;
}
p {
border-style: solid;
border-left: thick double #FF0000;
}
</style>
</head>
<body>
<p>我又来了哈哈
W3School-CSS 边框(border)实例的更多相关文章
- CSS 边框(border)实例
CSS 边框(border)实例:元素的边框 (border) 是围绕元素内容和内边距的一条或多条线. CSS border 属性允许你规定元素边框的样式.宽度和颜色. CSS 边框属性属性 描述bo ...
- 理解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 ...
随机推荐
- ❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️html，js随笔。❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️
a标签本身的文字居中. a{ display:block; text-align:center; } 设置div1在另一个div2里居中,(写了左边margin 就别写右边了不然ie6有毛病,当然本身 ...
- Java关于Properties用法的总结(一)
最近项目中有一个这样的需求,要做一个定时任务功能,定时备份数据库的操表,将表数据写入txt文件.因为文件的读写路径可能需要随时改动,所以写死或者写成静态变量都不方便,就考虑使用配置文件,这里总结些配置 ...
- 由一条Linux的grep命令说起
今天在开发的时候,看到同事使用了这样的一条linux命令 grep 'class YourClass' -rwi * |grep -v svn 想到了 grep命令的,几个参数. -r 明确要求搜索子 ...
- mysql hang and srv_error_monitor_thread using 100% cpu
昨天晚上,运维过来说有台生产服务器的mysql cpu一直100%,新的客户端登录不了,但是已经在运行的应用都正常可用. 登录服务器后,top -H看了下,其中一个线程的cpu 一直100%,其他的几 ...
- 【转】从MVC到前后端分离
1. 理解MVC MVC是一种经典的设计模式,全名为Model-View-Controller,即模型-视图-控制器. 其中,模型是用于封装数据的载体,例如,在Java中一般通过一个简单的POJO(P ...
- ECharts – 大数据时代，重新定义数据图表
ECharts 基于 Canvas 的纯 Javascript 图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算.数据视图.值域漫游等特性大大增强了用户体验,赋予了用户对 ...
- MontageJS：构建现代 Web App 的 HTML5 框架
MontageJS 可以帮助您构建高可扩展性和可维护性的 HTML5 应用.有了 MontageJS,开发人员可以创建可重用的用户界面组件和模块,组件和控制器之间的绑定属性,并且同步 DOM 查询和更 ...
- [deviceone开发]-do_GridView的简单示例
一.简介 do_GridView的高度支持-1,根据gridview里item的个数来决定gridview的高度,这样gridview自身就无法滚动了,需要放到固定高度的scrollview里才能滚动 ...
- asp.net面试题汇总
1.静态成员和非静态成员的区别? 答: 静态变量使用 static 修饰符进行声明,在类被实例化时创建,通过类进行访问不带有 static 修饰符声明的变量称做非静态变量,在对象被实例化时创建,通过对 ...
- Hybrid框架UI重构之路：五、前端那点事儿（HTML、CSS）
上文回顾 :Hybird框架UI重构之路:四.分而治之 这里讲述在开发的过程中,一些HTML.CSS的关键点. 单页模式的页面结构 在单页模式中,弱化HTML的概念,把HTML当成一个容器,BODY中 ...