CSS
CSS - background, padding으로 border(그라디언트) 효과 내기
혜원21
2022. 12. 20. 14:26
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;
}