为圆形图像添加2种颜色的边框
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了为圆形图像添加2种颜色的边框相关的知识，希望对你有一定的参考价值。
下面显示的是我尝试创建的最终输出的图像。我遇到麻烦的部分是两种颜色的边框。
我知道我可以用border-top或border-bottom控制边框的所有侧面。但是，由于图像的半径为50％。边框宽度从较厚的地方开始，然后随着到达中间位置而缩小。
即使我添加了border-left和border-right，两种颜色也无法均匀连接。
.testImage {
border-radius: 50%;
border-top: 7px solid red;
border-bottom: 7px solid blue;
}<img src="https://via.placeholder.com/175" class="testImage" alt="img=1" />
答案
这可以通过一些技巧实现，将图像包装在容器中。 border-radius属性有点误导，因此您必须考虑这四个方面，并了解如何创建相同的效果。
首先，您应该确保已具备双重边界效应。
.image-border {
display: inline-block; /* Fits the wrapper to the size of the image */
overflow: hidden; /* Keeps the image inside the container */
border-radius: 50%;
border-width: 8px;
border-style: solid;
border-color: red red blue blue; /* Define colosr for top, right, bottom, and left sides */
}
.image-border > img {
display: block; /* Prevent baseline alingment (space below image) */
}<div class="image-border">
<img src="https://via.placeholder.com/175" alt="img=1" />
</div>另一答案
div.container {
position: relative;
display: inline-block;
}
div.half__circle {
width: 100px;
height: 50px;
background: red;
border-radius: 50px 50px 0 0;
}
div.half__circle:nth-of-type(1) {
background: red;
border-radius: 50px 50px 0 0;
}
div.half__circle:nth-of-type(2) {
background: blue;
border-radius: 50px 50px 0 0;
transform: rotateZ(180deg);
}
.image {
width: calc(100% - 30px);
height: calc(100% - 30px);
position: absolute;
top: 15px;
bottom: 15px;
left: 15px;
right: 15px;
}<div class="container">
<div class="half__circle"></div>
<div class="half__circle"></div>
<img class="image" src="https://s3.amazonaws.com/uploads.striking.ly/page/images/custom/dUET9v8VSJquJGPLePed_tsquared_no_angle.png" alt="" />
</div>另一答案
具有几行代码的后台方法：
.testImage {
border-radius: 50%;
padding: 7px;
background: linear-gradient(red 50%, blue 0);
}<img src="https://via.placeholder.com/175" class="testImage" alt="img=1" >以上是关于为圆形图像添加2种颜色的边框的主要内容，如果未能解决你的问题，请参考以下文章