如何查看HTML元素的内容框，填充和边框？

Question

我目前正在尝试创建CSS规则，以便可以轻松区分内容框（白色），填充区域（蓝色）和边框（绿色）。

我知道我可以设置背景色和边框色。但是如何区分内容框和填充区域？

#div1 {
  box-sizing: border-box;
  width: 300px;
  height: 300px;
 
    
  padding: 40px;
  border: 10px solid green;
  
  background-color: lightblue;

}

<div id="div1">I am a DIV with some content...</div>
<div id="div2"></div>