|
常規(guī)的
本文僅介紹第三中方法： 源碼如下： <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 計(jì)算方法為 (寬度 / 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> |
|
|
