CSS inset() ফাংশন

সংজ্ঞা ও ব্যবহার

CSS- inset() ফাংশনটি একটি চতুর্ভুজ নির্ধারণ করে যা পরিবর্তনকারীর প্রতিটি দিকের নির্দিষ্ট অভ্যন্তরীণ দূরত্ব সামঞ্জস্যপূর্ণ

inset() ফাংশন সাথে clip-path এটি সাধারণত shape-outside প্রকৃত প্রকাশনা

প্রকল্প

উদাহরণ 1

দুটি <div> ইলেকট্রনিক্সকে দুটি ব্যবহার করে কাটা হবে যাতে প্রতিটি পড়াশোধকারীর প্রত্যেক দিকের নির্দিষ্ট অভ্যন্তরীণ দূরত্ব সামঞ্জস্যপূর্ণ হয়

#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 round border-radius)

টেকনিক্যাল বিবরণ

ব্রাউজার সমর্থন

টেবিলের সংখ্যা এই ফাংশনটি সম্পূর্ণরূপে সমর্থনকারী প্রথম ব্রাউজারের সংস্করণকে ইঙ্গিত করে

সংক্রান্ত পাতা

সূত্র:CSS clip-path অপারেটর

সূত্র:CSS shape-outside অপারেশন

সূত্র:CSS circle() 函数

সূত্র:CSS ellipse() ফাংশন

সূত্র:CSS polygon() ফাংশন