방법 1 . border 그라디언트
.box { position: relative; width: 100%; height: 90px; background-color: #061c4e; }
.box::before { padding: 1px; position: absolute; background:linear-gradient(160deg,#1CC8FF,#9E00FF); content: ""; inset: 0; border-radius: 12px;
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude; }
방법 2 . input border 그라디언트
<div class="inputWrap">
<input type="number" value="7">
<span>%</span>
</div>
.inputWrap input {
border: 2px solid transparent;
position: relative;
width: 132px;
height: 65px;
background-color: transparent !important;
background-image: linear-gradient(#051f60, #051f60), linear-gradient(135deg, #1765fe, #831cff);
background-clip: padding-box, border-box;
background-origin: border-box;
font-size: 36px;
color: #1CC8FF;
text-align: center;
border-radius: 12px;
}
방법 3 input border autofill 디자인 깨질때
(아이디 비번등 브라우저별 오토필 때문에 디자인이 틀어질 경우)
그냥 박스 두개를 겹쳐서 눈속임한다.
<label>
<span class="gradi">
<input type="text" placeholder="아이디" >
</span>
</label>
.inText label { position: relative; }
.inText .gradi { display: flex;padding: 3px; width: 100%; height: 54px; background-image: linear-gradient(135deg, #53599e, #102950, #53599e); border-radius: 8px; }
.inText { display: flex; gap: 1.4rem; flex-direction: column; width: 340px; }
input{ display:inline-block; margin:0; padding:10px 15px; border: 0 !important; width:100%; height:100%;
background-color:#142d55;color:#fff; border-radius: 8px; }
'CSS' 카테고리의 다른 글
css blend 포토샵 레이어 효과 (0) | 2024.04.28 |
---|---|
input autofill (0) | 2024.04.28 |
부트스트랩 아이콘 배경처럼 넣기 (0) | 2024.04.27 |
input 화살표 버튼 없애기 (0) | 2024.04.26 |
n줄 이상일때 안보이고 말줄임표 CSS (0) | 2024.04.26 |
그라디언드 gradient CSS, 글자에 그라디언트 넣기 (0) | 2024.04.26 |
:not(.클래스명) (0) | 2024.04.26 |
scroll 스크롤바 css (0) | 2024.04.25 |