css样式shadow+渐变实现内切角

css样式shadow+渐变实现内切角

html:

<div class="shadow">使用阴影的扩散半径实现内切圆角</div>
<div class="shadow2">阴影实现缺点，单个标签最多是2边</div>
<div class="linear">使用径向渐变实现内切圆角</div>
<div class="linear2">径向渐变实现内切圆角可以是4边</div>

css:

body {
  background: linear-gradient(90deg, #fff, #bbb);
}

div {
  position: relative;
  width: 20vw;
  height: 8vw;
  margin: 1vw auto;
  border-radius: 1vmin;
  overflow: hidden;
  line-height: 8vw;
  color: #fff;
  text-align: center;
}

.shadow::before {
  position: absolute;
  content: "";
  top: -2vw;
  left: -2vw;
  width: 4vw;
  height: 4vw;
  border-radius: 50%;
  box-shadow: 0 0 0 25vw #e91e63;
  z-index: -1;
  /* animation: shadowmove 10s infinite; */
}

.shadow2::before {
  position: absolute;
  content: "";
  top: -2vw;
  left: -2vw;
  width: 4vw;
  height: 4vw;
  border-radius: 50%;
  box-shadow: 0 0 0 15vw #e91e63;
  z-index: -1;
}
.shadow2::after {
  position: absolute;
  content: "";
  bottom: -2vw;
  right: -2vw;
  width: 4vw;
  height: 4vw;
  border-radius: 50%;
  box-shadow: 0 0 0 15vw #e91e63;
  z-index: -1;
}

@keyframes shadowmove {
  0% {
	background: #e91e63;
	box-shadow: 0 0 0 0 #e91e63;
  }
  10% {
	background: transparent;
	box-shadow: 0 0 0 0 #e91e63;
  }
  50% {
	background: transparent;
	box-shadow: 0 0 0 25vw #e91e63;
  }
}
.linear {
  background-size: 100% 100%;
  background-image: radial-gradient(circle at 0 0, transparent 0, transparent 2vw, #03A9F5 2vw);
  background-repeat: no-repeat;
}

.linear2 {
  filter: drop-shadow(0 0 3px #666);
  background-size: 70% 70%;
  background-image: radial-gradient(circle at 100% 100%, transparent 0, transparent 2vw, #03A9F5 2vw), 
					radial-gradient(circle at 0 0, transparent 0, transparent 2vw, #03A9F5 2vw), 
					radial-gradient(circle at 100% 0, transparent 0, transparent 2vw, #03A9F5 2vw), 
					radial-gradient(circle at 0 100%, transparent 0, transparent 2vw, #03A9F5 2vw);
  background-repeat: no-repeat;
  background-position: right bottom, left top, right top, left bottom;
}

效果:

本文作者： Jasmine

本文链接： https://www.jianbaizhan.com/article/712

版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！