রূপরেখা এবং সীমানার মধ্যে পার্থক্য

Question

সিএসএসে 'সীমান্ত' এবং 'বাহ্যরেখা' বৈশিষ্ট্যের মধ্যে কোনও পার্থক্য সম্পর্কে কেউ কি জানেন? যদি কোনও পার্থক্য না থাকে তবে কেন একই জিনিসটির জন্য দুটি বৈশিষ্ট্য রয়েছে?

Answer 1

থেকে: http://webdesign.about.com/od/advancedcss/a/outline_style.htm

সিএসএস রূপরেখার সম্পত্তি হ'ল বিভ্রান্তিকর সম্পত্তি। আপনি যখন প্রথম এটি সম্পর্কে জানবেন, এটি কীভাবে সীমান্তের সম্পত্তি থেকেও দূরবর্তীভাবে আলাদা তা বোঝা শক্ত। ডাব্লু 3 সি এটি নীচের পার্থক্য হিসাবে ব্যাখ্যা করেছে:

1.আউটলাইনগুলি জায়গা নেয় না।

২.আউটলাইনগুলি আয়তক্ষেত্রাকার হতে পারে।

Comments

লিঙ্কটি এটি ব্যাখ্যা করেছে। ধন্যবাদ :)

— ক্ষিতিজ সাক্সেনা -কেজে-

@ মানু এটি উপাদানটির ভিতরে রূপরেখা আঁকা বলে মনে হচ্ছে , যেখানে এর বাইরে সীমানা দেখা যাচ্ছে।

— মাহন

Answer 2

কিছু অন্যান্য উত্তর ছাড়াও ... আমি ভাবতে পারি আরও কয়েকটি পার্থক্য:

1) গোলাকার কোণে

borderborder-radiusসম্পত্তি সঙ্গে বৃত্তাকার কোণে সমর্থন করে । outlineনা।

div {
  width: 150px;
  height: 150px;
  margin: 20px;
  display: inline-block;
  position: relative;
}

.border {
  border-radius: 75px;
  border: 2px solid green;
}

.outline {
  outline: 2px solid red;
  border-radius: 75px;
  -moz-outline-radius: 75px;
  outline-radius: 75px;
}

.border:after {
content: "border supports rounded corners";
position: absolute;
bottom: 0;
transform: translateY(100%);

}
.outline:after {
content: "outline doesn't support rounded corners";
position: absolute;
bottom: 0;
transform: translateY(100%);
}

<div class="border"></div>

<div class="outline"></div>

বেহালা

(এনবি: যদিও ফায়ারফক্সের এমন -moz-outline-radiusসম্পত্তি রয়েছে যা রূপরেখায় বৃত্তাকার কোণগুলিকে অনুমতি দেয় ... এই সম্পত্তিটি এটি কোনও সিএসএস স্ট্যান্ডার্ডে সংজ্ঞায়িত নয়, এবং অন্যান্য ব্রাউজারগুলির দ্বারা সমর্থিত নয় ) ( উত্স )

2) কেবল একপাশে স্টাইলিং

সীমানা শৈলী সঙ্গে প্রতিটি পাশ থেকে বৈশিষ্ট্য আছে border-top:, border-left:ইত্যাদি

রূপরেখা এটি করতে পারে না। কোনও রূপরেখা-শীর্ষ নেই: ইত্যাদি all সব কিছুই বা কিছুই নয়। ( এই এসও পোস্ট দেখুন )

3) অফসেট

আউটলাইন সম্পত্তি আউটলাইন-অফসেট সহ অফসেট সমর্থন করে । সীমানা না।

.outline {
  margin: 100px;
  width: 150px;
  height: 150px;
  outline-offset: 20px;
  outline: 2px solid red;
  border: 2px solid green;
  background: pink;
}

<div class="outline"></div>

বেহালা

দ্রষ্টব্য: outline-offsetইন্টারনেট এক্সপ্লোরার ব্যতীত সমস্ত বড় ব্রাউজার সমর্থন করে

Comments

হ্যাঁ আপনি যা বলছেন তা আমি দেখতে পেয়েছি, আমি আমার বোতামের সীমানার ব্যাসার্ধটি পরিবর্তন করার চেষ্টা করেছি তবে এখন আমার ফোকাসে রূপরেখাটি বোতামটির চারপাশে খুব সুন্দরভাবে মোড়বে না।

