HTML：

 

 css:

 

 效果：

 

一起设置：

 border:width style color;

exaple:    border:medium dashed green;

 

border-radius可以把四周钝化：

 

 

 

 padding:

文字和外框间的距离

button{
    background-color: rgb(161, 161, 214);
    padding: 5px 10px 5px 10px;
    border-radius: 5px;
}
这里是click和外框的距离

 

 

margin

外框和边界的距离。这里黄色框比其他没有设置margin的框要离边界远一些。

 

 

#three{
    background-color: gold;
    border-radius: 10%;
    border-color:(236, 183, 191);
    padding:20px;
    margin: 20px;
}
 
display:
改变展现方式。比如div本来是占一行的，但是设置后可以变成占一个小格子或者横向排列
div {
    width: 100px;
    height: 100px;
    display:inline-block;

}