సిఎస్ఎస్ స్కూలర్

ఈ ఎలమెంట్ కాలిన్ బార్డర్ మరియు నీలి కంటరీలతో ఉంది, 10px వెడల్పు.

సిఎస్ఎస్ స్కూలర్

కంటరీ ఎలమెంట్ చుట్టూ చిత్రీకరించబడే ఒక పట్టికలో ఉంటుంది మరియు బార్డర్ బాహ్యంగా ఉంటుంది మరియు ఎలమెంట్ ను ప్రదర్శించడానికి ఉపయోగిస్తారు.

CSS కంటరీ అంశాలు కలిగి ఉంటాయి:

  • outline-style
  • outline-color
  • outline-width
  • outline-offset
  • outline

注意：కంటరీ తోబార్డర్వివిధంగా! వివిధతలు ఉన్నాయి: కంటరీ ఎలమెంట్ బార్డర్ బాహ్యంగా చిత్రీకరించబడుతుంది మరియు ఇతర కంటెంట్లతో అనుభందించవచ్చు. అలాగే, కంటరీ ఎలమెంట్ పరిమాణం లో భాగంగా కాదు; ఎలమెంట్ మొత్తం వెడల్పు మరియు పొడవు బార్డర్ వెడల్పు పై ప్రభావం లేదు.

CSS కంటరీ శైలులు

outline-style అత్యంత కంటరీ శైలిని నిర్వచిస్తుంది మరియు క్రింది విలువలను అనుమతిస్తుంది:

  • dotted - పంక్తి కంటరీలను నిర్వచించండి.
  • dashed - కాలువ కంటరీలను నిర్వచించండి.
  • solid - నిజమైన కంటరీలను నిర్వచించండి.
  • double - ద్వంద్వ కంటరీలను నిర్వచించండి.
  • groove - 3D కొరికిపోయిన గుళ్ళు కంటరీలను నిర్వచించండి.
  • ridge - 3D పుట్టుకొన్న గుళ్ళు కంటరీలను నిర్వచించండి.
  • inset - 3D కొరికిపోయిన కంటరీలను నిర్వచించండి.
  • outset - 3D పుట్టుకొన్న కంటరీలను నిర్వచించండి.
  • none - కంటరీలను పరిత్యజించండి.
  • hidden - దాగిపోయిన కంటరీలను నిర్వచించండి.

ఈ ఉదాహరణలో వివిధ outline-style విలువలను చూడండి:

ఉదాహరణ

ప్రదర్శన వివిధ కంటరీల శైలులు:

p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}

结果：

点状轮廓。

虚线轮廓。

实线轮廓。

双线轮廓。

3D 凹槽轮廓。此效果取决于 outline-color 值。

3D 凸槽轮廓。此效果取决于 outline-color 值。

3D 凹边轮廓。此效果取决于 outline-color 值。

3D 凸边轮廓。此效果取决于 outline-color 值。

亲自试一试

注意：除非设置了 outline-style 属性，否则其他轮廓属性（在下一章中将详细介绍）都不会有任何作用！