Có thể tạo đường viền gradient trên CIRCLE bằng css3 không?

Question

Tôi có hình nền theo hình tròn. Đã cho nó một đường viền màu vàng. Tôi muốn thay đổi đường viền thành gradient từ vàng sang trắng. Tôi đã thấy nhiều ví dụ có đường viền vuông nhưng không áp dụng cho các vòng kết nối. Dưới đây là mã của tôi:

.Profileimage{ 
 
    background-image: url("images/profilePic.jpg"); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    overflow:hidden; 
 
    -webkit-border-radius:50px; 
 
    -moz-border-radius:50px; 
 
    border-radius:50%; 
 
    width:100px; 
 
    height:100px; 
 
    border: 5px solid rgb(252,238,33); 
 
}

<div class="Profileimage"></div>

Cảm ơn !!

Answer 1

Có thể giống như thế này?

.Profileimage{ 
    position: relative; 
    background: linear-gradient(rgb(252,238,33), rgb(255,255,255)); 
    -webkit-border-radius:50px; 
    -moz-border-radius:50px; 
    border-radius:50%; 
    width:100px; 
    height:100px; 
} 
.Profileimage:after{ 
    position: absolute; 
    display: block; 
    top: 5px; 
    left: 5px; 
    width: 90px; 
    height: 90px; 
    content: ""; 
    background-color: #fff; 
    background-image: url("images/profilePic.jpg"); 
    background-repeat: no-repeat; 
    background-size: cover; 
    border-radius: 50%; 
    overflow: hidden; 
} 

Không chắc chắn nếu đó là những gì bạn đang tìm kiếm, nhưng bạn chỉ có thể thiết lập các nền gradient, và sau đó xác định vị trí một nhân tố trên đầu (ở đây tôi đang sử dụng 'sau khi' selector giả)

Fiddle: http://jsfiddle.net/6ue88pu6/1/

Answer 2

This Is trả lời của bạn:

#cont{ 
 
    background: -webkit-linear-gradient(left top, crimson 0%, #f90 100%); 
 
    width: 300px; 
 
    height: 300px; 
 
    border-radius: 1000px; 
 
    padding: 10px; 
 
} 
 

 
#box{ 
 
    background: black; 
 
    width: 300px; 
 
    height: 300px; 
 
    border-radius: 1000px; 
 
}

<div id="cont"> 
 
    <div id="box"></div> 
 
</div>

Answer 3

Tôi thấy rằng câu hỏi này đã cũ, nhưng tôi chỉ có cùng một vấn đề và tôi có thể sửa chữa nó. Bí quyết là quấn div của bạn vào div khác.

.gradient-wrapper { padding: 10px; border-radius: 50%; display: inline-block; 
 
    background: yellow; // As fallback for browsers which do not support gradient 
 
    background: -webkit-linear-gradient(yellow, white); 
 
    background: -o-linear-gradient(yellow, white); 
 
    background: -moz-linear-gradient(yellow, white); 
 
    background: linear-gradient(yellow, white); 
 
} 
 

 
#maincircle { width: 100px; height: 100px; background: #424242; border-radius: 50%; }

<div class="gradient-wrapper"> 
 
    <div id="maincircle"> 
 
    &nbsp; 
 
    </div> 
 
</div>

Kết quả:

Hy vọng điều này giúp!