কীভাবে CSS3 বৃত্তাকার কোণগুলি ক্রোম / অপেরাতে ওভারফ্লো লুকায়


147

আমার সন্তানের কন্টেন্টটি মাস্ক করার জন্য আমার পিতামাতার দ্বীপে গোলাকার কোণ দরকার। overflow: hiddenসাধারণ পরিস্থিতিতে কাজ করে, তবে পিতামাতার তুলনামূলকভাবে বা একেবারে অবস্থানের সময় ওয়েবকিট ভিত্তিক ব্রাউজার এবং অপেরাতে বিরতি ঘটে।

এটি ফায়ারফক্স এবং আইই 9 তে কাজ করে:

সিএসএস

#wrapper {
  width: 300px;
  height: 300px;
  border-radius: 100px;
  overflow: hidden;
  position: absolute;
}

#box {
  width: 300px;
  height: 300px;
  background-color: #cde;
}

এইচটিএমএল

<div id="wrapper">
  <div id="box"></div>
</div>

জেএসফিডেলের উপর উদাহরণ

সাহায্যের জন্য ধন্যবাদ!

আপডেট: ক্রোম থেকে এই সমস্যার কারণ বাগটি স্থির করা হয়েছে। আমি অবশ্য অপেরা বা সাফারি পুনরায় পরীক্ষা করিনি।

উত্তর:


183

আমি এই সমস্যার আর একটি সমাধান খুঁজে পেয়েছি। এটি ওয়েবকিট (বা সম্ভবত ক্রোম) এর অন্য বাগের মতো দেখাচ্ছে তবে এটি কার্যকর হয়। আপনাকে যা করতে হবে তা হ'ল # র‍্যাপার উপাদানটিতে একটি ওয়েবকিট সিএসএস মাস্ক যুক্ত করা। আপনি একটি একক পিক্সেল পিএনজি চিত্র ব্যবহার করতে পারেন এবং এটি এইচটিটিপি অনুরোধ সংরক্ষণ করতে সিএসএসে অন্তর্ভুক্ত করতে পারেন।

#wrapper {
width: 300px; height: 300px;
border-radius: 100px;
overflow: hidden;
position: absolute; /* this breaks the overflow:hidden in Chrome/Opera */

/* this fixes the overflow:hidden in Chrome */
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}

#box {
width: 300px; height: 300px;
background-color: #cde;
}​

জেএসফিডাল উদাহরণ


3
এই ঠিক করার জন্য আপনাকে ধন্যবাদ। সাফারিতে আজ এটি চেষ্টা করে দেখুন (v6.0.2) এবং সেখানে আমার জন্য কাজ করেছেন!
বিলিথিটালেন্টেড

6
এটি তবে উপাদানটির কোনও ছায়া ছিন্ন করবে।
জ্যাক জেমস

1
এটি একেবারে অবস্থানযুক্ত বাচ্চাদের সাথে মোড়কের কাজ করে, যেখানে অন্য সমাধানগুলি এখানে করে না। নিস!
ড্যান টেলো

2
Chrome 42.0.2311.90 (64-বিট) ব্যবহার করছে এবং এই ফিক্সটি এখনও প্রয়োজনীয় ... ধন্যবাদ!
সাইমন

2
আপনার সমাধান প্যারেন্ট উপাদানগুলির ছায়া সরিয়ে দেয়।
এবিডিভোপার

106

আপনার সীমানা-ব্যাসার্ধের আইটেমটিতে একটি জেড-সূচক যুক্ত করুন এবং এটি এর অভ্যন্তরের জিনিসগুলিকে মাস্ক করবে।


@ সিফু: আপনি কেবল ভুল যে কারণেই হোক না কেন, প্রস্তাবিত হিসাবে একটি জেড-ইনডেক্স যুক্ত করা আমার জন্য এই সঠিক সমস্যাটি সমাধানের জন্য (ক্রোমের বর্তমান সংস্করণে), এবং এটি শীর্ষ উত্তরের চেয়ে সহজ, সাধারণ সমাধান।
নিক এফ

