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)实例的更多相关文章
	

    
						
  1. CSS 边框(border)实例
		
    CSS 边框(border)实例:元素的边框 (border) 是围绕元素内容和内边距的一条或多条线. CSS border 属性允许你规定元素边框的样式.宽度和颜色. CSS 边框属性属性 描述bo ...
    
		
    2. 
								
  2. 理解CSS边框border
		
    前面的话   边框是CSS盒模型属性中默默无闻的一个普通属性,CSS3的到来,但得边框属性重新焕发了光彩.本文将详细介绍CSS边框 基础样式   边框是一条以空格分隔的集合样式,包括边框粗细(边框宽度 ...
    
		
    3. 
						
  3. css盒子模型、边框border、外边距margin、填充padding、轮廓outline
		
    盒子模型:盒子默认的宽度为容器的宽度,也可以自省设定宽度,高度根据内容适应,也可以自行设定高度.min-height设定最小高度 一个盒子包括外边距.边框.内边距和实际内容 Margin(外边距):清 ...
    
		
    4. 
						
  4. 前端 CSS 盒子模型 边框 border属性
		
    边框 border:边框的意思,描述盒子的边框 边框有三个要素: 粗细 线性样式 颜色 border: solid border特性 如果颜色不写,默认是黑色.如果粗细不写,不显示边框.如果只写线性样 ...
    
		
    5. 
						
  5. CSS 边框
		
    CSS 边框属性 CSS边框属性允许你指定一个元素边框的样式和颜色. 边框样式 边框样式属性指定要显示什么样的边界.  border-style属性用来定义边框的样式 border-style 值:  ...
    
		
    6. 
						
  6. CSS 的  border  样式
		
    制作过网页的人都有为画线而烦恼的经历,先来认识一下“Border”(画边框),它是CSS的一个属性,用它可以给能确定范围的HTML标记(如TD.DIV等等)画边框,它可以定义边框线的类型.宽度和颜色, ...
    
		
    7. 
						
  7. CSS 分类 (Classification) 实例
		
    CSS 分类 (Classification) 实例CSS 分类属性 (Classification)CSS 分类属性允许你控制如何显示元素,设置图像显示于另一元素中的何处,相对于其正常位置来定位元素 ...
    
		
    8. 
						
  8. html5--6-40 CSS边框
		
    html5--6-40 CSS边框 实例 div动态阴影 学习要点 掌握CSS边框属性的使用 元素的边框就是围绕元素内容和内边距的一条或多条线. 元素的边框属性: border 简写属性,用于把针对四 ...
    
		
    9. 
						
  9. CSS：CSS 边框
		
    ylbtech-CSS:CSS 边框 1.返回顶部 1. CSS 边框 CSS 边框属性 边框样式 边框样式属性指定要显示什么样的边界.  border-style属性用来定义边框的样式 border ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. MongoDB-query查询接口
			
    在上一篇中简要使用了C# 对MongoDB进行数据操作,这里补充一些MongoDB query查询条件文档: Query.All("name", "a",&qu ...
    
			
    2. 
						
  2. 【转】ubuntu源码编译安装php常见错误解决办法
			
    ./configure -prefix=/usr/local/php -with-config-file-path=/etc -with-mysql=mysqlnd -with-mysqli=mysq ...
    
			
    3. 
						
  3. android 查找某个特定文件后缀名
			
    private void queryFiles(){ String[] projection = new String[] { MediaStore.Files.FileColumns._ID, Me ...
    
			
    4. 
						
  4. socket.io，环境搭建 & Hello world
			
    原文:http://www.cnblogs.com/xiezhengcai/p/3955827.html socket.io 一个与服务器实时通信的工具,它与原生的webSocket相比,具有更可靠. ...
    
			
    5. 
						
  5. p7-p8面试经验总结--拿到offer
			
    简单的介绍下p7-p8之间的面试经验 整体的过程基本上所有的面试都是类似的,分为如下: 1.自我介绍: 2.相关问题讨论和交流: 3.谈薪资: 0.去面试的是架构师,最后来了两个面试官.最后拿到off ...
    
			
    6. 
						
  6. 06Mybatis_入门程序——根据用户的名字模糊查询返回List集合
			
    本篇论文讲的是模糊查询然后返回的是一个list集合. 这片文章的案例是基于上一篇文章的,所以主要修改两处地方就可以了. 1.user.xml 2.Mybatis_first.java user.xml ...
    
			
    7. 
						
  7. Droidicon – 1600+ 漂亮的 Android 图标
			
    Droidicon 提供超过1600款定制图标,让你可以超级容易的把图标和徽章添加到您的应用程序中.你可以自定义你想要的各种形式的图标,给图标添加描边,透明度和颜色过滤器.包括这些 Google Ma ...
    
			
    8. 
						
  8. 2013年最新流行的响应式 WordPress 主题【下篇】
			
    在这篇文章中,我们收集了一些在2013年发布的最好的免费的响应式 WordPress 主题.这些主题包括高级功能,如自定义模板.自定义窗口小部件.自定义菜单主题选项等.让我们来看看下面的清单,并希望你 ...
    
			
    9. 
						
  9. C#仿google日历asp.net简单三层版本
			
    网上搜了很多xgcalendar的例子都是Php开发的,而且官方站上的asp.net/MVC版 在vs10 08 都报错. 所以自己重新用三层写了一下希望对大家有帮助 废话不多说了 先看看它都有些什么 ...
    
			
    10. 
						
  10. Dynamics AX7 materials
			
    Dynamics AX community https://community.dynamics.com/ax Dynamics AX Wiki https://ax.help.dynamics.co ...
    
			
    11.