CSS3 방사형 그래디언트

Question

이것이 가능한지 알아야합니다. "크리 에이 티브"포토샵 부서는이 이미지와 함께 올라오고, 그 전에는 1 ~ 5 색의 그라디언트 페이드가되었습니다. 그들은 여전히 ​​이것을하고 있지만, 이제 그들은 그것 위에 하얀 동그라미가 어떻게 생겼습니다. 어떻게하면이 일을 성취 할 수 있을까요? 예제 구문에는 정확한 위치 지정이 없습니다. 흰색 원의 위에 나는 특정 글꼴 및 텍스트 "흰색에"추가 사전에

많은 감사를해야합니다.

Answer 1

여러 오버레이 그라데이션을 배경으로 사용하는 것이 더 간단 할 수 있습니다.

첫 번째는 왼쪽에서 오른쪽으로, 두 번째 방사형 그래디언트는 맨 위에 표시됩니다.

는 그런 다음 위치의 단지 문제 (절대적으로) 흰색 원 (당신이 위치 어디에 알고 기억)를 통해 텍스트 요소

신속하고 더러운 데모 :

div { 
 
    height: 350px; 
 
    width: 90%; 
 
    margin: 1em auto; 
 
    border: 1px solid lightgrey; 
 
    background: 
 
    radial-gradient(circle closest-side at 75% 50%, white, white 60%, transparent), 
 
    linear-gradient(to right, #344862, white 75%, yellow); 
 
    position: relative; 
 
} 
 
span { 
 
    position: absolute; 
 
    left: 75%; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
}

<div> 
 
    <span>Lorem ipsum dolor.</span> 
 
</div>

참고 : 방사형 그래디언트 센터의 위치가 <span>의 위치와 어떻게 같습니까? transform은 텍스트가 원 가운데에 배치되도록합니다.