HTML-CSS（九）边框样式的使用

最新推荐文章于 2021-08-28 22:52:43 发布

每天进步一大步

最新推荐文章于 2021-08-28 22:52:43 发布

阅读量171

点赞数

分类专栏： HTML CSS

本文链接：https://blog.csdn.net/weixin_44730244/article/details/115853906

版权

HTML 同时被 2 个专栏收录

67 篇文章 2 订阅

订阅专栏

CSS

65 篇文章 3 订阅

订阅专栏

属性

border-width:边框宽度

border-style：边框样式

border-color:边框颜色

border-bottom/right/left/top 边框也单独设置一边（例如：border-bottom-style）
缩写：border:边框宽度边框样式边框颜色（可省略边框宽度和边框样式，省略之后默认是1px 样式黑色）

<head>
		<meta charset="utf-8">
		<title>标题</title>
		<style type="text/css">
			div{
				width: 200px;
				border: solid;
			}
		</style>
</head>

边框小练习：三角形

原理：将元素的内容宽高设置为零，这样就相当于是一个没有任何内容支撑的空元素。然后用边框撑起这个元素，那么这个元素的总距离就只是边框距离而已了。你要想着如果四周都是相同距离边框撑起的不就是一个正方形了吗，然后每条边框占据四分之一，不就是将正方形划分成等份四分，每部分刚好不就是一个三角啦，嘻嘻嘻聪明的孩纸🤭，下面我们就来看一下具体的实现吧

组合三角形

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 0;
				height: 0;
				border-style: solid;
				border-width:100px ;
				border-bottom-color:green ;
				border-top-color:yellow ;
				border-left-color:pink ;
				border-right-color:rosybrown ;
			}
		</style>
	</head>
	<body>
		<div id="">
		</div>
	</body>
</html>

在这里插入图片描述

单个三角形

<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 0;
				height: 0;
				border-style: solid;
				border-width:100px ;
				border-color: transparent;  /* 透明  默认是黑色*/
				border-right-color:rosybrown ;
			}
		</style>
	</head>
	<body>
		<div id="">
		</div>
	</body>

在这里插入图片描述
单个三角形其实很简单，就是让其他三个三角形抹去，那把他们的颜色变透明就好啦。开心完成撩！！！！！😄

每天进步一大步

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML-CSS（九）边框样式的使用

属性border-width:边框宽度border-style：边框样式border-color:边框颜色border-bottom/right/left/top 边框也单独设置一边（例如：border-bottom-style）缩写：border:边框宽度边框样式边框颜色（可省略边框宽度和边框样式，省略之后默认是1px 样式黑色）<head> <meta charset="utf-8"> <title>标题</title>
复制链接

扫一扫

专栏目录