[CSS] 그라디언트 배경 / 테두리

 

1. 그라디언트 배경 색 설정

- 2가지 이상의 그라디언트 색 지정 가능

- 그라디언트 방향 / 각도 지정 가능

디폴트(기본값)는 To bottom, 그리고 180 deg

방향지정 To top, to bottom, to right, to left

각도지정 0 deg, 180 deg, 90 deg, 270 deg

background: linear-gradient(0deg, yellow, lightGreen);
background: linear-gradient(to top, yellow, lightGreen);

/* 그라디언트 배경색 예*/
background: linear-gradient(45deg, Violet, Orange); /* 대각선 그라디언트 */
background: linear-gradient(lightCyan, skyBlue, deepSkyBlue); /* 3가지 색 */
background: linear-gradient(Red 70%, Orange); /* 색이 변하는 지점 설정 */

https://fickly.tistory.com/71

CSS로 배경색에 그라데이션 입히기

 

2. 그라디언트 테두리

방법 1 ) 축약형 그라디언트 테두리

boder / border-radius / background 속성 적용하기

/* HTML 코드
    <div class="box"></div>
*/

.box {
  width: 200px;
  height: 100px;
  border:8px solid transparent; 
  border-radius:20px;
  background:
    linear-gradient(white,white) padding-box,
    linear-gradient(40deg, gold, royalblue) border-box;
}

https://dev.to/afif/border-with-gradient-and-radius-387f     댓글 참조(댓글 작성자: 테마니 아피프)

Border with gradient and radius

 

 

방법 2) 그라디언트 테두리 (적용 불가능 방법 포함)

.box1 👎

- border-image 에 그라디언트를 적용하면, border-radius 가 적용되지 않습니다.

 

.box2 👍

- border 색을 투명(transparent)으로 지정하고,

background-image 에 그라디언트를 적용한 뒤, background-clip로 투명한 테두리에 색을 입힌다.

첫번째 그라디언트는 배경색으로 clip 의 첫번째 속성(content-box)이 적용되고,

두번째 그라디언트는 테두리색으로 clip 의 두번째 속성(border-box)에 적용된다.

/* HTML 코드
<div class="box1"></div>
<div class="box2"></div>
*/

html { background: #222222 }

.box1 {
    width: 200px;
    height: 100px;
    background-color: #444444;
    border: 5px solid;
    border-radius: 20px;
    border-image: linear-gradient(to right, #fbfcb9be, #ffcdf3aa, #65d3ffaa);
    border-image-slice: 1;
    margin: 10px;
}

.box2 {
    width: 200px;
    height: 100px;
    border: 5px solid transparent;
    border-radius: 20px;
    background-image: 
        linear-gradient(#444444, #444444), 
        linear-gradient(to right, #fbfcb9be, #ffcdf3aa, #65d3ffaa);
    background-origin: border-box;
    /* content-box 대신 padding-box를 사용하면 padding을 제외한 순수한 border에만 적용됨*/
    background-clip: content-box, border-box;
}

https://limqoh.tistory.com/entry/web05

[HTML+CSS] border에 그라데이션 넣기

 

 

https://velog.io/@dltjsgho/css-border%EC%97%90-%EA%B7%B8%EB%9D%BC%EB%8D%B0%EC%9D%B4%EC%85%98-%EB%84%A3%EA%B8%B0

css : ) border에 그라데이션 넣기