본문 바로가기
웹코딩 배우기/· CSS

CSS - background, padding으로 border(그라디언트) 효과 내기

by 닐기 2022. 12. 20.

See the Pen background, padding 테두리 그라디언트 by nilgi (@nilgi) on CodePen.

 

 

border-image를 사용하여 테두리에 그라디언트를 넣는 방법을 배웠다. 그러나 이는 border-radius를 적용할 수 없다.

적용하는 방법이 있지만 약간 복잡하다.

그래서 대체하여 background, padding으로 그라디언트가 있는 둥근 모서리 테두리 효과를 쉽게 낼 수 있다.

 

.bp_bor_box {
      display: inline-block;
      background: linear-gradient(to right, tomato, gray);

         // 전체 박스에 그라디언트 배경을 지정한다.
      padding: 6px;
      border-radius: 13px;
    }
.bp_bor {
    background: #fff;

         // 내용이 들어가는 박스에 바탕이 되는 색(투명처럼 보이게)을 지정한다.
    padding: 10px;

         // 전체 박스의  padding값과 내용 박스의 padding값의 차이로 테두리 효과를 낸다.
    border-radius: 10px;
}