CSS景深下劃線是指在網頁設計中,通過設置CSS樣式,在文字下方添加一條有厚度、有深度感的下劃線,并配合背景顏色,以達到美觀和顯示層次感的效果。
p { position: relative; /* 相對定位 */ display: inline-block; /* 內聯元素變塊級元素,使得寬度自適應 */ padding-bottom: 3px; /* 下劃線距離文字的距離 */ margin: 0 5px; /* 左右邊距 */ } p::before { content: ''; /* 偽元素 */ position: absolute; /* 絕對定位 */ bottom: 0; /* 底部對齊 */ left: 0; /* 左側對齊 */ width: 100%; /* 寬度占滿整個p元素 */ height: 2px; /* 下劃線的厚度 */ background-color: #ccc; /* 下劃線顏色 */ transform: translateY(2px); /* 定義下劃線的深度感 */ }
使用以上CSS樣式,即可在p標簽中實現景深下劃線的效果。可以根據設計需求,調整下劃線的厚度和顏色,以及下劃線的相對位置,達到不同的設計效果。