如何在圆形图像周围放置多色边框？

时间：2019-08-20 18:01:54

标签： html css

我需要在圆形图像周围放置彩色边框。 example borders

我已经在网上尝试了各种指南，但似乎无法掌握它。

我尝试使用线性渐变，但最终在拐角处有4个点，好像图像是正方形的，没有边框。

.img-border1 {
  border: 6px solid #e42c64;
  border-radius: 50%;
}

.img-border2 {
  border: 6px solid;
  border-radius: 50%;
  background-image: linear-gradient(red 33.33%, blue 33.33%, yellow 33.33%);
}
<div class="col-lg-4">
  <img class="img-res img-border1 rounded-circle" src="https://placehold.it/140x140" alt="simon-game" width="140" height="140">
  <h2>My Simon Game</h2>
  <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
  <p><a class="btn btn-secondary" href="https://rbas30.github.io/simon-game/" role="button">Play the game »</a></p>
</div>

<div class="col-lg-4">
  <img class="img-res img-border2 rounded-circle" src="https://placehold.it/140x140" alt="simon-game" width="140" height="140">
  <h2>Heading</h2>
  <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
  <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div>

3 个答案:

答案 0 :(得分：0)

尝试以下基于this pen的代码段：您可以从样式中注释掉不需要的动画。

.img-border1 {
  border: 6px solid #e42c64;
}

.img-border2 { 
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;  
}

	/* donut-chart (h x w) should be 15px larger than image to prevent white overflow */
.donut-chart {
  position: relative;
	width: 165px;
  height: 165px;
	border-radius: 100%
 }
img.center {
  background: #394264;
  position: absolute;
  text-align: center; 
  top:0;left:0;bottom:0;right:0;
  margin: auto;
  border-radius: 50%;
}
	
	
.portion-block {
    border-radius: 50%;
    clip: rect(0px, 200px, 200px, 100px);
    height: 100%;
    position: absolute;
    width: 100%;
  }
.circle {
    border-radius: 50%;
    clip: rect(0px, 100px, 200px, 0px);
    height: 100%;
    position: absolute;
    width: 100%;
    font-family: monospace;
  }
	
	/* Image 1 */
#Img1part1 {
    transform: rotate(0deg);
  } 
	#Img1part1 .circle {
		background-color: #00e0ff;
		/*transform: rotate(76deg);*/
		animation: first 1s 1 forwards;
	  } 
#Img1part2 {
    transform: rotate(100deg);
  }
#Img1part2 .circle {
    background-color: #e20075;
    animation: second 1s 1 forwards 1s;
  }
#Img1part3 {
    transform: rotate(250deg);
}
	#Img1part3 .circle {
		background-color: #41cf74;
		animation: third 0.5s 1 forwards 2s;
	}
  #Img1part3 .circle {
		background-color: #41cf74;
		animation: third 0.5s 1 forwards 2s;
	}
  
  
	/* Image 2 */
  #Img2part1 {
    transform: rotate(0deg);
  } 
	#Img2part1 .circle {
		background-color: #0023ff;
		/*transform: rotate(76deg);*/
		animation: first 1s 1 forwards;
	  } 
#Img2part2 {
    transform: rotate(100deg);
  }
#Img2part2 .circle {
    background-color: #fff075;
    animation: second 1s 1 forwards 1s;
  }
#Img2part3 {
    transform: rotate(250deg);
}
	#Img2part3 .circle {
		background-color: #41cf74;
		animation: third 0.5s 1 forwards 2s;
	}
  #Img2part3 .circle {
		background-color: #41cf74;
		animation: third 0.5s 1 forwards 2s;
	}
	
	
/* Sample Animation */
@keyframes first {
    from {transform: rotate(0deg);}
    to {transform: rotate(100deg);}
}
	
@keyframes second {
    from {transform: rotate(0deg);}
    to {transform: rotate(150deg);}
}
	
