常規(guī)的 border-image 屬性如果直接使用 border-radius 會無效，關(guān)于如何實現(xiàn)漸變邊框圓角，網(wǎng)上流傳著大概這么幾種辦法：
本文僅介紹第三中方法：
源碼如下：
<style> .border-radius-4 { position: relative; z-index: 1; width: 80px; height: 80px; text-align: center; padding: 10px; box-sizing: border-box; } .border-radius-4:after { content: ''; position: absolute; left: 0; top: 0; z-index: -1; width: 100%; height: 100%; border-radius: 50%; background: linear-gradient(to bottom right, rgba(98, 54, 255, 0.3), rgba(252, 53, 100, 0.3)); /* 徑向漸變中的 30px 計算方法為 (寬度 / 2 - 邊框大小)，此處為 80px / 2 - 10px */ mask-image: radial-gradient(transparent 0 30px, #000 30px); -webkit-mask-image: radial-gradient(transparent 0 30px, #000 30px); } </style> <div class="border-radius-4">內(nèi)容</div>
