border에 그라디언트 주면서 border-radius 주는 방법?
본문
안녕하세요, 이런 디자인을 css로 만들어보려고 시도하고있는데 생각처럼 잘 되지 않아 고수님들의 도움을 구해니다.
<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를 줄 수 있는 방법이 있을까요?
답변 2
다음과 같이 하면 가능하지 않을까 합니다.
.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; /* 내부 여백 */
}
시도해본 결과 border-radius만 적용되지 않는 것같습니다. 이게 들어가야하는 디자인이라서 난감하네요..ㅠㅠ 모쪼록 시간내서 답변 주셔서 감사합니다.
답변을 작성하시기 전에 로그인 해주세요.
