CSS实例【五】

最新推荐文章于 2023-08-03 15:31:32 发布

虾尾丸子

最新推荐文章于 2023-08-03 15:31:32 发布

阅读量67

点赞数

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/yogurt_sweets/article/details/117998935

版权

前端专栏收录该内容

25 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		div.ex
		{
			width: 220px;
			padding: 10px;
			border: 5px solid  #d4927a;
			margin: 0px;
		}
		p.one
		{
			border-style: solid;
			border-width: 5px;
			border-bottom-width: 13px;
		}
		p.two
		{
			border-style: dotted dashed double groove;
			
		}
		p.three
		{
			border-style: solid;
			border-color: #ff9f58 #ff1b40 #e7f7ab #16b8d2;
		}
		p.four
		{
			border: 5px solid red;
		}
		p.five
		{
			border-style: solid;
			border-bottom: thick dotted #16B8D2;
		}
		p.six
		{
			border: 1px solid red;
			outline: green dotted thick;
		}
		#p{border: 0.0625rem solid #f00000;}
		#p.dashed{outline-style: dashed;}
		#p.double{outline-style: double;}
		#p.groove{outline-style: groove;}
		#p.ridge{outline-style: ridge;}
		#p.inset{outline-style: inset;outline-color: #fbcd72;outline-width: 0.3125rem;}
		#p.outset{outline: #66CFAE outset 0.5125rem;}
		p.margin{
			background-color: yellow;
			margin-top: 6.25rem;
			margin-right: 2cm;
			margin-bottom: 15%;
			margin-left: 4cm;
		}
		</style>
	</head>
	<body>
		<img src="sun.gif" width="250" height="250" />
		
		<div class="ex">这个盒子也是250*250，220+（10+5）*2</div>
			<h2>Css 边框</h2>
		<p class="one">"border-top-width" 单独使用没有效果. 要先使用 "border-style" 属性设置 borders.</p>
		<p class="two">边框的样式</p>
		<p class="three">边框的颜色</p>
		<p class="four">一个声明中的所有边框属性</p>
		<p class="five">在一个声明中所有下边框属性</p>
		<h2>css轮廓</h2>
		<p class="six">这是一个拥有点线轮廓的边框</p>
		<p id="p" class="dashed">虚线轮廓</p>
		<p id="p" class="double">双线轮廓</p>
		<p id="p" class="groove">凹槽轮廓</p>
		<p id="p" class="ridge">垄状轮廓</p>
		<p id="p" class="inset">嵌入轮廓</p>
		<p id="p" class="outset">外凸轮廓</p>
		<p class="margin">这是一个段落:margin为外边距，padding为填充。原则：1234=上下左右，123=上、左右、下，12=上下、左右，1=所有填充/外边距相同</p>
	</body>
</html>