— Radtek

@ ড্যানিয়েল্ড, প্রযুক্তিগতভাবে আপনি যখন বলছেন ঠিক তখনও প্রশ্নের উদ্বেগ আলাদা ছিল। যখন ইতিমধ্যে সীমানা থাকবে তখন কেন রূপরেখা এবং উত্তর বক্স মডেলের বাইরেররেখা পড়ে।

— 0fnt

@ ব্যবহারকারী 247077 - আমি একমত নই। ওপিকে উভয় রূপরেখা এবং সীমানা একই বলে মনে হচ্ছে। তাই তিনি তাদের মধ্যে যতটা সম্ভব পার্থক্য জানতে চান। অন্যান্য কিছু পার্থক্য ইতিমধ্যে অন্যান্য উত্তরে পোস্ট করা হয়েছিল, তাই আমি অন্যদের যুক্ত করার সিদ্ধান্ত নিয়েছি যা এখনও তালিকাভুক্ত নয়।

— ড্যানিয়েল্ড

এর অর্থ কি outlinesসীমান্তের তুলনায় দ্রুততর হতে পারে?

— উত্কর্ষ সিনহা

Answer 3

অন্যান্য উত্তরগুলির বাইরে, রূপরেখাগুলি সাধারণত ডিবাগিংয়ের জন্য ব্যবহৃত হয়। অপেরাতে কিছু দুর্দান্ত ব্যবহারকারী সিএসএস শৈলী রয়েছে যা আপনাকে ডকুমেন্টে সমস্ত উপাদান রয়েছে তা দেখানোর জন্য বাহ্যরেখা সম্পত্তি ব্যবহার করে।

আপনি যদি প্রত্যাশিত হন বা প্রত্যাশিত আকারে কোনও উপাদান কেন উপস্থিত হচ্ছে না তা অনুসন্ধান করার চেষ্টা করছেন, তবে কয়েকটি রূপরেখা যুক্ত করুন এবং দেখুন উপাদানগুলি কোথায়।

ইতিমধ্যে উল্লিখিত হিসাবে, বাহ্যরেখাগুলি স্থান গ্রহণ করে না। আপনি যখন কোনও সীমানা যুক্ত করবেন তখন নথিতে উপাদানটির মোট প্রস্থ / উচ্চতা বৃদ্ধি পায় তবে রূপরেখার সাথে এটি হয় না। এছাড়াও আপনি সীমাগুলির মতো নির্দিষ্ট দিকগুলিতে রূপরেখা নির্ধারণ করতে পারবেন না; এটা সব কিছুই না।

Answer 4

tldr;

ডাব্লু 3 সি এটি নীচের পার্থক্য হিসাবে ব্যাখ্যা করেছে:

• আউটলাইনগুলি স্থান গ্রহণ করে না।
• রূপরেখাগুলি আয়তক্ষেত্রাকার হতে পারে।

উৎস

অ্যাক্সেসযোগ্যতার জন্য আউটলাইনটি ব্যবহার করা উচিত

এটিও লক্ষ করা উচিত যে রূপরেখার প্রাথমিক উদ্দেশ্যটি অ্যাক্সেসযোগ্যতা। এটিরেখায় সেট করা: কোনওটি এড়ানো উচিত নয়।

আপনি যদি এটি অপসারণ করতে পারেন তবে বিকল্প স্টাইলিং সরবরাহ করার জন্য এটি আরও ভাল ধারণা:

আমি রূপরেখা ব্যবহার করে কীভাবে ফোকাস সূচকটি অপসারণ করতে পারি তার বেশ কয়েকটি টিপস দেখেছি: কোনওটি বা রূপরেখা: 0। দয়া করে এটি করবেন না, যদি না আপনি বাহ্যরেখাকে অন্য কোনও কিছুর সাথে প্রতিস্থাপন করেন যা কোন উপাদানটিতে কীবোর্ড ফোকাস রয়েছে তা দেখতে এটি সহজ করে তোলে। কীবোর্ড ফোকাসের ভিজ্যুয়াল ইন্ডিকেটরটি সরিয়ে ফেলা যাঁকে আপনার সাইট নেভিগেট করতে এবং ব্যবহার করতে কীবোর্ড নেভিগেশনের উপর নির্ভর করে তাদের সত্যিই কঠিন সময় দেওয়া হবে।

