html - 如何反向添加边框半径？

Question

<分区>

Answer 1

Border-radius 本身并不能回答这个问题，但你可以这样做:

溢出隐藏在一个带有圆 Angular 的外框上: https://codepen.io/sergejmueller/pen/fJEml

border-radius: 50%;

您还可以使用径向渐变: http://lea.verou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients/

background-image:
radial-gradient(circle at 0 0, rgba(204,0,0,0) 14px, #c00 15px),
radial-gradient(circle at 100% 0, rgba(204,0,0,0) 14px, #c00 15px),
radial-gradient(circle at 100% 100%, rgba(204,0,0,0) 14px, #c00     15px),
radial-gradient(circle at 0 100%, rgba(204,0,0,0) 14px, #c00 15px);

也为现代解决方案屏蔽图像:

-webkit-mask-image: radial-gradient(circle 10px at 0 0, transparent 0, transparent 20px, black 21px);