Computer >> कंप्यूटर ट्यूटोरियल >  >> प्रोग्रामिंग >> CSS

CSS से आउटलाइन स्टाइल को रिज (ridge) बनाना

परिचय

`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` मध्यम ग्रे होना चाहिए (बहुत गहरा/हल्का नहीं)। ब्राउज़र लाइटर/डार्कर शेड्स ऑटोमेटिकली गणना करता है।

  1. CSS से आउटलाइन बटन कैसे स्टाइल करें? CSS से आउटलाइन बटन कैसे स्टाइल करें?

    CSS से आउटलाइन बटन स्टाइल करने का कोड निम्नलिखित है:उदाहरण<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> button {    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, san

  1. CSS से hr एलिमेंट स्टाइल करना CSS से hr एलिमेंट स्टाइल करना

    hr स्टाइलिंग CSS से <hr> एलिमेंट को स्टाइल करने के लिए निम्न कोड उपयोग करें: उदाहरण <!DOCTYPE html> <html> <meta name=viewport content=width=device-width, initial-scale=1> <head> <style> body{ font-family: Segoe UI, Tahoma, Geneva, Verdana, sans-serif; margin: 20

  1. CSS से लेबल्स स्टाइल करना CSS से लेबल्स स्टाइल करना

    लेबल स्टाइल्स CSS से लेबल्स स्टाइल करने के लिए निम्न कोड उपयोग करें: उदाहरण <!DOCTYPE html> <html> <head> <meta name=viewport content=width=device-width, initial-scale=1 /> <style> body { font-family: Segoe UI, Tahoma, Geneva, Verdana, sans-serif; margin: 20px; } span