CSS 边框内描边 css 常用的边框属性有 border-width、border-style、border-color，通过这些属性可以设置元素的边框大小、样式和颜色。但是有时候我们需要在边框内部描绘一些图形或线条来美化页面，这时候边框属性就无法实现了。所以，我们需要一些新的方法来实现边框内描边。 一、box-shadow box-shadow 属性是实现边框内描边的最常用方法之一。通过设置实际大小（0），将阴影放在边框内部，同时设置颜色。 代码：

p{
box-shadow:inset 0 0 10px #f00;
}

解析： - inset 表示内部阴影 - 0 0 表示阴影在 x 轴和 y 轴方向上没有偏移 - 10px 表示阴影的大小为 10 像素 - #f00 表示阴影的颜色为红色 二、伪元素 使用伪元素可以将边框内的内容分离出来，从而单独设置其样式。具体做法是设置元素的 position 为 relative，然后在其内部创建一个绝对定位的伪元素，通过设置伪元素的大小、位置和颜色来实现边框内描边。 代码：

p{
position:relative;
}
p::before{
content:"";
position:absolute;
top:5px;
left:5px;
right:5px;
bottom:5px;
border:1px solid #f00;
}

解析： - ::before 表示创建元素的伪元素 - content:"" 表示伪元素内部没有任何内容 - position:absolute 表示伪元素绝对定位 - top、left、right、bottom 表示伪元素的位置，相当于设置其大小 - border 表示伪元素的边框，即边框内描边的样式 - #f00 表示边框的颜色 三、尝试属性 在 CSS3 中，还有一些新属性可以实现边框内描边，例如 outline-offset、outline、 border-image 等。可以尝试使用这些属性来更好地实现边框内描边效果。 总结： 边框内描边可以让页面更加美观，但是需要注意的是，如果边框过于复杂可能会导致页面性能下降，因此需要根据实际情况进行选择。以上介绍了三种最常用的方法，希望读者在实际开发过程中可以灵活运用，实现更好的效果。