css属性之边框属性

原创 2016年08月28日 20:20:55

本篇小结css属性的边框属性的一些使用方法。

<html>
	<head>
		<title>CSS常见属性(边框属性)</title>
		<meta charset="utf-8">
		<style type="text/css">
			div{
				width:50px;
				height:50px;
				float:left;
				margin-right:10px;
				background-color:#f61;
				border-width:10px;
				
				border-color:green blue yellow black; /*green blue yellow black代表边框四个方向的颜色*/
				
			}
			.div0{
				border-style:solid;
				border-width:5px;  /*border-width边框宽度*/
			}
			.div1{
			border-top-style:solid;  /*solid直线边框*/
			}
			.div2{
				border-bottom-style:dashed; /*dashed虚线边框*/
			}
			.div3{
			border-left-style:dotted;  /*dotted点状边框*/
			}
			.div4{
				border-left-style:dotted;
				border-right-style:double;  /*double双线边框*/
			}
			.div5,.div6,.div7,.div8{
				
				width:85px;
				height:45px;
				/*border-width:20px;
				background:none;
				border-color:#ddd;*/
				border:solid 2px black;	/*简写的方式*/
				
			}
			.div5{
				border-style:groove; /*groove是凸槽边框*/
			}
			.div6{
				border-style:ridge;  /*ridge是垄状边框*/
			}
			.div7{
				border-style:inset;  /*inset是inset边框*/
			}
			.div8{
				border-style:outset;
			}
		</style>
	</head>
	<body>
		<div class="div0">div0</div>
		<div class="div1">solid</div>
		<div class="div2">dashed</div>
		<div class="div3">dotted</div>
		<div class="div4">double</div>
		<div class="div5">凸槽边框</div>
		<div class="div6">垄状边框</div>
		<div class="div7">inset</div>
		<div class="div8">outset</div>
	</body>
</html>


版权声明:本文为博主原创文章,未经博主允许不得转载。

CSS框模型(盒子模型)padding与border属性

框结构模型图一: 元素框的最内部分是实际的内容,直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素。 ...
  • wujiancanling
  • wujiancanling
  • 2013年06月11日 12:06
  • 2003

CSS中元素的边框border属性

元素的边框一般用来分隔页面的各个部分,在CSS中,边框属性可以分为以下几个属性,包括边框样式(border-style),边框宽度(border-width), 边框颜色(border-color)...
  • woshisap
  • woshisap
  • 2013年01月08日 16:53
  • 3183

CSS--两种盒子模型以及border属性

盒模型(box model) 概述: margin(-TopRightBottomLeft), padding(-TRBL),border(TRBL+style|color|width), box...
  • cat_foursi
  • cat_foursi
  • 2017年05月04日 22:05
  • 1565

CSS属性之边框与列表

本篇,首先来介绍的是边框属性,内容比较多,还基本还是很简单的。 代码演示: CSS属性之边框 div{ ...
  • lxjstudyIT
  • lxjstudyIT
  • 2016年09月04日 09:24
  • 184

HTML5基础加强css样式篇(css属性border详解:图片边框border-image-slice,border-image-repeat,border-image-width(二))(三十四)

1.图片边框:可以使用图片制作边框 先通过四根线把图片分成九份,中间一份为内容区域;其他分别对应边框的对应部分; 分割线属性: border-image-slice 代码如下: ...
  • u010853130
  • u010853130
  • 2017年04月06日 15:14
  • 282

css属性大全总结

  • 2017年12月15日 14:31
  • 70KB
  • 下载

Css属性文档

  • 2012年10月20日 13:39
  • 49KB
  • 下载

css属性文档

  • 2015年07月22日 17:43
  • 6KB
  • 下载

css属性大全

  • 2014年08月14日 11:52
  • 1.64MB
  • 下载

css属性表,非常详细

  • 2011年05月11日 10:57
  • 3KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css属性之边框属性
举报原因:
原因补充:

(最多只允许输入30个字)