CSS clip-path प्रभाव
परिभाषा और उपयोग
clip-path गुण आपको एलिमेंट को बेसिक आकार या SVG स्रोत के रूप में काट सकता है।
टिप्पणी:clip-path का उपयोग अबैक्स गुण को प्रतिस्थापित करेगा。
उदाहरण
चित्र को 50% के गोलाकार के रूप में काटें:
img {
clip-path: circle(50%);
}
CSS व्याकरण
clip-path: clip-source|basic-shape|margin-box|border-box|padding-box|content-box|fill-box|stroke-box|view-box|none;
गुण मान
| मान | वर्णन |
|---|---|
| clip-source | SVG <clipPath> एलिमेंट के लिए संदर्भिक URL को परिभाषित करें。 |
| basic-shape | एलिमेंट को बेसिक आकार के रूप में काटें: गोलाकार, अभिमुखी, बहुभुज या तारा आकार。 |
| margin-box | मार्जिन बॉक्स को संदर्भ बॉक्स के रूप में इस्तेमाल करें。 |
| border-box | बॉर्डर बॉक्स को संदर्भ बॉक्स के रूप में इस्तेमाल करें。 |
| padding-box | पैडिंग बॉक्स को संदर्भ बॉक्स के रूप में इस्तेमाल करें。 |
| content-box | कंटेंट बॉक्स को संदर्भ बॉक्स के रूप में इस्तेमाल करें。 |
| fill-box | ऑब्जैक्ट बॉक्स (object bounding box) को संदर्भ बॉक्स के रूप में इस्तेमाल करें。 |
| stroke-box | स्ट्रॉक बॉक्स (stroke bounding box) को संदर्भ बॉक्स के रूप में इस्तेमाल करें。 |
| view-box | SVG व्यूपॉइंट को संदर्भ बॉक्स के रूप में इस्तेमाल करें。 |
| none | डिफ़ॉल्ट मान। नहीं बनाया गया काटने का पथ。 |
तकनीकी विवरण
| डिफ़ॉल्ट मान: | none |
|---|---|
| विरासत: | नहीं |
| एनिमेशन निर्माण: | समर्थन (केवल basic-shape मान के लिए)। देखें:एनिमेशन संबंधी गुण。 |
| संस्करण: | CSS Masking Module Level 1 |
| JavaScript व्याकरण: | object.style.clipPath="circle(50%)" |
ब्राउज़र समर्थन
तालिका में दिए गए नंबर इस गुण के पूर्ण समर्थन वाली पहली ब्राउज़र आईडी को इंगित करते हैं।
| च्रोम | IE / एज | फ़ायरफॉक्स | सैफारी | ओपेरा |
|---|---|---|---|---|
| 55.0 23.0 -webkit- |
79.0* | 54.0 | 9.1 6.1 -webkit- |
42.0 15.0 -webkit- |
* Edge केवल SVG एलिमेंट (HTML एलिमेंट को समर्थित नहीं है) पर clip-path का समर्थन देता है।
