CSS에서 물결선 테두리를 구현하는 방법

CSS에서 물결 모양 테두리를 구현하는 방법: 먼저 HTML 샘플 파일을 만든 다음 p 태그를 만들고 마지막으로 방사형 그라데이션 "방사형 그라데이션"을 통해 물결 모양 테두리를 구현합니다.

이 기사의 운영 환경: Windows7 시스템, HTML5&&CSS3 버전, Dell G3 컴퓨터.

CSS에서 물결 모양 테두리를 구현하는 방법은 무엇입니까?

CSS3 방사형 그라디언트 방사형-그라디언트 방법으로 물결 모양 테두리 및 내부 모따기 달성

Preface

사장님이 쿠폰 사진을 주셨습니다(아래 참조). 이 물결 모양 테두리와 내부 모따기는 불가능합니다. CSS로 작성해야 하므로 사장님께 설명을 드리고 UI 컷아웃을 달라고 했더니 사장님께서 CSS3에서는 가능하다고 대답하셨어요. 글쎄, 큰 사람들은 그것이 실현될 수 있다고 말했습니다. 서둘러 구 형제에게 Du Niang에게 물어 보는 것이 어떻겠습니까?

내부 모따기 구현

코드를 업로드한 다음 코드를 설명하세요

<p class="radial-gradient"></p>
<style>
.radial-gradient {
    width: 200px;
    height: 100px;
    position: relative;
    background-image: radial-gradient(circle at right top, #fff, #fff 10px, transparent 11px),
           radial-gradient(circle at right bottom, #fff, #fff 10px, transparent 11px);
    background-color: red;
}
</style>

방사형 그라데이션 스타일은 설명할 필요가 없습니다. CSS를 좀 아는 사람이라면 누구나 알 것입니다. 핵심은 .radial-gradient:after 스타일입니다.

방사형 그라데이션(오른쪽 상단 원, #fff, #fff 10px, 투명 11px) 스타일의 용도를 설명하는 데 중점을 둡니다.

원은 원형 그라데이션을 나타내며, 이는 단순히 원을 그리는 것을 의미합니다. 원을 그리려면 원점을 알아야 합니다.

오른쪽 상단 원 오른쪽 상단 원 안의 오른쪽 상단이 원점 위치입니다. 여기서 원점 위치는 컨테이너 좌표를 기준으로 합니다. Right는 컨테이너의 가장 오른쪽을 의미하고, top은 컨테이너의 위쪽, 즉 오른쪽 상단을 의미합니다.

오른쪽 상단 원 뒤에 있는 #fff, #fff 10px, 투명 11px는 원점부터 시작되는 다양한 색상 그라데이션의 길이입니다.

코드의 첫 번째 #fff #fff, #fff 10px, 투명 11px는 원점이 #fff 색상임을 의미하고, #fff 10px는 원점으로부터의 거리가 반경 10px이고 거리가 모두 #fff 색상임을 의미합니다. , 투명 11px은 원점으로부터의 거리가 10px이고 11px이 모두 투명 색상임을 의미합니다. 다른 색상은 설정되지 않았으므로 원점에서 11px 이후의 모든 색상은 투명 색상입니다.

요약 방사형 그라데이션(오른쪽 상단 원, #fff, #fff 10px, 투명 11px)은 컨테이너의 오른쪽 상단을 원점으로 하여 원을 그리는 것입니다. 반경은 10px이고 반경은 10px 범위보다 큽니다. 내부는 모두 투명 색상입니다.

이렇게 하면 오른쪽 상단에 내부 모따기가 형성됩니다

방사형 그라데이션(오른쪽 하단 원, #fff, #fff 10px, 투명 11px)과 동일합니다.

물결 모양 테두리 구현

코드를 업로드하고 CSS 스타일을 추가하세요

<style>
.radial-gradient:after {
    content: &#39;&#39;;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: -5px;
    width: 10px;
    height: 100%;
    background: radial-gradient(circle, #fff, #fff 4px, transparent 5px);
    background-size: 10px 10px;
}
</style>

background: Radial-gradient(circle, #fff, #fff 4px, transparent 5px); 원점 컨테이너 중앙에 #fff, #fff 4px, transparent 5px는 색상이 반경 4px 내에서 #fff이고, 4px보다 큰 반경 내에서 색상이 투명하다는 의미입니다. 이런 식으로 컨테이너 중앙에 직경 8px의 #fff 색상 원이 있습니다(여기서 컨테이너는 after입니다).

(배경 파란색은 데모 효과용입니다.)

Add background-size: 10px 10px; 배경 크기를 너비 10px, 높이 10px로 설정하면 직경 8px의 여러 #fff 색상 원을 얻을 수 있습니다.

(배경 파란색은 데모 효과용입니다.)

left: -5px; 왼쪽으로 5px 오프셋하여 :after의 절반만 .radial-gradient 컨테이너 안에 있도록 합니다.

마지막으로 렌더링이 첨부됩니다

요약

내부 모따기를 달성하려면 실제로 #fff 색상으로 원을 그려야 하며, 원의 1/4만 컨테이너 안에 있어야 합니다. 물결 모양 테두리를 얻으려면 실제로 여러 개의 원을 그려야 합니다. #fff 색상을 사용하면 원의 절반만 컨테이너 안에 있습니다

【 추천 학습: css 비디오 튜토리얼】

위 내용은 CSS에서 물결선 테두리를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!