CSS షేప్-ఆఉట్ అట్రిబ్యూట్

定义和用法

shape-outside 属性允许您为行内内容定义包裹形状。默认情况下，行内内容会围绕其外边距框进行包裹，而使用 shape-outsideఈ ప్రకారం ప్రసరణను పరిచయం చేయవచ్చు.

shape-outside లక్షణం ఫ్లాట్ ఎలిమెంట్ యొక్క ఫ్లాట్ ఏరియాను నిర్వచిస్తుంది. ఈ ఫ్లాట్ ఏరియా అంతర్గత కంటెంట్ ఫ్లాట్ ఎలిమెంట్ చుట్టూ ప్రసరిస్తుంది.

ప్రతిమాత్రక ఉదాహరణ

ఇమేజ్ చుట్టూ అంతర్గత కంటెంట్ పెరిగిపోవడానికి అనుమతిస్తుంది:

img {
  float: left;
  clip-path: circle(40%);
  shape-outside: circle(45%);
}

ప్రయోగించండి

CSS సంకేతబద్ధత

shape-outside: none|margin-box|border-box|padding-box|content-box|basic-shape|url(image)|initial|inherit;

లక్షణ విలువ

విలువ వివరణ
కొత్త మూల విలువ. ఫ్లాట్ ఏరియా ప్రభావితం కాదు. అంతర్గత కంటెంట్ అంతర్గత మేర్జిన్ బాక్స్ చుట్టూ ప్రసరిస్తుంది.
margin-box మేర్జిన్ బాక్స్ చుట్టూ ఉన్న ఆకారాన్ని నిర్వచించండి.
border-box బార్డర్ బాక్స్ చుట్టూ ఉన్న ఆకారాన్ని నిర్వచించండి.
padding-box అంతర్భాగ ప్యాడింగ్ బాక్స్ చుట్టూ ఉన్న ఆకారాన్ని నిర్వచించండి.
content-box

కంటెంట్ అంగారణం చుట్టూ ఉన్న ఆకారాన్ని నిర్వచించండి.

ఈ పెట్టె యొక్క ప్రతి మూలను రెండు రేఖాంశాలు ఉండాలి లేదా border-radius - border-width - padding లో అతిపెద్ద విలువ.
basic-shape ఫ్లాట్ ఏరియా ఇన్సెట్()、circle()、ellipse() లేదా polygon() ఫంక్షన్స్ యొక్క ఆకారం ఆధారంగా ఉంటుంది.
url(చిత్రం) ఫ్లాట్ ఏరియా ప్రత్యేకంగా నిర్వచించబడిన చిత్రం యొక్క ఆల్ఫా చానల్ ఆధారంగా ఉంటుంది. దానిని shape-image-threshold ద్వారా నిర్వచించండి.
మూల విలువ ఈ లక్షణాన్ని దాని మూల విలువకు అమర్చండి. మరింత చదవండి మూల విలువ.
పారంపర్యం ఈ లక్షణాన్ని తన పేర్పడ్డ ఉపనియంత్రం నుండి పారంపర్యం చేసుకుంది. మరింత చదవండి పారంపర్యం.

సాంకేతిక వివరాలు

మూల విలువ: కొత్త
పారంపర్యం: ఏ
అనిమేషన్ నిర్మాణం: yes for basic-shape. Read about animatable
వెర్షన్: CSS షేప్స్ మొడ్యూల్ లెవల్ 1
జావాస్క్రిప్ట్ సంకేతబద్ధత object.style.shapeOutside="circle(50%)"

బ్రౌజర్ మద్దతు

పట్టికలో ఉన్న సంఖ్యలు ఈ లక్షణాన్ని పూర్తిగా మద్దతు ఇచ్చే బ్రౌజర్ వెర్షన్ను పేర్కొంది.

క్రోమ్ ఎడ్జ్ ఫైర్ఫాక్స్ సఫారీ ఆపెరా
37 79 62 10.1 24