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

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: 20px; }
hr{ margin-bottom: 20px; }
.solid { border-top: 5px solid rgb(16, 2, 141); }
.dashed { border-top: 5px dashed rgb(190, 13, 146); }
.double { border-top: 5px double rgb(22, 145, 11); }
.dotted { border: 5px dotted rgb(200, 255, 0); }
.round { border: 5px solid rgb(35, 196, 142); border-radius: 5px; }
</style>
</head>
<body>
<h1 style="text-align: center;">HR styling example</h1>
<hr class="solid"> <hr class="dashed"> <hr class="double"> <hr class="dotted"> <hr class="round">
</body>
</html>

आउटपुट

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


  1. CSS से होवर पर एलिमेंट को ज़ूम/स्केल कैसे करें? CSS से होवर पर एलिमेंट को ज़ूम/स्केल कैसे करें?

    CSS से होवर पर एलिमेंट को ज़ूम/स्केल करने के लिए, कोड निम्नानुसार है -उदाहरण<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>    * {       box-sizing: border-box; &nb

  1. CSS से हेडर को स्टाइल कैसे करें? CSS से हेडर को स्टाइल कैसे करें?

    उदाहरण CSS का उपयोग करके हेडर को स्टाइल करने के लिए, निम्न कोड का उपयोग करें: <!DOCTYPE html> <html> <head> <title>पृष्ठ शीर्षक</title> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /&

  1. CSS के साथ किसी एलिमेंट को सर्कुलर पथ में कैसे मूव करें CSS के साथ किसी एलिमेंट को सर्कुलर पथ में कैसे मूव करें

    परिचय CSS एनिमेशन transform फंक्शन्स को संयोजित, रोटेट, और ट्रांसलेट करके एलिमेंट्स को विभिन्न तरीकों से ट्रांसफॉर्म करने में हमारी मदद कर सकते हैं। उदाहरण: CSS ट्रांसफॉर्म के साथ सर्कुलर मोशन <!DOCTYPE html> <html> <head> <style> div { margin: 8%; width: