윤곽선 스타일을 능선(ridge)으로 지정하기
요소의 윤곽선(outline) 스타일을 능선 형태로 만들고 싶다면 outline-style 속성에 ridge 값을 사용하면 됩니다. ridge 값은 윤곽선이 페이지에서 솟아 나온 것처럼 보이는 입체적인 3D 효과를 만들어 줍니다.
참고로 groove 값은 윤곽선이 페이지에 파여 있는 듯한 모습을 표현하며, ridge 값은 정반대로 볼록하게 솟아 있는 모양을 나타냅니다. 또한 윤곽선이 화면에서 뚜렷하게 보이도록 하려면 outline-width 속성으로 적절한 두께를 함께 지정해 주는 것이 좋습니다.
예제
다음 예제는 문단(p) 요소에 두께 3px의 능선(ridge) 윤곽선을 적용한 코드입니다.
<html>
<head>
</head>
<body>
<p style = "outline-width:3px;outline-style:ridge;">
This text is having 3px ridge outline.
</p>
</body>
</html>
위 코드를 브라우저에서 실행하면 해당 문단 주위에 두께 3px의 능선 모양 윤곽선이 솟아 있는 것처럼 표시되는 것을 확인할 수 있습니다.