উত্স: "লিঙ্ক এবং ফর্ম নিয়ন্ত্রণগুলি থেকে আউটলাইন সরান না", 365 বেরিয়া স্ট্রিট

---

আরও সংস্থান

• http://outlinenone.com/

Answer 5

রূপরেখার ব্যবহারিক ব্যবহার স্বচ্ছতার সাথে সম্পর্কিত। যদি আপনার পটভূমি সহ কোনও পিতামাতার উপাদান থাকে তবে সন্তানের উপাদানটির সীমানা স্বচ্ছ হতে চান যাতে পিতামাতার পটভূমিটি প্রদর্শিত হবে, আপনাকে অবশ্যই "সীমানা" না দিয়ে "বাহ্যরেখা" ব্যবহার করতে হবে। যখন কোনও সীমানা স্বচ্ছ হতে পারে তবে এটি সন্তানের পটভূমি প্রদর্শন করবে, পিতামাতার নয়।

অন্য কথায়, এই সেটিংটি নিম্নলিখিত প্রভাব তৈরি করেছে:

outline: 7px solid rgba(255, 255, 255, 0.2);

Comments

পুরো গল্পটি নয়, আপনি যদি background-clip: padding-box;আপনার স্টাইলিংয়ে যোগ করেন তবে

— সীমানাও

Answer 6

ডাব্লু 3 স্কুল সাইট থেকে

সিএসএস সীমান্ত বৈশিষ্ট্য আপনি শৈলী এবং একটি উপাদান এর সীমানার রঙ নির্দিষ্ট করার অনুমোদন দেবে।

একটি রূপরেখা হ'ল একটি লাইন যা উপাদানকে "স্ট্যান্ড আউট" করার জন্য উপাদানগুলির চারপাশে আঁকা হয় (সীমানার বাইরে)।

রূপরেখা শর্টহ্যান্ড সম্পত্তি একটি ঘোষণায় সমস্ত বাহ্যরেখা বৈশিষ্ট্য সেট করে।

যে বৈশিষ্ট্যগুলি সেট করা যেতে পারে সেগুলি হ'ল (ক্রমানুসারে): আউটলাইন-রঙ, আউটলাইন-স্টাইল, আউটলাইন-প্রস্থ।

যদি উপরের মানগুলির মধ্যে একটি অনুপস্থিত থাকে, যেমন "রূপরেখা: কঠিন # ff0000;", অনুপস্থিত সম্পত্তিটির জন্য ডিফল্ট মান সন্নিবেশ করা হবে, যদি থাকে তবে।

আরও তথ্যের জন্য এখানে চেক করুন: http://webdesign.about.com/od/advancedcss/a/outline_style.htm

Answer 7

কিছুটা পুরনো প্রশ্ন, তবে একটি ফায়ারফক্স রেন্ডারিং বাগ (এখনও জানুয়ারী 13 এ হিসাবে উপস্থিত) উল্লেখ করার মতো বিষয় যেখানে বাচ্চারা তাদের পিতামাতাকে উপেক্ষা করলেও (নেতিবাচক মার্জিন, বাক্স-ছায়ার মধ্য দিয়ে সমস্ত শিশু উপাদানগুলির বাইরের দিকে রেন্ডার দেবে) ইত্যাদি)

আপনি এটি দিয়ে এটি ঠিক করতে পারেন:

.container {
    position: relative;
}
.container:before {
   content: '';
   margin: 0;
   padding: 0;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   outline: 1px solid #ff0000;
}

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

সর্বোপরি কোনটি সহজ?

.container {
    width: 960px;
    height: 300px;
    outline: 3px solid black;
}

বা:

.container {
    width: 954px;
    height: 294px;
    border: 3px solid black;
}

Comments

আপনি যদি এখনও এটি না করে থাকেন তবে box-sizingচেষ্টা করুন! লিঙ্ক

— ব্রেন্ডন

