需求 設置一個小於寬度的邊框
方式1
使用嵌套的兩個元素，在子元素中設置邊框以模仿一個小於寬度的效果
<div style="width: 100px; display: flex; justify-content: center; background: tan">
<div style="width: 80px; border-bottom: 1px solid black">內容</div>
</div>
方式2
在僞元素中設置一條‘線’做邊框
<body>
<style type="text/css"> .test {
position: relative;
//z-index: 2; //如果上級元素中有background需設置
&::before {
content: '';
bottom: 0; left: 0; right: 0;
width: 50px;
height: 2px;
position: absolute;
z-index: -1;
background: #888888;
}
}</style>
<div class='test'>
test
</div>
</body>
方式3
3種方式中唯一真正實現“小於寬度的邊框” 使用 css 中 border-image設置邊框,下面是使用 linear-gradient 來實現邊框效果
//下邊框
width: 100px;
background: tan;
border-image: 0 0 100% 0 linear-gradient(90deg, transparent 4.2vw, #ddd 0, #ddd 95.8vw, transparent 0, transparent 100vw);
border-bottom: 1px solid transparent;
//上邊框
width: 100px;
background: tan;
border-image: 100% 0 0 linear-gradient(90deg, transparent 10px, rgb(40, 44, 52) 0, rgb(40, 44, 52) 90px, transparent 0, transparent 100px);
border-top: 1px solid transparent;