CSS యూజర్ ఇంటర్ఫేస్

CSS యూజర్ ఇంటర్ఫేస్

ఈ భాగంలో మీరు క్రింది క్రియాశీల క్రమంలో నేర్చుకుంటారు:

  • resize
  • outline-offset

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

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

属性 చ్రోమ్ ఐఇ ఫైర్ఫాక్స్ సఫారీ ఓపెరా
resize 4.0 మద్దతు లేదు 5.0 4.0 15.0
outline-offset 4.0 15.0 5.0 4.0 9.5

CSS సైజ్ చేయడం

resize అట్రిబ్యూట్ ఎలిమెంట్ ను వినియోగదారులు సైజ్ చేయాలి మరియు ఎలా చేయాలి అనేది నిర్ధారిస్తుంది.

ఈ div ఎలిమెంట్ ను వినియోగదారులు సైజ్ చేయగలరు!

సైజ్ చేయడం: ఈ div ఎలిమెంట్ యొక్క డాయిరెక్టర్ మూల మూలం ను క్లిక్ చేయి మరియు ఖాళీచేసి డ్రాగ్ చేయండి.

మున్నది ప్రత్యామ్నాయంగా:ఇంటర్నెట్ ఎక్స్ప్లోరర్ రెజైజ్ అట్రిబ్యూట్ ను మద్దతు చేయడం లేదు.

ఈ ఉదాహరణలో వినియోగదారులు కేవలం <div> ఎలిమెంట్ వెడల్పును సైజ్ చేయగలరు:

ఇన్స్టాన్స్

div {
  resize: horizontal;
  overflow: auto;
}

亲自试一试

ఈ ఉదాహరణలో వినియోగదారులు కేవలం <div> ఎలిమెంట్ పొడవును సైజ్ చేయగలరు:

ఇన్స్టాన్స్

div {
  resize: vertical;
  overflow: auto;
}

亲自试一试

ఈ ఉదాహరణలో వినియోగదారులు <div> ఎలిమెంట్ పొడవు మరియు వెడల్పును సైజ్ చేయగలరు:

ఇన్స్టాన్స్

div {
  resize: both;
  overflow: auto;
}

亲自试一试

అనేక బ్రౌజర్లలో <textarea> ప్రమాణముగా సైజ్ చేయగలిగేది. ఇక్కడ మేము resize అట్రిబ్యూట్ వాడినందున ఈ సైజ్ సామర్థ్యాన్ని నిలిపివేశాము:

ఇన్స్టాన్స్

textarea {
  resize: none;
}

亲自试一试

సిఎస్ఎస్ షేడ్ ఆఫ్సెట్

outline-offset అట్రిబ్యూట్ ఆక్షరపరిమితి మరియు ఎలిమెంట్ సరిహద్దు మధ్య అంతరాన్ని జోడిస్తుంది.

ఈ div యొక్క వాల్డ్ సరిహద్దుల వెలుపల 15px ఆక్షరపరిమితి ఉంది.

మున్నది ప్రత్యామ్నాయంగా:ఆక్షరపరిమితి మరియు వాల్డ్ వివిధంగా ఉంటాయి! వాల్డ్ నుండి వేరుగా, ఆక్షరపరిమితి రేఖలు ఏలా కూడా వాల్డ్ బాహ్యంగా జనరేట్ అవుతాయి మరియు ఇతర కంటెంట్లతో అనుభంధనలు కలిగి ఉంటాయి. అలాగే, ఆక్షరపరిమితి కూడా ఏలా కూడా ఎలిమెంట్ పరిమాణం లో భాగం కాదు: ఎలిమెంట్ మొత్తం వెడల్పు మరియు పొడవు ఆక్షరపరిమితి రేఖల వెడల్పు పై ప్రభావం చేయదు.

దిగువ ఉదాహరణలో outline-offset అట్రిబ్యూట్ వాల్డ్ మరియు ఆక్షరపరిమితి మధ్య అంతరాన్ని జోడించడానికి ఉపయోగించబడింది:

ఇన్స్టాన్స్

div.ex1 {
  margin: 20px;
  border: 1px solid black;
  outline: 4px solid red;
  outline-offset: 15px;
} 
div.ex2 {
  margin: 10px;
  border: 1px solid black;
  outline: 5px dashed blue;
  outline-offset: 5px;
}

亲自试一试

CSS 用户界面属性

下表列出了所有用户界面属性：

属性 描述
outline-offset 在轮廓和元素的边框边缘之间添加空间。
resize ప్రతిపాదించబడిన అంశాలను వినియోగదారులు సైజ్ చేయగలరు లేదా కాదు.