<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/demo-03.css">
</head>
<body>
<div class="box1">
<div class="box2">
</div>
</div>
</body>
</html>
以下是样式文件：demo-03.css
.box1{
width:200px;
height:200px;
background-color: darkred;
/*内边距 上右下左*/
padding:40px 30px;
/*边框*/
border-top-width: 2px;
border-top-style: dashed;
border-top-color: aqua;
border-right-width: 3px;
border-right-style: double;
border-right-color:red;
/*简写*/
border-top:10px solid black;
border-right: 10px dashed blue;
border-bottom: 10px dotted gold;
border-left:10px solid green;
/*如果四个边一样*/
border: 15px solid red;
}
.box2{
width:200px;
height:200px;
background-color: rgb(13, 13, 112);
}
![_X`6AZ5CR%TR5BG@J`]})`7.png](https://img.php.cn//upload/image/848/480/168/1547621668998476.png "1547621668998476.png")
重点：padding后数值只要出现在第二个位置上就是左右！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