এই উত্তরের নীচের উদাহরণগুলি অভিন্ন ফলাফল দেয় না। প্রথমটি 3px এর একটি রূপরেখা সহ 960 * 300 এর একটি বাক্স দেয় যা বাক্সের বাইরে যা কিছু coversেকে দেয়। দ্বিতীয়টি 3px এর একটি রূপরেখা সহ একটি 954 * 294 বাক্স দেয় যা কোনও কিছুই কভার করে না

— পিটার আর

Answer 8

এটিও লক্ষণীয় যে ডাব্লু 3 সি এর রূপরেখা আইইয়ের সীমানা , যেহেতু আইই ডব্লিউ 3 সি বক্স মডেলটি প্রয়োগ করে না।

ডাব্লু 3 সি বক্স মডেলটিতে, সীমানাটি উপাদানটির প্রস্থ এবং উচ্চতার সাথে একচেটিয়া। আইই তে এটি অন্তর্ভুক্ত।

Comments

আইই 10 এর ক্ষেত্রে এটি সত্য নয়। - এবং দেখে মনে হচ্ছে যে আপনি বাক্স-আকারের মডেলগুলি এবং এই রূপরেখাগুলি মোটেও স্থান গ্রহণ করেন না এমনটি মিশ্রিত করে যা পছন্দ করে।

— রবার্ট সিমার

Answer 9

আমি উভয়ের মধ্যে পার্থক্য দেখতে কেবল সিএসএস / এইচটিএমএল কোড তৈরি করেছি।

outlineসম্ভাব্য উপচে পড়া শিশু উপাদানগুলি বিশেষত একটি ইনলাইনে অন্তর্ভুক্ত করা ভাল পাত্রে।

borderব্লক- সহনকারী উপাদানগুলির জন্য আরও অনেক কিছু খাপ খাইয়ে নেওয়া হয়।

আপনার জন্য স্নাতকোত্তর!

Answer 10

সিএসএসে রূপরেখার বৈশিষ্ট্য একটি উপাদানের বাইরের চারদিকে একটি লাইন আঁকেন। এটি ব্যতীত সীমান্তের মতো:

• এটি সর্বদা চারদিকে ঘুরে যায়, আপনি নির্দিষ্ট নির্দিষ্ট করতে পারবেন না
• পক্ষগুলি এটি বক্স মডেলের অংশ নয়, সুতরাং এটি
  উপাদান বা সংলগ্ন উপাদানগুলির অবস্থানের উপর প্রভাব ফেলবে না

সূত্র: https://css-tricks.com/almanac/properties/o/outline/

Answer 11

"রূপরেখা" ব্যবহারের ব্যবহারিক উদাহরণ হিসাবে, একটি ওয়েবপৃষ্ঠায় সিস্টেমের ফোকাসযুক্ত বেহাল বিন্দুযুক্ত সীমানা (উদাহরণস্বরূপ, যদি আপনি লিঙ্কগুলির মাধ্যমে ট্যাব করেন) আউটলাইন সম্পত্তি ব্যবহার করে নিয়ন্ত্রণ করা যায় (কমপক্ষে, আমি জানি এটি ফায়ারফক্সে করতে পারে) , অন্য ব্রাউজার চেষ্টা করা হয়নি)।

একটি সাধারণ "চিত্র প্রতিস্থাপন" কৌশলটি ব্যবহার করা হয়, উদাহরণস্বরূপ:

<div id="logo"><a href="/">Foo Widgets Ltd.</a></div>

সিএসএসে নিম্নলিখিতগুলি সহ:

#logo
{
    background: url(/images/logo.png) center center no-repeat;
}
#logo a
{
    display: block;
    text-indent: -1000em;
}

সমস্যাটি হ'ল যখন ফোকাসটি ট্যাগটিতে পৌঁছে যায় তখন বাহ্যরেখাটি 1000 ম বামে চলে যায়। আউটলাইন আপনাকে এই জাতীয় উপাদানগুলিতে ফোকাসের আউটলাইনটি বন্ধ করতে দেয়।

আমি বিশ্বাস করি যে IE বিকাশকারী সরঞ্জামদণ্ডটি "নির্বাচন করুন" মোডে পরিদর্শন করার জন্য উপাদানগুলি হাইলাইট করার সময় "হুডের নীচে" রূপরেখার মতো কিছু ব্যবহার করছে। এটি "আউটলাইন" কোনও স্থান নেয় না এই বিষয়টি ভালভাবে দেখায়।

