실험용2 편집하기 (부분)

==== 테두리 그레디언트 ====
테두리 그레디언트는 웹 디자인에서도 자주 쓰입니다.

<syntaxhighlight lang=html style="">
<div style="border:3px solid transparent;background: linear-gradient(#fff,#fff) padding-box, linear-gradient(90deg, #FC5D9D, #F8C596) border-box;border-radius:5px;">
테두리 그레디언트
</div>
</syntaxhighlight>

<div style="border:3px solid transparent;background: linear-gradient(#fff,#fff) padding-box, linear-gradient(90deg, #FC5D9D, #F8C596) border-box;border-radius:5px;">
테두리 그레디언트
</div>


border-image에 그레디언트 속성을 작성해도 테두리 그레디언트가 적용이 되는데 그러면 border-radius가 먹히지 않으니 위의 예시대로 작성해주셔야 됩니다. 배경을 두 부분으로 나누어 주어 테두리 안쪽을 기준으로 한 배경(padding-box)을 흰색-흰색, 그레디언트 테두리를 기준으로 한 배경(border-box)에 그레디언트를 적용해주고 테두리 색을 투명으로 지정해 주면 border-box의 그레디언트가 테두리에만 노출되게 됩니다. 반드시 padding-box 먼저 그 다음 border-box 순서로 작성해야 됩니다. 반대로 적으면 border-box 속성이 padding-box를 씹어먹기 때문에 정상적으로 출력이 안됩니다.