그라데이션2 [HTML+CSS] border에 그라데이션 넣기 border(테두리)에 그라데이션 효과 넣는 예제입니다. See the Pen border gradation by limqo (@limqo) on CodePen. 위의 코드에서 box1의 div는 border-image를 이용하여 gradation 넣은 것을 확인 할 수 있습니다. 하지만 box1에 border-radius가 적용되있지 않은 것 을 볼 수 있습니다. box2 처럼 설정을 하면 border-image에 border-radius 적용시킬 수 있습니다. 2020. 8. 7. [HTML+CSS] div 자연스러운 테두리 효과(box-shadow) 3D의 dashborad의 느낌으로 div를 꾸미기 위해 box-shadow를 이용하면 자연스러운 연출을 할 수 있습니다. See the Pen 테두리 그라에디션 효과 by limqo (@limqo) on CodePen. box-shadow는 shadow방향(ouset, inset), Xoffset, Yoffset, Blur(흐림), Spread(확산), color로 구성되 있습니다. 크롬의 DevTools를 이용하면 쉽게 사용하고 이해할 수 있습니다. 그림처럼 DevTools에 Style 탭에서 box-shadow앞에 아이콘을 확인할 수 있습니다. 이 아이콘을 클릭하게 되면 아래와 같은 설정창이 나옵니다. 위 창에서 원하는 수치를 확인하면서 작업하면 더 쉽게 작업을 할 수 있습니다. 2020. 7. 27. 이전 1 다음 728x90 반응형
