그라데이션 테두리가있는 CSS3 원?

Question

순수한 CSS3에서 녹색 정사각형 이미지를 복제하려고합니다. 여기에 이미지를 볼 수 있습니다 :

지금까지 이미지 에서처럼 이미지를 보면서 사각형을 생성했습니다. 문제는 사각형에있는 원의 경계입니다. 당신이 볼 수 있듯이,

Here is my fiddle of the square

CSS 코드의 I ... 이미지의 그 원의 테두리 그라데이션과 광산 (바이올린 참조)하지 내가 어떻게 CSS이를 복제하는 아무 생각이 없다 현재 사용중인 언어 :

.greenBlock, .greenCore { 
    background-color: #00c200; 
    border: 3px solid; 
    border-top-color: #00de00; 
    border-right-color: #006900; 
    border-bottom-color: #006900; 
    border-left-color: #00de00; 
    z-index: 10; 
    width: 42px; 
    height: 42px; 
} 

.greenCore { 
    width: 22px; 
    height: 22px; 
    border-radius: 50%; 
    -webkit-transform: translate(25%, 25%); 
    transform: translate(25%, 25%); 
} 

CSS3에서 어떻게 그라디언트 원 테두리를 사용할 수 있습니까?

감사

Answer 1

의사 요소 (:before)를 사용하고 그라디언트 배경으로 스타일을 지정합니다.

.greenBlock { 
 
\t background-color: #00c200; 
 
\t border: 3px solid; 
 
\t border-top-color: #00de00; 
 
\t border-right-color: #006900; 
 
\t border-bottom-color: #006900; 
 
\t border-left-color: #00de00; 
 
\t width: 42px; 
 
\t height: 42px; 
 
\t position:relative; 
 
\t z-index:10; 
 
} 
 

 
.greenCore { 
 
\t background-color: #00c200; 
 
\t width: 22px; 
 
\t height: 22px; 
 
\t border-radius: 50%; 
 
\t top:50%; 
 
\t left:50%; 
 
\t margin-left:-11px; /*half width*/ 
 
\t margin-top:-11px; 
 
\t position:relative; 
 
} 
 
.greenCore:before{ 
 
\t content:''; 
 
\t position:absolute; 
 
\t z-index:-1; 
 
\t border-radius:50%; 
 
\t width:28px; /*22 of greenCore + 3 + 3 for the borders*/ 
 
\t height:28px; 
 
\t left:-3px; 
 
\t top:-3px; 
 
    
 
\t background: -moz-linear-gradient(-45deg, #00ff00 0%, #004900 100%); 
 
\t background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#00ff00), color-stop(100%,#004900)); 
 
\t background: -webkit-linear-gradient(-45deg, #00ff00 0%,#004900 100%); 
 
\t background: -o-linear-gradient(-45deg, #00ff00 0%,#004900 100%); 
 
\t background: -ms-linear-gradient(-45deg, #00ff00 0%,#004900 100%); 
 
\t background: linear-gradient(135deg, #00ff00 0%,#004900 100%); 
 
}

<div class="palette greenBlock" data-code="2"> 
 
    <div class="greenCore"></div> 
 
</div>

Answer 2

이 아마도 당신이 추가 시도 할 수 많은 : 당신의 .greenCore 클래스에

box-shadow:1px 1px 3px 1px #000, -1px -1px 1px #fff; -moz-box-shadow:1px 1px 3px 1px #000, -1px -1px 1px #fff; -webkit-box-shadow:1px 1px 3px 1px #000, -1px -1px 1px #fff;

. 이것은 가까운 수 있습니다. 원하는 값에 가깝게하기 위해 값을 가지고 놀고 싶을 수도 있습니다.

Answer 3

하나의 가능성은 대각선 그라데이션 배경을 약간 큰 원을 확인하고 "핵심 뒤에 배치하는 것입니다 (border-image이 border-radius와 결합 될 수 없기 때문이다 )
"-원. 이렇게하면 큰 원이 두 번째 원의 경계로 표시됩니다. 당신의 바이올린을 수정함으로써, 나는 this과 같은 것을 얻었습니다.

그라데이션을하기 위해 I는 linear-gradient 함수를 사용하고, 배경으로 할당 :

background: linear-gradient(135deg, #00de00, #006900); 

제 가치도의 구배의 방향이다. 두 번째 두 값은 그라디언트의 시작 및 종료 색상입니다.