Here I have a circular badge. Below is the code for it
.center-badge { background: #09a49c; height: 120px; width: 120px; border-radius: 50%; text-align: center; display: flex; justify-content: center; align-items: center; border: 10px solid #f2f2f2; position: absolute; top: -50px; left: -30px; line-height: 16px; }.center-badge p { font-size: 12px; color: var(--white); margin-bottom: 0px; }.center-badge p strong { display: block; font-size: 16px; }
<div class="center-badge"> <div> <p>Taux </p> <p>codemandeur</p> </div> </div>
Now I have been asked to add border color as a linear-gradient(#fbfbfb, #c5d4dd)
. But this works only on a background image. I have added something like this, but it overrides my whole body color. Please help me how to fix this
.center-badge {
background: #09a49c;
height: 120px;
width: 120px;
border-radius:50%;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: -50px;
left: -30px;
line-height: 16px;
border: 10px solid transparent;
background-image: linear-gradient(#fbfbfb, #c5d4dd);
background-origin: border-box;
background-repeat: no-repeat;
}
I believe the repetitive background is the problem. How to apply this linear gradient as a border
I used this on my project. It will work.
.center-badge {
...
background-image: linear-gradient(#09a49c , #09a49c),
linear-gradient(to right, #fbfbfb, #c5d4dd);
background-origin: border-box;
border: double 0.2em transparent;
background-origin: border-box;
background-clip: padding-box, border-box;
...
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.