CSS inset() फ़ंक्शन

परिभाषा और उपयोग

CSS का inset() फ़ंक्शन एक चतुर्भुज को परिभाषित करता है जो निर्देशक बॉक्स के प्रत्येक दिशा से निर्दिष्ट भीतरी दूरी के साथ है।

inset() फ़ंक्शन अक्सर clip-path गुण और shape-outside गुण को एक साथ उपयोग करें

इन्स्टांस

उदाहरण 1

दो दिवारी एलीमेंट को प्रत्येक दिशा में निर्दिष्ट भीतरी दूरी के साथ चाकू के आकार में काटें:

#blueDIV {
  float: left;
  width: 150px;
  height: 100px;
  background-color: lightblue;
  clip-path: inset(15px);
}
#pinkDIV {
  float: left;
  width: 150px;
  height: 100px;
  background-color: pink;
  clip-path: inset(5% 10% 15% 10% round 20px);
}

अपने आप प्रयोग करें

उदाहरण 2

इस्तेमाल clip-path और inset() एनीमेशन प्रभाव देखें:

#myDIV {
  width: 100px;
  height: 100px;
  background-color: coral;
  color: green;
  animation: mymove 5s infinite;
  clip-path: inset(10% round 20px);
}
@keyframes mymove {
  50% {clip-path: inset(50% round 50px);}
}

अपने आप प्रयोग करें

उदाहरण 3

संयुक्त रूप से उपयोग inset()、clip-path और shape-outside:

#blueDIV {
  float: left;
  width: 150px;
  height: 100px;
  background-color: lightblue;
  clip-path: inset(45px 50px 15px 0 round 50px);
  shape-outside: inset(40px 40px 10px 0 round 50px);
}

अपने आप प्रयोग करें

CSS व्याकरण

inset(length-percentage गोल border-radius)

तकनीकी विवरण

ब्राउज़र समर्थन

तालिका में दिए गए नंबर इस फ़ंक्शन को पूरी तरह से समर्थन देने वाले पहले ब्राउज़र का संस्करण को प्रदर्शित करते हैं।

संबंधित पृष्ठ

संदर्भःCSS clip-path विशेषता

संदर्भःCSS शेप-आउटसाइड प्रतियोगिता

संदर्भःCSS circle() फ़ंक्शन

संदर्भःCSS ellipse() फ़ंक्शन

संदर्भःCSS polygon() फ़ंक्शन