परिचय
`outline-style: ridge` आउटलाइन को 3D उभरी हुई (रिज) दिखाता है। `groove` का विपरीत।
उदाहरण
<html>
<head>
<style>
.ridge-outline {
outline-width: 3px;
outline-style: ridge;
outline-color: #888;
padding: 20px;
margin: 20px;
}
</style>
</head>
<body>
<p class="ridge-outline">
इस टेक्स्ट में 3px रिज आउटलाइन है।
</p>
</body>
</html>
3D आउटलाइन स्टाइल्स तुलना
| स्टाइल | दिखावट |
|---|---|
| groove | पेज में उकेरा हुआ (अंदर धंसा) |
| ridge | पेज से उभरा हुआ (बाहर निकला) |
| inset | एलिमेंट अंदर धंसा हुआ |
| outset | एलिमेंट बाहर उभरा हुआ |
नोट
रिज/ग्रूव प्रभाव के लिए `outline-color` मध्यम ग्रे होना चाहिए (बहुत गहरा/हल्का नहीं)। ब्राउज़र लाइटर/डार्कर शेड्स ऑटोमेटिकली गणना करता है।