Comments

এই চিত্র প্রতিস্থাপনের কৌশলটি কে আবিষ্কার করেছেন এবং কেন তা জানতে চাই। এর একমাত্র উদ্দেশ্য বলে মনে হয় যে চিত্রগুলি অক্ষম করা আছে তার পক্ষে পাঠ্যটি বিলুপ্ত করা হবে। যথাযথ Alt পাঠ্যের সাথে একটি সাধারণ চিত্রের কী আছে?

— স্টিয়ার্ট

এটা তোলে Phark পদ্ধতি, যা একটি অভিযোজিত ছিল (এখন বরং খুব কারণ আপনি উল্লেখ জন্য নিন্দিত) এর Fahrner ভাবমূর্তি প্রতিস্থাপন । কেন আমি কেন কেউ ফোকাসের রূপরেখাকে সংশোধন করতে চাইতে পারি তার ব্যবহারিক প্রয়োগের দ্রুত উপায় হিসাবে এটি ব্যবহার করছি :)

— ম্যাট শ্যাচ

Answer 12

সীমানা হিসাবে রূপরেখা সম্পর্কে ভাবুন যে কোনও প্রজেক্টর কোনও কিছুর বাইরে সীমানা হিসাবে আঁকেন সেই জিনিসটির চারপাশে একটি আসল অবজেক্ট।
একটি অভিক্ষেপ সহজেই ওভারল্যাপ করতে পারে তবে সীমানা আপনাকে পাস করতে দেয় না।
কিছু সময় যখন আমি ব্যবহার করি তখন grid+%widthসীমানা ভিউ পোর্টের স্কেলিংটি পরিবর্তন করবে, উদাহরণস্বরূপ একটি width:100%পিতামাতার সাথে একটি width:100pxডিভ পিতামাতাকে পুরোপুরি পূরণ করে, তবে আমি যখন ডিভ যুক্ত করি তখন border:solid 5pxসীমান্তের জন্য স্থান তৈরি করতে ডিভটি আরও ছোট করা হয় (যদিও এটি বিরল এবং কাজের আশেপাশে!)
তবে রূপরেখার সাথে এটিতে এই সমস্যাটি নেই কারণ বাহ্যরেখাটি আরও ভার্চুয়াল: ডি এটি উপাদানটির বাইরে কেবল একটি লাইন তবে সমস্যাটি যদি আপনি সঠিকভাবে ফাঁক না করেন তবে এটি অন্যান্য সামগ্রীর সাথে ওভারল্যাপ হয়ে যাবে la

এটি সংক্ষিপ্ত করার জন্য:
রূপরেখার পেশাদাররা:
এটি ব্যবধান এবং পজিশনের সাথে জড়িত নয়
:
ওভারল্যাপিংয়ের উচ্চ সম্ভাবনা

Answer 13

সীমানা এবং বাহ্যরেখার মধ্যে পার্থক্য:

সীমানা বক্স মডেলের অংশ তাই এটি উপাদানটির আকারের সাথে গণনা করে nts আউটলাইন বক্স মডেলের অংশ নয় তাই এটি কাছের উপাদানগুলিকে প্রভাবিত করে না।

ডেমো:

#border {
  border: 10px solid black;
}
#outline {
  outline: 10px solid black;
}

<html>
<body>
<span id="border">Border</span>Other text<br><br>
<span id="outline">Outline</span>Other text
</body>
</html>

অন্যান্য পার্থক্য:
বাহ্যরেখা সীমানার বাইরে প্রদর্শিত হয়।
আউটলাইনগুলি বৃত্তাকার কোণে থাকতে পারে না; সীমানা পারে।

Answer 14

ডাব্লু 3 স্কুল থেকে অনুলিপি করা:

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

একটি রূপরেখা হ'ল একটি লাইন যা উপাদানকে "স্ট্যান্ড আউট" করার জন্য উপাদানগুলির চারপাশে আঁকা হয় (সীমানার বাইরে)।

Comments

এই 2 মধ্যে পার্থক্য ব্যাখ্যা না, শুধুমাত্র কি outlineহয়

— Kaspar লি