CSS 불규칙 테두리 생 성 방안

필요 한 배경,불규칙 한 도형 에 테두리 추가
우리 의 일상적인 개발 에서 시간 이 지나 면 비 직사각형,비 원형 도안 을 만 날 수 있다.다음 과 같은 것들:

순수한 CSS 를 사용 하고 기 교 를 조합 하면 위의 도형 을 만 들 수 있다.물론 이것 은 필요 한 첫걸음 일 뿐이다.
이 어 상기 도형 에 테 두 리 를 추가 하 라 는 요구 가 있 을 수 있 으 므 로 이 럴 때 CSS 는 하기 어렵다.
drop-shadow 를 사용 하여 테 두 리 를 추가 하려 고 시도 합 니 다.
첫 번 째 방법 은 drop-shadow 를 사용 하여 불규칙 한 그림 자 를 추가 할 수 있 습 니 다.
우 리 는 하나의 화살표 도형 을 예 로 들 어 CSS 를 사용 하여 간단하게 그것 을 실현 하 는 방법 중 하 나 는 다음 과 같다.

<div class="arrow-button"></div>

.arrow-button {
position: relative;
width: 180px;
height: 64px;
background: #f49714;

&::after {
content: "";
position: absolute;
width: 32px;
height: 64px;
top: 0;
right: -32px;
background:
linear-gradient(-45deg, transparent 0, transparent 22px, #f49714 22px, #f49714 100%),
linear-gradient(-135deg, transparent 0, transparent 22px, #f49714 22px, #f49714 100%);
background-size: 32px 32px;
background-repeat: no-repeat;
background-position: 0 bottom, 0 top;
}
}

우 리 는.arrow-button 에 drop-shadow 를 추가 함으로써 불규칙 한 도형 에 음영 을 추가 할 수 있 습 니 다.효 과 는 다음 과 같 습 니 다.

.arrow-button {
...
filter: drop-shadow(0px 0px 2px #000);
...
}

drop-shadow 방안 의 한계 성
drop-shadow 방안 을 사용 하 는 한 계 는 drop-shadow 가 불규칙 한 도형 에 만 음영 을 생 성 할 수 있 고 모호 하지 않 은 테두리 효 과 를 생 성 할 수 없다 는 것 이다.
위 그림 에 drop-shadow 를 추가 하 는 효 과 는 다음 과 같 습 니 다.우리 가 원 하 는 실체 와 모호 하지 않 은 테두리 와 차이 가 있 습 니 다.

SVG feMorphology 필터 로 테두리 추가
우 리 는 또 생각 을 바 꾸 어 원래 의 도형 을 복사 한 다음 에 이 를 약간 확대 하여 테두리 의 색 으로 바 꾼 다음 에 두 개의 도형 을 겹 치면 테두리 가 있 는 불규칙 한 도형 을 만 들 수 있다.
CSS 에서 도 요 소 를 확대 할 수 있 는 능력 transform:scale()이 있 지만 그 자체 가 원 도형 을 실현 하 는 코드 는 이미 매우 복잡 할 수 있 습 니 다.하 나 를 더 하면 우아 하지 않 을 수 있 습 니 다.우 리 는 다른 길 을 개척 하여 비슷 한 실현 방안 을 찾 아야 합 니 다.
SVG 의 femorphology 필 터 를 사용 하여 불규칙 한 도형 에 테 두 리 를 추가 하려 고 합 니 다.
만약 당신 이 SVG 필터 에 대해 아직 잘 모른다 면,나의 이 글 의 입문 을 간단하게 볼 수 있 습 니 다:재 미 있 습 니 다!강력 한 SVG 필터
간단하게 femorphology 필 터 를 소개 하 겠 습 니 다.
feMorphology 필터
femorphology 는 형태 필터 입 니 다.입력 원 은 보통 도형 의 알파 채널 입 니 다.두 가지 조작 으로 소스 도형 을 부식 시 키 거나 확장 시 킬 수 있 습 니 다.
속성 operator 를 사용 하여 부식 효과 인지 확장 효과 인지 확인 합 니 다.속성 radius 를 사용 하여 효과 의 정 도 를 나타 내 며 터치 의 크기 로 이해 할 수 있 습 니 다.
operator:erode 부식 모드,dilate 는 확장 모드 이 고 기본 값 은 eroder 입 니 다.
adius:터치 의 크기,숫자 를 받 아들 여 이 모드 의 효과 정 도 를 표시 합 니 다.기본 값 은 0 입 니 다.
우 리 는 이 필 터 를 텍스트 에 간단하게 적용 해서 효 과 를 볼 것 이다.

<div class="g-text">
<p>Normal Text</p>
<p class="dilate">Normal Text</p>
<p class="erode">Normal Text</p>
</div>

<svg width="0" height="0">
<filter id="dilate">
<feMorphology in="SourceAlpha" result="DILATED" operator="dilate" radius="3"></feMorphology>
</filter>
<filter id="erode">
<feMorphology in="SourceAlpha" result="ERODE" operator="erode" radius="1"></feMorphology>
</filter>
</svg>

p {
font-size: 64px;
}
.dilate {
filter: url(#dilate);
}
.erode {
filter: url(#erode);
}

효 과 는 다음 과 같다.가장 왼쪽 은 정상 적 인 문자 이 고 중간 은 확장 모델 이 며 오른쪽 은 부식 모델 이다.효 과 를 보면 이해 하기 쉽다.

femorphology 의 확장 능력 을 빌려 불규칙 한 도형 에 테 두 리 를 추가 합 니 다.
femorphology 의 확장 능력 을 이용 하여 우 리 는 SVG femorphology 필 터 를 미리 준비 할 수 있 습 니 다.그 역할 은 바로 상술 한 것 입 니 다.
원본 그림 을 복사 한 다음 에 살짝 확대 해서 테두리 의 색 으로 바 꾼 다음 에 두 개의 그림 을 겹 치면 테두리 가 있 는 불규칙 한 도형 을 만 들 수 있 습 니 다.
또한 SVG 필 터 는 CSS Filter 의 url 모드 를 통 해 다양한 그래 픽 에 간단하게 도입 할 수 있어 재 활용 성 이 매우 높다.
이 필터 의 간단 한 코드 는 다음 과 같다.

<svg width="0" height="0">
<filter id="outline">
<feMorphology in="SourceAlpha" result="DILATED" operator="dilate" radius="1"></feMorphology>
<feMerge>
<feMergeNode in="DILATED" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</svg>

이 SVG 필터 코드 를 간단하게 분석 합 니 다.
1.원본 그림 의 불투명 한 부분 을 입력 하고 dilate 확장 모드 와 정 도 는 radius="1"로 원본 그림 보다 1px 큰 검은색 그림 블록 을 생 성 합 니 다.
2.femerge 를 사용 하여 검은색 그림 조각 과 원 도 를 겹 쳐 서
위 와 같은.arrow-button 에 CSS filter filter:url(\#outline)을 추가 하여 만 든 SVG 필 터 를 도입 합 니 다.

.arrow-button {
...
filter: url(#outline);
...
}

url 은 CSS 필터 속성의 키워드 중 하나 입 니 다.url 모드 는 CSS 필터 가 제공 하 는 능력 중 하나 로 특정한 SVG 필 터 를 도입 할 수 있 습 니 다.이것 은 CSS 필터 의 능력 을 크게 향상 시 킵 니 다.
효과 보기:

Wow,이제 성 공 했 습 니 다.femorphology 필 터 를 통 해 불규칙 한 그래 픽 에 테두리 효 과 를 추가 하 는 데 성 공 했 습 니 다.필터 의 radius="1"을 제어 하여 테두리 의 크기 를 조절 할 수 있 습 니 다.
상기 필 터 를 각종 불규칙 한 도형 에 활용 하여 효 과 를 봅 니 다.

효 과 는 그런대로 괜 찮 은 편 이지 만 색깔 은 검은색 이다.만약 우리 가 테두리 의 색깔 이 다른 색깔 이 기 를 원한 다 면 방법 이 있 습 니까?
feFlood 와 feComposite 를 추가 하여 테두리 색상 을 변경 합 니 다.
feFlood 와 feComposite 두 개의 SVG 필 터 를 통 해 생 성 된 그림 블록 에 서로 다른 색 을 줄 수 있 습 니 다.코드 는 다음 과 같 습 니 다.

<svg width="0" height="0">
<filter id="outline">
<feMorphology in="SourceAlpha" result="DILATED" operator="dilate" radius="1"></feMorphology>

<feFlood flood-color="green" flood-opacity="1" result="flood"></feFlood>
<feComposite in="flood" in2="DILATED" operator="in" result="OUTLINE"></feComposite>

<feMerge>
<feMergeNode in="OUTLINE" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</svg>

feFlood 의 flood-color="green"을 통 해 생 성 된 테두리(그림 블록)의 색상 을 제어 할 수 있 습 니 다.여 기 는 녹색 으로 설정 되 어 있 습 니 다.각 도형 에 적용 되 는 효 과 는 다음 과 같 습 니 다.

이로써 SVG 필 터 를 통 해 불규칙 한 그래 픽 에 서로 다른 색 을 추가 하 는 테 두 리 를 구현 했다.
총결산
간단하게 요약 하면:

drop-shadow 를 사용 하면 불규칙 한 도형 에 음영 을 추가 할 수 있 지만 불규칙 한 도형 에 실체 가 모호 하지 않 은 테 두 리 를 추가 할 수 없습니다

femorphology SVG 필 터 를 사용 하면 불규칙 한 도형 에 테두리 효 과 를 추가 할 수 있 습 니 다.radius="1"을 제어 하면 테두리 의 크기 를 조절 할 수 있 습 니 다

4

feMorphology 를 사용 하여 feFlood 와 feComposite 필 터 를 사용 하여 테두리 의 색 을 바 꿉 니 다

CSS Filter 의 url 모드 를 통 해 SVG 필 터 를 HTML 요소 로 빠르게 도입 할 수 있 습 니 다.예 를 들 어 filter:url(\#outline)

주의해 야 할 것 은 도형 의 높이 와 너비 가 1:1 이 아니 고 femorphology 의 dilate 모델 도 요소 의 높이 와 너비 등 비례 에 따라 확장 되 지 않 기 때문에 생 성 된 테 두 리 는 반드시 곳곳에 균일 하 게 같 지 않 고 femorphology 의 radius 속성 은 두 개의 값 에 들 어 갈 수 있 으 며 빈 칸 으로 분리 하여 각각 가로 와 세로 의 확장 크기 를 나타 낸다.실제 사용 시 미세 조정 이 가능 합 니 다.
본 고 는 불규칙 한 테두리 의 생 성 방안 의 사고방식 을 제공한다.물론 구체 적 으로 이런 상황 을 만나면 대부분 절 도 를 위주 로 하지만 실행 가능 한 방법 을 많이 파악 하 는 것 도 나 쁘 지 않다.
이상 은 CSS 불규칙 테두리 생 성 방안 에 대한 상세 한 내용 입 니 다.CSS 불규칙 테두리 생 성 방안 에 대한 자 료 는 다른 관련 글 을 주목 하 십시오!