[分享]css3图片边框不显示

CSS3是网页设计中非常常用的一种语言，它可以给网页增添各种各样的样式，比如阴影效果、圆角边框、过渡动画等等。其中，图片边框也是很多人常用的一个样式。然而，有时候我们会发现，图片边框无论怎么设置，都不...

CSS3是网页设计中非常常用的一种语言，它可以给网页增添各种各样的样式，比如阴影效果、圆角边框、过渡动画等等。其中，图片边框也是很多人常用的一个样式。然而，有时候我们会发现，图片边框无论怎么设置，都不会显示出来。那么，这个问题是怎么回事呢？

img {
    border: 10px solid black;
} 

首先，我们来看一下上面的代码，这个代码设置了图片的边框为10像素宽，黑色实线。但是，在实际应用中，我们发现图片的边框并没有出现。这是为什么呢？

原因是，如果图片没有设置display属性的话，默认的display属性是inline，这种元素一般不支持边框样式。因此，我们需要给图片设置一个块级元素的display属性，比如设置成block或inline-block。

img {
    border: 10px solid black;
    display: inline-block; /* 或者 display: block; */
} 

通过设置display属性，我们就可以让图片的边框正确地显示出来了。

除了设置display属性，我们还可以使用box-sizing属性来控制边框的尺寸。默认情况下，box-sizing属性的值是content-box，这意味着元素的尺寸不包括边框和填充。但如果我们将box-sizing属性的值设置成border-box，这时候元素的尺寸会包括边框和填充，边框的大小也会自动适应元素的尺寸。

img {
    border: 10px solid black;
    display: inline-block;
    box-sizing: border-box;
} 

总之，要让图片的边框正确地显示出来，我们需要设置display属性并且注意box-sizing属性的使用，这样就能够轻松地实现各种各样的边框样式了。