CSS బాక్స్ రెఫ్లెక్ట్ అట్రిబ్యూట్

నిర్వచనం మరియు వినియోగం

box-reflect పరిణామం ప్రభావాన్ని సృష్టించడానికి ఉపయోగించబడుతుంది

box-reflect గుణం విలువలు ఉండవచ్చు:

• belowక్రిందన
• aboveపైన
• leftఎడమ వైపు
• rightకుడి వైపు

గమనిక:box-reflect స్టాండర్డ్ లేకపోతే ఉపయోగించాల్సిన గుణం -webkit- ప్రిఫిక్స్。

ఉదాహరణ

例子 1

在图片下方添加反射效果：

img {
  -webkit-box-reflect: below;
}

స్వయంగా ప్రయత్నించండి

例子 2

box-reflect 属性可以应用于任何可见的 HTML 元素。下例在

标签下方创建反射效果：

p {
  -webkit-box-reflect: below;
}

స్వయంగా ప్రయత్నించండి

ఉదాహరణ 3

box-reflect ఈ లక్షణాన్ని రెండు విలువల సంకేతాలతో ఉపయోగించవచ్చు. ఈ ఉదాహరణలో చిత్రం క్రిందికి ప్రతిబింబం సృష్టించబడుతుంది, 70px దూరంతో:

img {
  -webkit-box-reflect: below 70px;
}

స్వయంగా ప్రయత్నించండి

ఉదాహరణ 4

box-reflect ఈ లక్షణాన్ని మూడు విలువల సంకేతాలతో ఉపయోగించవచ్చు. ఈ ఉదాహరణలో చిత్రం క్రిందికి ప్రతిబింబం సృష్టించబడుతుంది, 10px దూరంతో మరియు క్రమంగా కలిగించబడుతుంది:

img {
  -webkit-box-reflect: below 10px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));
}

స్వయంగా ప్రయత్నించండి

CSS సంకేతాలు

box-reflect: none|below|above|left|right|position offset gradient|initial|inherit;

లక్షణ విలువ

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

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

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

ఈ ప్రిఫిక్స్ను సహాయపడుతున్న మొదటి వెబ్ బ్రౌజర్ వెర్షన్ సంఖ్యలను సూచిస్తుంది。