css边框样式

最新推荐文章于 2022-09-29 19:18:53 发布

PBOVE

最新推荐文章于 2022-09-29 19:18:53 发布

阅读量303

点赞数

分类专栏： html 文章标签： css边框样式

本文链接：https://blog.csdn.net/qq_41158699/article/details/91049819

版权

html 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style>
			ol{
				width: 500px;
				margin: 0 auto; 
				padding: 8px 24px;
				margin: 6px;
				border:4px outset #aaa;
				list-style-position:inside;
			}
			h2{
				text-align: center;
				padding-bottom:12px;
				border-bottom:5px double #f40; 
			}
			li{
				padding: 4px 0;
				margin:8px 0; 
			}
			li:first-of-type{
				border-bottom: none;
			}
			li:nth-of-type(2){
				border-bottom:2px hiddle #000;
			}
			li:nth-of-type(3){
				border-bottom:2px dotted #000;
			}
			li:nth-of-type(4){
				border-bottom:2px dashed #000;
			}
			li:nth-of-type(5){
				border-bottom:2px solid #000;
			}
			li:nth-of-type(6){
				border-bottom:4px double #000;
			}
			li:nth-of-type(7){
				border:5px groove red;
			}
			li:nth-of-type(8){
				border: 5px ridge red;
			}
			li:nth-of-type(9){
				border: 5px inset red;
			}
			li:nth-of-type(10){
				border: 5px outset red;
			}
		</style>
			
	</head>
	<body>
		<ol>
			<h2>边框样式应用</h2>
			<li>none:默认值,无边框,不受任何指定的border-width值的影响</li>
			<li>hiddle:隐藏边框,IE不支持</li>
			<li>dotted:定义点线</li>
			<li>dashed:定义虚线</li>
			<li>solid:定义实线</li>
			<li>double:定义双实线边框,两条线及其间隔宽度之和等于boder-width的</li>
			<li>groove:根据border-color值定义D凹槽</li>
			<li>ridge:根据border-color值定义D凸槽</li>
			<li>inset:根据border-color值定义D凹边</li>
			<li>outset:根据border-color值定义D凸边</li>
		</ol>
	</body>
</html>

PBOVE

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css边框样式

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <styl...
复制链接

扫一扫