当前位置：网站首页>Introduction to border border attribute

Introduction to border border attribute

2022-07-28 12:53:00 【Xiao Yang should work hard】

Preface ： I'm a freshman, Xiaobai , If there are any mistakes, please point out

border-radius Add fillet

box-shadow Add shadow

border-style Add border style

First introduced 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>

！ Be careful ： If two values are set , The first one is for the upper left corner and the lower right corner , The second one is for the upper right corner and the lower left corner

Then introduce 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>

Finally, it introduces border-style

none: Default borderless

dotted: Define a dotted line border

dashed: Define a dotted line

solid: Define solid line borders

double: Define two borders . The width of the two borders and border-width The value of is the same

<!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> Different boundary styles .</p>
</body>
</html>