7
@ সিমন: মনে রাখবেন যে জেড-ইনডেক্সের প্রভাব ফেলতে কিছু শর্ত পূরণ করা প্রয়োজন (উদাহরণস্বরূপ অবস্থান নির্ধারণ করা দরকার)। বিস্তারিত জানার জন্য এখানে দেখুন ।
নিক এফ

@ নিকএফ - এটি ক্রোমে একটি বাগ ছিল (-ium); -webkit-mask-image: -webkit-radial-gradient(circle, white, black);কার্যকর কার্যকর ছিল, তবে, ধন্যবাদ, ক্রোমের কাছে পাওয়া সাম্প্রতিক আপডেটে বাগটি ঠিক করা হয়েছে।
সাইমন

ধারক থেকে z- সূচক 1। z-index -1 থেকে পরম উপাদানটি আমার জন্য এটি সমাধান করে।
এজেড্রাএল-এনফোর্স

এই আমার জন্য কাজ করে। উপরের মোড়কের সমাধানটি দেয় না।
রুভেন

58

সবাইকে মনে রাখবেন না, আমি মোড়ক এবং বাক্সের মধ্যে একটি অতিরিক্ত ডিভ যোগ করে সমস্যার সমাধান করতে পেরেছি।

সিএসএস

#wrapper {
    position: absolute;
}

#middle {
    border-radius: 100px;
    overflow: hidden; 
}

#box {
    width: 300px; height: 300px;
    background-color: #cde;
}

এইচটিএমএল

<div id="wrapper">
    <div id="middle">
        <div id="box"></div>
    </div>
</div>

যারা সাহায্য করেছেন সবাইকে ধন্যবাদ!

http://jsfiddle.net/5fwjp/


12
এটি কাজ করে কারণ অবস্থানযুক্ত উপাদানগুলি তাদের বিষয়বস্তুগুলি তাদের ওয়েবকিতের সীমানা ব্যাসার্ধগুলিতে ক্লিপ করে না। এই অতিরিক্ত স্তরটি কেবল এটিকে এমন করে তোলে যাতে সীমানা-ব্যাসার্ধের সাথে ডিভটি অবস্থিত হয় না এবং কেবল কোনও অবস্থানগত উপাদানের ভিতরে বসে থাকে।
ড্যানিয়েল বিয়ার্ডসলে

9
আপনি কি অবাক হয়ে জানতে পারবেন যে এটি কোনও বাগ / উদ্দেশ্যমূলক আচরণ কিনা?
jmotes

4
বাগ +1 ... আপনি একটি ইমেজ গ্যালারি যা স্বয়ংক্রিয়ভাবে আছে divs উত্পন্ন এবং সত্যিই sux পরম, তাহলে এই "বৈশিষ্ট্য" এ অবস্থান সেট করে ... আছে
inf3rno

@ রুনলুপ আমি মাত্র সাফারি .1.১-তে জাস্টফিল্ডটি পরীক্ষা করেছি এবং ভাল কাজ করে। কী কাজ করছে না সে সম্পর্কে আপনি আরও নির্দিষ্ট হতে পারেন?
jmotes

1
ডি, হে আমাদের সহকর্মী গ্রাফিক ডিজাইনার আসলে এই 20 সেকেন্ডের এই উত্তর খোঁজার আগে "আবিষ্কৃত"
Pere,

18

অস্বচ্ছতা: 0.99; মোড়ক অন ওয়েবকিট বাগ সমাধান করুন


2
transform: translateY(0);এমন একটি বিকল্প যা বস্তুর ভিজ্যুয়াল উপস্থাপনায় হস্তক্ষেপ না করে একই ফলাফল অর্জন করে (যদি আপনি দৃষ্টিভঙ্গি ব্যবহার না করেন)।
কনটুর

15

মনে হচ্ছে এটি কাজ করে:

.wrap {
    -webkit-transform: translateZ(0);
    -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
}

http://jsfiddle.net/qWdf6/82/


4
transform: translateZ(0)আমার জন্য যথেষ্ট।
kalvn

মনে রাখবেন যে এটি (বিশেষত, translateZ) আপনার উপাদানগুলির জন্য স্পষ্টতভাবে হার্ডওয়্যার ত্বরণকে সক্ষম করবে, যা দুঃখের সাথে কিছু ক্ষেত্রে পোকার একদম নতুন ক্যান খুলবে।
বোল্ড

transform: translateZ(0)আমার জন্যও কাজ করেছে আমার ক্ষেত্রে এটি কোনও খারাপ ধারণা নয় যে এই আইটেমটি হার্ডওয়ারকে ত্বরান্বিত করা হয়েছে।
সেবাস্তিয়ান লরবার

9

সর্বশেষতম ক্রোম, অপেরা এবং সাফারিতে সমর্থিত, আপনি এটি করতে পারেন:

-webkit-clip-path: inset(0 0 0 0 round 100px);
clip-path: inset(0 0 0 0 round 100px);

আপনার অবশ্যই অবশ্যই http://bennettfily.com/clippy/ সরঞ্জামটি পরীক্ষা করা উচিত !


আমি মনে করি আপনি এটি আরও ক্লিপ-পাথটি ছোট করতে পারেন : ইনসেট (0%); ... সবেমাত্র একটি ক্লিপ পাথ থাকার কারণে কৌশলটি মনে হচ্ছে :-)
জাকব ই

কি দারুন. এটি সঠিক উত্তর।
শশাঙ্ক ভট্ট

6

উত্তর নয়, তবে এটি ক্রোমিয়াম উত্সের অধীনে ফাইল করা বাগ: http://code.google.com/p/chromium/issues/detail?id=62363

দুর্ভাগ্যক্রমে, দেখে মনে হচ্ছে না যে এতে কেউ কাজ করছে। :(


1
এবং 3 বছর পরে এটি এখনও> না সংশোধন করা হয়েছে <।
নাথন হর্নবি

4

সীমান্তের সাথে প্যারেন্ট উপাদানটির অস্বচ্ছতা পরিবর্তন করুন এবং এটি স্ট্যাক করা উপাদানগুলিকে পুনরায় সাজিয়ে তুলবে। কয়েক ঘন্টা গবেষণা এবং ব্যর্থ চেষ্টার পরে এটি আমার জন্য অলৌকিকভাবে কাজ করেছিল। ব্রাউজারগুলির এই পেইন্ট প্রক্রিয়াটিকে পুনরায় সাজানোর জন্য এটি 0.99 এর অস্বচ্ছতা যুক্ত করার মতো সহজ ছিল। পরীক্ষা করে দেখুন http://philipwalton.com/articles/what-no-one-told-you-about-z-index/



2

গ্রাইক্রোর দুর্দান্ত উত্তরের ভিত্তিতে ...

এখানে আরও বাস্তব বিশ্বের উদাহরণ যা কিছু ফিলার সামগ্রী সহ দুটি সিকুলার ডিভ থাকে। আমি হার্ড-কোডেড পিএনজি ব্যাকগ্রাউন্ডটি কেবলমাত্র একটি হেক্স মানের সাথে প্রতিস্থাপন করেছি, অর্থাৎ

-=-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);

সঙ্গে প্রতিস্থাপন করা হয়

-webkit-mask-image:#fff;

এই জেএসফিডেলটি দেখুন ... http://jsfiddle.net/hqLkA/


1

আমি কীভাবে এটি করেছি তা এখানে দেখুন; Jsfiddle

আমার দেওয়া কোডটি দিয়ে, আমি এটি ওয়েবকিট (ক্রোম / সাফারি) এবং ফায়ারফক্সে কাজ করতে সক্ষম হয়েছি managed আমি জানি না এটি অপেরার সর্বশেষতম সংস্করণে কাজ করে কিনা। হ্যাঁ এটি অপেরার সর্বশেষতম সংস্করণে কাজ করে।

