Notice
Recent Posts
Recent Comments
Link
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

연습장

그라디언트 보더 사용하기 본문

css

그라디언트 보더 사용하기

BakJuBal 2022. 2. 10. 12:55 
<head>
    <style>
        *{padding:0;margin:0;}
        ul,li{list-style:none;}

        ul{display:flex;justify-content:space-between;gap:10px;}
        li{width:25%;border-radius:50%;border:1px solid transparent;background-image: linear-gradient(#fff, #fff), linear-gradient(300deg, #d992ea 0%, #a8c4e2 100%);background-origin: border-box;
        background-clip: content-box, border-box;}
        li div{padding-top:100%;}
    </style>
</head>
<body>
    <ul>
        <li><div></div></li>
        <li><div></div></li>
        <li><div></div></li>
        <li><div></div></li>
    </ul>
</body>

포인트는 정렬용 태그의 직계자식에 pdt100% 삽입

만약div안에 컨텐츠가 들어간다면 li>pdt100%>컨텐츠랩 해놓고 컨텐츠 랩을 absolute로 띄워야할것

 

linear-gradient border

저작자표시

'css' 카테고리의 다른 글

포토샵 drop-shadow 를 css로 그대로 표현하기  (0) 2021.12.16
핀터레스트 스타일 레이아웃 (벽돌 레이아웃, masonry)  (0) 2021.11.25
reset css  (0) 2021.11.10
컨텐츠 뒤에서 옆으로 지나가는 텍스트 애니메이션  (0) 2021.11.09
'css' Related Articles more