@keyframes third {
    from {transform: rotate(0deg);}
    to {transform: rotate(111deg);}
}
<div class="col-lg-4 ">
<div class="donut-chart">
			<div id="Img1part1" class="portion-block"><div class="circle"></div></div>
			<div id="Img1part2" class="portion-block"><div class="circle"></div></div>
			<div id="Img1part3" class="portion-block"><div class="circle"></div></div>
  <img class="img-res img-border2 rounded-circle center" src="https://placehold.it/140x140" alt="simon-game" width="140" height="140">
  </div>
  <h2>My Simon Game</h2>
  <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
  <p><a class="btn btn-secondary" href="https://rbas30.github.io/simon-game/" role="button">Play the game »</a></p>
</div>

<div class="col-lg-4">
<div class="donut-chart">
			<div id="Img2part1" class="portion-block"><div class="circle"></div></div>
			<div id="Img2part2" class="portion-block"><div class="circle"></div></div>
			<div id="Img2part3" class="portion-block"><div class="circle"></div></div>
  <img class="img-res img-border2 rounded-circle center" src="https://placehold.it/140x140" alt="simon-game" width="140" height="140">      
		</div>
  
  <h2>Heading</h2>
  <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
  <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div>

答案 1 :(得分：0)

下面是一个使用更多标记和pseudo元素的示例：

.image-wrap {
  position: relative;
  padding: 6px;
  border-radius: 50%;
  width: 140px;
  height: 140px;
  box-sizing: border-box;
  overflow: hidden;
  background: blue;
  z-index: 1;
  background-clip: padding-box;
}

.image-wrap-inner {
  overflow: hidden;
  border-radius: 50%;
  width: 128px;
  height: 128px;
}

.image-wrap img {
  position: relative;
  z-index: 10;
  top: -6px;
  left: -6px;
}

.img-border-two::before {
  content: '';
  display: block;
  height: 140px;
  width: 140px;
  background: green;
  position: absolute;
  top: 0;
  left: 70px;
  z-index: 2;
}

.img-border-three::before {
  content: '';
  display: block;
  height: 140px;
  width: 140px;
  background: purple;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  transform: matrix(2, 1, 2, -1, 0, 140);
}

.img-border-three::after {
  content: '';
  display: block;
  height: 140px;
  width: 140px;
  background: red;
  position: absolute;
  top: 0;
  left: 70px;
  z-index: 2;
}
<div class="col-lg-4">
  <div class="image-wrap img-border-two">
    <div class="image-wrap-inner">
      <img class="img-res rounded-circle" src="https://placehold.it/140x140" alt="simon-game" width="140" height="140">
    </div>
  </div>

  <h2>Heading</h2>
  <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
  <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div>


<div class="col-lg-4">
  <div class="image-wrap img-border-three">
    <div class="image-wrap-inner">
      <img class="img-res rounded-circle" src="https://placehold.it/140x140" alt="simon-game" width="140" height="140">
    </div>
  </div>

  <h2>Heading</h2>
  <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
  <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div>

注意事项：

  1. 这没有响应，因此您的图片始终为140px x 140px。
  2. 如果您调整图像的宽度/高度或padding上的.image-wrap，还需要将.image-wrap-inner width和height更改为解释填充/尺寸的变化。

答案 2 :(得分：0)

我刚刚在这里使用了一些技巧，在其中使用了您的代码，而不是将渐变背景赋予图像标签，而不得不将其赋予父div。

.img-border2 {
 width:140px;
  height:140px;
  border-width:4px;
  border-radius: 50%;
  background-image: linear-gradient(red, blue,yellow);
  padding :6px;

}
.img-border2 img{ border-radius:50%;}
<div class="col-lg-4">
  <div class="img-border2">
  <img class="img-res  rounded-circle" src="https://placehold.it/140x140" alt="simon-game">
  </div>
 </div>

相关问题
最新问题