#wrapper {
  width: 300px; height: 300px;
  border-radius: 100px;
  overflow: hidden;
  position: absolute; /* this breaks the overflow:hidden in Chrome/Opera */
}

#box {
  width: 300px; height: 300px;
  background-color: #cde;
  border-radius: 100px;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  -o-border-radius: 100px;
}

border-radiusএই পরিস্থিতিতে মোটেও মোড়কে কেন চাপ দেওয়া , আপনি কেবল এটি চালু করে একই ফলাফল পান #box। এছাড়াও, যদি #boxসীমানার ব্যাসার্ধটি কেবল ওয়েবকিট ঠিক করতে হয় তবে আপনি কেবল -webkit-সেখানে সম্পত্তি অন্তর্ভুক্ত করতে পারেন ।
রবার্টক

গোলকধাঁধা, এটি কিছু পরিস্থিতিতে কাজ করতে পারে তবে আমার ক্ষেত্রে আমি এমন একটি সমাধান খুঁজছি যা বাক্সটির আকারকে রূপান্তরিত করবে না (এবং মোড়ক এখনও একটি মুখোশ হিসাবে কাজ করে)। আমার উদাহরণটি খুব সরল করা হয়েছিল তবে আমি বাক্স থেকে ড্রপশাদোটি লুকানোর জন্য মোড়কটি ব্যবহার করার চেষ্টা করছি (কেবলমাত্র ছায়ার প্রান্তটি আমি দৃশ্যমান করতে চাইলে মোড়কে মোড়ক ব্যবহার করে)।
jmotes

1
ধাঁধা যদিও সাহায্যের জন্য ধন্যবাদ! আপনার সমাধান আমাকে আরও সমালোচনামূলকভাবে ভাবতে সহায়তা করেছে helped বিটিডব্লিউ, আমি আপনার পোস্টটিতে সম্পাদনা এড়াতে পারবেন। আমি নিজের থেকে এটি তৈরি করতে চাইছিলাম। দুঃখিত :)
jmotes

@ user480837 কোনও সমস্যা সাথী নয়, খুশী যে আমি সাহায্য পেয়েছি। :)
ম্যাজেজ

1
@ মেজে যে কোনও ধরণের সীমানা প্রয়োগ করা হলে এটি কাজ করবে না: jsfiddle.net/ptW85/228
antitoxic

1

আমি প্রতিটি উত্তর চেষ্টা করেছি কিন্তু সাফল্য ছাড়াই। কয়েক ঘন্টা তদন্তের পরে আমি এই সমস্যার সমাধান খুঁজে পেয়েছি। আপনার শ্রেণিতে এই বৈশিষ্ট্যগুলি ব্যবহার করে ডিভ উপাদানগুলি পাত্রে উপচে পড়ার অনুমতি দেবে না।

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

0

আপনি যদি কোনও চিত্রের জন্য একটি মুখোশ তৈরি করতে এবং ধারকটির অভ্যন্তরে চিত্রটি সজ্জিত করতে চান তবে 'অবস্থান: পরম' বৈশিষ্ট্যটি সেট করবেন না। আপনাকে যা করতে হবে তা হ'ল মার্জিন-বাম এবং মার্জিন-ডান পরিবর্তন করা। ক্রোম / অপেরা ওভারফ্লো: গোপন এবং সীমানা ব্যাসার্ধের নিয়ম মেনে চলবে।

// Breaks in Chrome/Opera.
    .container {
        overflow: hidden;
        border-radius: 50%;
        img {
            position: absolute;
            left: 20px;
            right: 20px;
        }
    }

// Works in Chrome/Opera.
    .container {
        overflow: hidden;
        border-radius: 50%;
        img {
            margin-left: 20px;
            margin-right: 20px;
        }
    }
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.