84669인 학습
152542인 학습
20005인 학습
5487인 학습
7821인 학습
359900인 학습
3350인 학습
180660인 학습
48569인 학습
18603인 학습
40936인 학습
1549인 학습
1183인 학습
32909인 학습
"반원"이라고 설명할 수 있는 모양을 만들고 싶습니다.
검은색 선이 div 요소의 외부 테두리를 따라 이어져야 하기 때문에 이 이미지는 다소 부정확합니다.
현재 가지고 있는 데모는 다음과 같습니다. http://jsfiddle.net/n9fTF/
이미지 없이 CSS를 사용할 수 있나요?
CSS
점을 얼마나 둥글게 만들고 싶은지 그림에서는 알 수 없지만 한 가지 가능성이 있습니다.http://jsfiddle.net/n9fTF/6/
점을 더 둥글게 만들어야 한다면 끝 부분에 원을 몇 개 배치하여 숟가락과 잘 섞이도록 해야 합니다.
(지원하는 브라우저의 경우 - FF 및 Chrome에서 테스트됨 - IE10, Safari도 작동해야 함)
내 원래 답변의 "문제" 중 하나는 확실한 배경이 없는 상황이었습니다. 이 업데이트는 동일한 효과를 만들어 원과 역방향 컷아웃 사이에 투명한 "간격"을 허용합니다.
z-indexing이 제대로 작동하도록 예상보다 더 많은 노력이 필요했지만(이것은 음수 z-indexes를 무시하는 것 같습니다),이것은 깔끔하고 멋진 모습을 제공합니다(IE9, FF, Chrome 중간 테스트) :
HTML
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
점을 얼마나 둥글게 만들고 싶은지 그림에서는 알 수 없지만 한 가지 가능성이 있습니다.http://jsfiddle.net/n9fTF/6/
점을 더 둥글게 만들어야 한다면 끝 부분에 원을 몇 개 배치하여 숟가락과 잘 섞이도록 해야 합니다.
업데이트: CSS3 방사형 배경 그라데이션 옵션
(지원하는 브라우저의 경우 - FF 및 Chrome에서 테스트됨 - IE10, Safari도 작동해야 함)
내 원래 답변의 "문제" 중 하나는 확실한 배경이 없는 상황이었습니다. 이 업데이트는 동일한 효과를 만들어 원과 역방향 컷아웃 사이에 투명한 "간격"을 허용합니다.
샘플 바이올린 보기.
CSS
으아악원래 답변
z-indexing이 제대로 작동하도록 예상보다 더 많은 노력이 필요했지만(이것은 음수 z-indexes를 무시하는 것 같습니다),이것은 깔끔하고 멋진 모습을 제공합니다(IE9, FF, Chrome 중간 테스트) :
HTML
으아악CSS
으아악