1.边框的组成
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 400px;
height: 400px;
border:1px solid red;
}
</style>
<!--
边框组成
1、边框的粗细
2、边框的样式
3、边框的颜色
-->
</head>
<body>
<div></div>
</body>
</html>
2.边框的方向
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 400px;
height: 400px;
border: 1px solid red;
border-right:5px dashed black;
}
</style>
<!--
边框的方向
top right bottom left
border
border-top
border-right
border-bottom
border-left
-->
</head>
<body>
<div></div>
</body>
</html>
3.边框的组成和方向
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 400px;
height: 400px;
border: 1px solid red;
border-top-color: black;
}
</style>
<!--
边框组成
1、边框的粗细
2、边框的样式
3、边框的颜色
边框的方向
top right bottom left
border
border-top
border-top-width
border-top-style
border-top-color
border-right
border-right-width
border-right-style
border-right-color
border-bottom
border-bottom-width
border-bottom-style
border-bottom-color
border-left
border-left-width
border-left-style
border-left-color
-->
</head>
<body>
<div></div>
</body>
</html>
4.边框的形状
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 0px;
height: 0px;
border: 20px solid red;
border-top-color:black;
}
</style>
<!--
边框的形状：非矩形
-->
</head>
<body>
<div></div>
</body>
</html>
5.边框三角形
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 0;
height: 0;
border: 10px solid #fff;
/*border-top-color:#ccc;*/
border-left-color:#ccc;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果图
原文地址：https://www.cnblogs.com/mayanlianggcs/p/9513354.html
时间： 2024-10-08 14:29:08