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. Mysql存储过程（四）——异常处理
			
    http://blog.csdn.net/crazylaa/article/details/5368421 有时候,不希望存储过程抛出错误中止执行,而是希望返回一个错误码. MySQL 支持异常处理, ...
    
			
    2. 
						
  2. HDU  5510---Bazinga（指针模拟）
			
    题目链接 http://acm.hdu.edu.cn/search.php?action=listproblem Problem Description Ladies and gentlemen, p ...
    
			
    3. 
						
  3. Statement和PreparedStatement的区别; 什么是SQL注入，怎么防止SQL注入？
			
    问题一:Statement和PreparedStatement的区别 先来说说,什么是java中的Statement:Statement是java执行数据库操作的一个重要方法,用于在已经建立数据库连接 ...
    
			
    4. 
						
  4. 使用loadrunner进行压力测试之----post请求
			
    1. 发送post请求时使用web_submit_data 如: web_submit_data("create",//事务名 "Action=http://bizhi. ...
    
			
    5. 
						
  5. Java资源大全
			
    古董级工具 这些工具伴随着Java一起出现,在各自辉煌之后还在一直使用. Apache Ant:基于XML的构建管理工具. cglib:字节码生成库. GlassFish:应用服务器,由Oracle赞 ...
    
			
    6. 
						
  6. php 相关模块备忘
			
    在安装php的时候,不管是编译安装: ./configure --prefix=/usr/local/php --with-config-file-path=/usr/local/php/etc -- ...
    
			
    7. 
						
  7. 简单两句话解释下prototype和__proto__
			
    先上两句代码: var Person = function () {}; var p = new Person(); 把new的过程拆分成以下三步: <1> var p={}; 也就是说, ...
    
			
    8. 
						
  8. MSCRM 用户登录日志
			
    MSCRM中关于用户登录信息,默认是不显示的,但是许多客户又有相关的需求. 下面将介绍给大家方法: 一.开启系统审核功能和用户访问审核. 二.打开设置中审核视图. 三.在过滤事件中选择“用户通过web ...
    
			
    9. 
						
  9. 100个高质量Java开发者博客
			
    ImportNew注:原文中还没有100个.作者希望大家一起来推荐高质量的Java开发博客,然后不段补充到这个列表.欢迎你也参与推荐优质的Java开发博客.(声明一下:我们的数学不是体育老师教的!:) ...
    
			
    10. 
						
  10. Android View各种尺寸位置相关的方法探究
			
    Android View各种尺寸位置相关的方法探究 本来想做一个View间的碰撞检测之类的. 动手做了才发现不是想象的那么简单. 首先,写好了碰撞检测的工具类如下: package com.mengd ...
    
			
    11.