SIR
목록으로

border에 그라디언트 주면서 border-radius 주는 방법? 채택완료

ZDZ
프로필 보기이 회원 글보기이 회원의 댓글보기
 1년 전 조회 1,822
답변 2
목록

1889326033_1709522269.9636.png

안녕하세요, 이런 디자인을 css로 만들어보려고 시도하고있는데 생각처럼 잘 되지 않아 고수님들의 도움을 구해니다.

 

Copy 
<div class="img_box probio_wrap">
                <div class="normal">
                    <div class="name">A</div>
                    <div class="probio_txt">
                        <p>텍스트</p>
                    </div>
                </div>
                <div class="special">
                    <div class="name">B</div>
                    <div class="probio_txt">
                        <p>텍스트</p>
                    </div>
                </div>
            </div>

 

코드 구성은 이렇고, probio_txt 이 부분에 그라디언트 border와 border-radius를 치려고합니다. 세간에 많이 알려진 방법으로 넣어봤더니 백그라운드가 #fff로 깔리고 투명으로 하면 그라디언트로 보여버려서; 백그라운드가 투명이고 보더만 그라디언트면서, border-radius를 줄 수 있는 방법이 있을까요?

 

#그누보드5

답변 2개

다음과 같이 하면 가능하지 않을까 합니다.

Copy 
.probio_txt {
    background-color: transparent;
    border: 2px solid transparent; /* 투명한 테두리 */
    border-image: linear-gradient(to right, #ff7e5f, #feb47b); /* 그라디언트 테두리 */
    border-image-slice: 1; /* 테두리 슬라이스 크기 */
    border-radius: 10px; /* 보더 반경 */
    padding: 10px; /* 내부 여백 */
}
로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

시도해본 결과 border-radius만 적용되지 않는 것같습니다. 이게 들어가야하는 디자인이라서 난감하네요..ㅠㅠ 모쪼록 시간내서 답변 주셔서 감사합니다.

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고