CSS
झांकियों के लिए आकार

वाक्य - विन्यास

• आकार-बाहर: कोई नहीं | [<मूल-आकृति> || <आकार-बॉक्स>] | <छवि>

• आकार-मार्जिन: <लंबाई> | <प्रतिशत>

• आकार-छवि-दहलीज: <संख्या>

पैरामीटर

टिप्पणियों

बेसिक शेप के साथ आउटसाइड - सर्कल ()

shape-outside सीएसएस संपत्ति के साथ एक फ्लोट क्षेत्र के लिए आकार मूल्यों को परिभाषित कर सकता है ताकि इनलाइन सामग्री फ्लोट के बॉक्स के बजाय आकार के चारों ओर लपेटे।

सीएसएस

img:nth-of-type(1) {
  shape-outside: circle(80px at 50% 50%);
  float: left;
  width: 200px;
}
img:nth-of-type(2) {
  shape-outside: circle(80px at 50% 50%);
  float: right;
  width: 200px;  
}
p {
  text-align: center;
  line-height: 30px; /* purely for demo */
}

एचटीएमएल

<img src="http://images.clipartpanda.com/circle-clip-art-circlergb.jpg">
<img src="http://images.clipartpanda.com/circle-clip-art-circlergb.jpg">
<p>Some paragraph whose text content is required to be wrapped such that it follows the curve of the circle on either side. And then there is some filler text just to make the text long enough. Lorem Ipsum Dolor Sit Amet....</p>

उपरोक्त उदाहरण में, दोनों चित्र वास्तव में वर्गाकार चित्र हैं और जब पाठ को shape-outside संपत्ति के बिना रखा जाता है, तो यह दोनों तरफ के घेरे में नहीं बहेगा। यह केवल छवि के बॉक्स वाले बॉक्स के चारों ओर बहेगा। shape-outside के साथ फ्लोट क्षेत्र को एक सर्कल के रूप में फिर से परिभाषित किया जाता है और सामग्री को इस काल्पनिक सर्कल के चारों ओर प्रवाहित किया जाता है जो shape-outside का उपयोग करके बनाया जाता है।

फ्लोट क्षेत्र को फिर से परिभाषित करने के लिए उपयोग किया जाने वाला काल्पनिक चक्र छवि के संदर्भ बॉक्स के मध्य-मध्य बिंदु से खींची गई 80px की त्रिज्या वाला एक चक्र है।

नीचे स्क्रीनशॉट के एक जोड़े को यह वर्णन किया गया है कि जब shape-outside का उपयोग किया जाता है और जब इसका उपयोग नहीं किया जाता है तो सामग्री को कैसे लपेटा जाएगा।

shape-outside साथ आउटपुट

shape-outside बिना आउटपुट

आकार का मार्जिन

shape-margin सीएसएस सीएसएस गुण shape-outside लिए एक मार्जिन जोड़ता है।

सीएसएस

img:nth-of-type(1) {
  shape-outside: circle(80px at 50% 50%);
  shape-margin: 10px;
  float: left;
  width: 200px;
}
img:nth-of-type(2) {
  shape-outside: circle(80px at 50% 50%);
  shape-margin: 10px;
  float: right;
  width: 200px;  
}
p {
  text-align: center;
  line-height: 30px; /* purely for demo */
}

एचटीएमएल

<img src="http://images.clipartpanda.com/circle-clip-art-circlergb.jpg">
<img src="http://images.clipartpanda.com/circle-clip-art-circlergb.jpg">
<p>Some paragraph whose text content is required to be wrapped such that it follows the curve of the circle on either side. And then there is some filler text just to make the text long enough. Lorem Ipsum Dolor Sit Amet....</p>

इस उदाहरण में, एक 10px मार्जिन आकार का उपयोग करते हुए चारों ओर जोड़ा जाता है shape-margin । यह काल्पनिक सर्कल के बीच थोड़ा अधिक स्थान बनाता है जो फ्लोट क्षेत्र और आसपास बहने वाली वास्तविक सामग्री को परिभाषित करता है।

आउटपुट: