1-2. 로그인페이지만들기(input 꾸미기)

input 박스에 선을 그라데이션으로 넣기(border-radius도 할 수 있는 방법)

    border: 1px solid transparent;

    border-radius: 5px;

    background-image: linear-gradient(white, white), linear-gradient(to right, #A29BFE,#FD79A8);

    background-origin: border-box;

    background-clip: content-box, border-box;

 

1.background-image: linear-gradient(white, white), linear-gradient(to right, #fbfcb9be, #ffcdf3aa, #65d3ffaa); : 요소의 배경 이미지를 설정합니다. 여기서는 두 개의 선형 그라디언트를 사용했습니다. 첫 번째 그라디언트는 상하 방향으로 동일한 색상(흰색)을 가진 그라디언트이며, 두 번째 그라디언트는 좌우 방향으로 세 가지 색상을 가진 그라디언트입니다.

=> 흰색, 그라데이션배경 설정.

2.background-origin: border-box; : 배경 이미지의 위치를 결정하는 기준점을 설정합니다. 여기서는 'border-box'로 설정하여, 테두리를 포함한 전체 박스에서 배경 이미지의 위치를 결정하도록 했습니다.

=> border-box로 설정해서 전체박스에 배경 이미지(background-image)가 들어갈수 있게 함.

3.background-clip: content-box, border-box; : 배경 이미지가 어디까지 늘어나야 하는지를 결정합니다. 여기서는 'content-box'와 'border-box'를 지정하여, 첫 번째 배경 이미지는 콘텐츠 영역까지, 두 번째 배경 이미지는 테두리를 포함한 전체 박스까지 늘어나도록 했습니다.

=> 흰색은 안쪽 콘텐츠 영역만, 그라데이션 배경은 전체영역을 색칠해서 테두리만 그라데이션인것처럼 보이게됨.

 

*이렇게 설정해야 border-radius가 적용됨.

그라데이션 input박스