CSS रूपरेखा-शैली की संपत्ति
उदाहरण
रूपरेखा के लिए एक शैली निर्धारित करें:
div {outline-style: dotted;}
नीचे और अधिक "इसे स्वयं आज़माएं" उदाहरण।
परिभाषा और उपयोग
एक रूपरेखा एक रेखा है जो तत्वों के चारों ओर, सीमाओं के बाहर, तत्व को "बाहर खड़े" बनाने के लिए खींची जाती है।
संपत्ति एक रूपरेखा की outline-style
शैली निर्दिष्ट करती है।
डिफ़ॉल्ट मान: | कोई नहीं |
---|---|
विरासत में मिला: | नहीं |
एनिमेटेबल: | नहीं। एनिमेटेबल के बारे में पढ़ें |
संस्करण: | सीएसएस 2 |
जावास्क्रिप्ट सिंटैक्स: | ऑब्जेक्ट .style.outlineStyle = "धराशायी" |
टिप्स और नोट्स
नोट: रूपरेखा सीमाओं से भिन्न होती है ! सीमा के विपरीत, रूपरेखा तत्व की सीमा के बाहर खींची जाती है, और अन्य सामग्री को ओवरलैप कर सकती है। साथ ही, रूपरेखा तत्व के आयामों का हिस्सा नहीं है; तत्व की कुल चौड़ाई और ऊंचाई रूपरेखा की चौड़ाई से प्रभावित नहीं होती है।
ब्राउज़र समर्थन
तालिका में संख्याएं पहले ब्राउज़र संस्करण को निर्दिष्ट करती हैं जो पूरी तरह से संपत्ति का समर्थन करता है।
Property | |||||
---|---|---|---|---|---|
outline-style | 1.0 | 8.0 | 1.5 | 1.2 | 7.0 |
सीएसएस सिंटेक्स
outline-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
सम्पत्ति की कीमत
Value | Description | Play it |
---|---|---|
none | Specifies no outline. This is default | |
hidden | Specifies a hidden outline | |
dotted | Specifies a dotted outline | |
dashed | Specifies a dashed outline | |
solid | Specifies a solid outline | |
double | Specifies a double outliner | |
groove | Specifies a 3D grooved outline. The effect depends on the outline-color value | |
ridge | Specifies a 3D ridged outline. The effect depends on the outline-color value | |
inset | Specifies a 3D inset outline. The effect depends on the outline-color value | |
outset | Specifies a 3D outset outline. The effect depends on the outline-color value | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
और ज्यादा उदाहरण
उदाहरण
एक धराशायी रूपरेखा:
div {outline-style: dashed;}
उदाहरण
एक ठोस रूपरेखा:
div {outline-style: solid;}
उदाहरण
एक दोहरी रूपरेखा:
div {outline-style: double;}
उदाहरण
एक नाली रूपरेखा:
div {
outline-style:
groove;
outline-color: coral;
outline-width: 7px;
}
उदाहरण
एक रिज रूपरेखा:
div {
outline-style:
ridge;
outline-color: coral;
outline-width: 7px;
}
उदाहरण
एक इनसेट रूपरेखा:
div {
outline-style:
inset;
outline-color: coral;
outline-width: 7px;
}
उदाहरण
एक शुरुआत की रूपरेखा:
div {
outline-style:
outset;
outline-color: coral;
outline-width: 7px;
}
उदाहरण
विभिन्न मानों का उपयोग करके रूपरेखा की शैली निर्धारित करें:
p.a {outline-style: dotted;}
p.b {outline-style: dashed;}
p.c {outline-style: solid;}
p.d {outline-style: double;}
p.e {outline-style: groove;}
p.f {outline-style: ridge;}
p.g {outline-style: inset;}
p.h {outline-style: outset;}
संबंधित पृष्ठ
सीएसएस ट्यूटोरियल: सीएसएस रूपरेखा
सीएसएस संदर्भ: रूपरेखा संपत्ति
एचटीएमएल डोम संदर्भ: रूपरेखा शैली संपत्ति