border边框属性的介绍

最新推荐文章于 2024-08-20 14:34:45 发布

Tea-pd

最新推荐文章于 2024-08-20 14:34:45 发布

阅读量1.6k

点赞数 3

文章标签： html 前端 css3 css 开发语言

本文链接：https://blog.csdn.net/tea_tea_/article/details/125487650

版权

前言：本人是新生小白，如有错误之处欢迎指出

border-radius 添加圆角

box-shadow 添加阴影

border-style 添加边框样式

首先介绍border-radius

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style> 
#div1
{
	border:2px solid #a1a1a1;
	padding:10px 40px; 
	background:#f00;
	width:300px;
	border-radius:25px;
}
#div2 {
  border: 2px solid red;
  padding: 10px;
  border-radius: 50px 20px;
}
</style>
</head>
<body>
<div id="div1">
  <p>11111111111</p>
</div>
<br><br>
<div id="div2">
  <p>222222222222</p>
</div>
</body>
</html>

！注意：如果设置了两个值，第一个用于左上角和右下角，第二个用于右上角和左下角

然后介绍box-shadow

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style> 
#div1
{
	width:300px;
	height:100px;
	background-color:yellow;
	box-shadow: 10px 10px 5px #888888;
}

</style>
</head>
<body>

<div id="div1"></div>

</body>
</html>

最后介绍border-style

none: 默认无边框

dotted: 定义一个点线边框

dashed: 定义一个虚线边框

solid: 定义实线边框

double: 定义两个边框。两个边框的宽度和 border-width 的值相同

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title>
<style>
p
{
	border-top-style:solid;
	border-right-style:dotted;
	border-bottom-style:dashed;
	border-left-style:double;
}
</style>
</head>

<body>
<p>不同的边界样式。</p>
</body>
</html>