[CSS] border에 gradation,gradient 적용하기 ( + radius 포함 )

 

border에 gradation,gradient 적용하기 ( + radius 포함 )

 

오늘도 디자인시안으로 부터 미션을 받은 나.. 😭😅

 

웹브라우저에서 적용되는 css 스타일코드가 많은 발전이 되었다.

브라우저 또한 IE의 하위브라우저도 많이 종료되었고, 모던브라우저로 대부분 크로스브라우징도 또한 큰 이슈 없이 적용되고 있다.

 

하지만!

크로스브라우징에 이슈가 없어 보이는 border에 그라데이션을 적용하는 부분에서 이슈가 발생했다! 😱

 

 

일단!

border에 그라데이션을 넣기 위해서는 border-image:linear-gradient() 속성을 사용해야 한다.

 

 

 

챕터 1️⃣ border-image - linear gradient

border-image로 linear-gradient() 사용하기!

그라데이션 border를 노출시킬 수 있다.

단, border-radius가 없는 상태에서!

See the Pen 1. border-image - linear gradient by yeony (@yeony1011) on CodePen.

 

챕터 2️⃣ border-image - linear gradient + border-radius

챕터 1️⃣ 과 동일한 상태에서 border-radius를 추가해 보자!

뚜둥! border-radius를 적용했는데도, 적용되지 않는 모습!! 😤

See the Pen 2. border-image - linear gradient + border-radius by yeony (@yeony1011) on CodePen.

 

챕터 3️⃣ border-image - linear gradient + border-radius

챕터 2️⃣ 에서 실패로 border-radius 넣기 재도전!

background에 흰색 배경을 깔아보자!

👏👏성공👏👏

인 줄 알았지만, 크로스브라우징 체크 결과 radius가 미적용된 브라우저가 많았다.. 😢

 

<크로스브라우징에서 미적용된 브라우저>

- window > IE

- window > Firefox

- mac > Safari

- mac > Firefox

 

( 파이어폭스는 그냥 다 안되네.. 🥲 )

See the Pen 3. border-image - linear gradient + border-radius by yeony (@yeony1011) on CodePen.

 

 

챕터 4️⃣ background-image - linear gradient + border-radius

드디어!!

대망의 바라고 바라던 border + 그라데이션 + radius 세 가지 적용된 완성작 성공!! 👍

background-origin : background 시작점

background-clip : background 완성점

두 가지 속성을 추가해 뒷부분에 흰색배경을 깔고, border를 그려줌으로써 크로스브라우징이 되는 border에 그라데이션과 radius를 적용할 수 있었다!! 👏

하지만 여기서 또 다른 문제점 발견!! 🧐

배경을 꼭 흰색이나 배경색을 넣어야 한다는 것이다...

투명배경 안됨 😭

보통은 이미지에 border와 radius를 적용한 시안을 받게 된다.

그렇다면 흰색배경을 넣을 수 없다.

이렇게 된 이상 5차 시기 도전이다! 😂

See the Pen 4. background-image - linear gradient + border-radius by yeony (@yeony1011) on CodePen.

 

챕터 5️⃣ background-image - linear gradient + border-radius + 이미지 위 border

드디어!! 찐찐찐 마지막으로 성공!! 👏😎

 

See the Pen 5. background-image - linear gradient + border-radius + 이미지 위 border by yeony (@yeony1011) on CodePen.

 

유익하셨다면,

채널 추가 / 블로그 구독 / 공감 부탁드려요 🙏