css--内凹圆角

<div class="box"></div>

 

:root {
  --r: 2em;
}
.box {
  overflow: hidden;
  position: relative;
  margin: .25em auto;
  min-width: 15em;
  max-width: 15em;
  min-height: 10em;
  border-radius: 1em;
}
.box:before {
  position: absolute;
  margin: calc(var(--r) * -1);
  padding: var(--r);
  border-radius: 50%;
  box-shadow: 0 0 0 300px rgba(33,33,33,0.4);
  -webkit-box-shadow: 0 0 0 300px rgba(33,33,33,0.4);

  content: '';

}

 

效果如下:
  

posted @   L_JL  阅读(432)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示