mask-border-width-ref.html (565B)
1 <!DOCTYPE html> 2 <style> 3 body { 4 --scale: 1; 5 } 6 7 .box { 8 width: calc(50px * var(--scale)); 9 height: calc(50px * var(--scale)); 10 background-color: red; 11 mask-border-slice: 10; 12 mask-border-source: linear-gradient(45deg, pink, blue, white, black, green); 13 mask-border-width: calc(8px * var(--scale)); 14 margin: calc(10px * var(--scale)); 15 } 16 17 .zoom { 18 --scale: 2; 19 } 20 </style> 21 22 <div class="box"></div> 23 24 <div class="zoom"> 25 <div class="box"></div> 26 </div> 27 28 <div class="zoom box"></div>