Margin: 在border外面
Border:在margin和padding中间绘制边框
padding：填充在边框和content中间
content：删除了上面3项就只剩下内容了
Margin、Border、padding默认为0，此时四个矩形重合
您可以使用background-image属性为小部件指定背景。 默认情况下，仅在Border内的区域绘制背景图像。 可以使用background-clip属性更改。 您可以使用background-repeat和background-origin来控制背景图像的重复和来源。
background-image无法随窗口小部件的大小缩放。 为了提供与小部件尺寸一起缩放的“皮肤”或背景，必须使用border-image。 由于border-image属性提供了备用背景，因此在指定border-image时不需要指定background-image。 在这种情况下，如果同时指定了两者，则border-image将覆盖background-image。
此外，image可用于在border-image上绘制图像。 指定的图像不平铺或拉伸，并且当其大小与小部件的大小不匹配时，将使用image-position属性指定其对齐方式。 与background-image和border-image不同，可以在image属性中指定SVG，在这种情况下，图像会根据小部件的大小自动缩放。
呈现规则的步骤如下：
• Set clip for entire rendering operation (border-radius)
• Draw the background (background-image)
• Draw the border (border-image, border)
• Draw overlay image (image)
网友评论