উপাদানটির পুরো প্রস্থে সীমানা-প্রস্থ যুক্ত না করে CSS ব্যবহার করে যে কোনও উপাদানকে সীমানা কীভাবে দেওয়া যায়?

Question 1

ফটোশপের মতো আমরা স্ট্রোক দিতে পারি Ins ভিতরে, মাঝখানে এবং বাইরে

আমি মনে করি ডিফল্ট সিএসএস সীমানা বৈশিষ্ট্যগুলি ফটোশপের কেন্দ্রের মতো, আমি ঠিক আছি?

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

Question 2

outline:1px solid white;

এটি অতিরিক্ত প্রস্থ এবং উচ্চতা যোগ করবে না।

Question 3

সিএসএস বক্স-আকার দেওয়ার জন্য দেখুন ...

বক্স-সাইজিং CSS3 বৈশিষ্ট্য এটি করতে পারে। সীমানা-বাক্স মান (কন্টেন্ট-বাক্স ডিফল্টের বিপরীতে) চূড়ান্ত রেন্ডার করা বাক্সটিকে ঘোষিত প্রস্থ এবং বাক্সের ভিতরে কোনও সীমানা এবং প্যাডিং কেটে দেয়। আপনি এখন নিজের উপাদানটিকে পিক্সেল-ভিত্তিক প্যাডিং এবং সীমান্ত সহ 100% প্রস্থের হিসাবে নিরাপদে ঘোষণা করতে পারেন এবং আপনার লক্ষ্যটি পুরোপুরি অর্জন করতে পারেন।

-ওয়েবকিট-বক্স-সাইজিং: বর্ডার-বক্স; / * সাফারি / ক্রোম, অন্যান্য ওয়েবকিট * /
-মোজ-বাক্স-সাইজিং: বর্ডার-বক্স; / * ফায়ারফক্স, অন্যান্য গেকো * /
বক্স-সাইজিং: বর্ডার-বক্স; / * অপেরা / আইই 8+ * /

আমি আপনার জন্য এটি হ্যান্ডেল করতে একটি মিশিন তৈরি করার পরামর্শ দিচ্ছি। আপনি ডাব্লু 3 সি http://www.w3schools.com/cssref/css3_pr_box-sizing.asp এ বক্স-সাইজিংয়ের আরও তথ্য পেতে পারেন

Question 4

আপনার ব্রাউজার সমর্থন উপর নির্ভর করে আপনি এটি ব্যবহার করতে পারেন box-shadow সম্পত্তিটি ।

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

উদাহরণ:

box-shadow: 0 0 0 1px black; // Outside black border 1px

বা

box-shadow: 0 0 0 1px white inset; // Inside white border 1px

বক্সের ছায়া ব্যবহারের একটি দুর্দান্ত সুবিধা হ'ল আপনি একাধিক বাক্সের ছায়া ব্যবহার করে সৃজনশীল পেতে পারেন:

box-shadow: 0 0 0 3px black, 0 0 0 1px white inset;

কেবলমাত্র আমি বলতে পারি না এটি কী পার্থক্যটি রেন্ডারিং পারফরম্যান্সকে বুদ্ধিমান করে তোলে। আমি ধরে নেব এটি যদি আপনার সমস্যাগুলি একবারে স্ক্রিনে এই কৌশলটি ব্যবহার করে থাকে তবে এটি একটি সমস্যা হয়ে উঠতে পারে।

Question 5

আমি একই ইস্যু মধ্যে দৌড়ে।

.right-border {
    position: relative;
}

.right-border:after {
    content: '';
    display: block;
    position: absolute;
        top: 0; right: 0;
    width: 1px;
    height: 100%;
    background: #e0e0e0;
}

এই উত্তরটি আপনাকে একটি একক দিক নির্দিষ্ট করতে দেয়। এবং IE8 + এ কাজ করবে - বাক্স-ছায়া ব্যবহারের বিপরীতে।

অবশ্যই আপনার সিউডো উপাদানগুলির বৈশিষ্ট্যগুলি পরিবর্তন করুন কারণ আপনাকে একটি নির্দিষ্ট দিকের একক প্রয়োজন।

* নতুন এবং উন্নত *

&:before {
content: '';
display: block;
position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
border: 1px solid #b7b7b7;
}

এটি সীমানা ব্যবহার করার ক্ষমতা এবং একটি বক্সের একাধিক দিকগুলিকে আঘাত করার অনুমতি দেয়।

Question 6

ভিতরেbox-sizing: border-box একটি সীমানা তৈরি করতে ব্যবহার করুন প্রস্থ পরিবর্তন না করে একটি ।

outlineসীমানা আউটসাইড তৈরি করতে ব্যবহার করুন করার জন্য ডিভ প্রস্থ পরিবর্তন না করে একটি ডিভ ।

এখানে একটি উদাহরণ: https://jsfiddle.net/4000cae9/1/

মন্তব্য: border-box বর্তমানে এটি IE দ্বারা সমর্থিত নয়

সমর্থন:

http://caniuse.com/#feat=outline

http://caniuse.com/#search=border-box

#test, #test2 {
    width: 100px;
    height:100px;
    background-color:yellow;
}
#test {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 10px dashed blue;
}
#test2 {
    outline: 10px dashed red;
}


<p>Use box-sizing: border-box to create a border INSIDE a div without modifying div width.</p>
<div id="test">border-box</div>
<p>Use outline to create a border OUTSIDE a div without modifying div width.</p>
<div id="test2">outline</div>

Question 7

অ্যাবেনসন যেমন বলেছিলেন, আপনি একটি রূপরেখা ব্যবহার করতে পারেন তবে একটি গ্যাচা হ'ল অপেরা একটি "অ-আয়তক্ষেত্রাকার আকৃতি" আঁকতে পারে। আর একটি বিকল্প যা কাজ করে বলে মনে হচ্ছে তা হ'ল negativeণাত্মক মার্জিনগুলি ব্যবহার করা, যেমন এই সিএসএস:

div {
  float:left;
  width: 50%;
  border:1px solid black;
  margin: -1px;

}

এই এইচটিএমএল সহ:

<body>
  <div>A block</div>
  <div>Another block</div>
</body>

অন্য একটি কম পরিষ্কার বিকল্প হল এইচটিএমএল-তে অতিরিক্ত মার্কআপ যুক্ত করা। উদাহরণস্বরূপ, আপনি একটি বাহ্যিক উপাদানটির প্রস্থ নির্ধারণ করেছেন এবং সীমানাটি অভ্যন্তরের সাথে যুক্ত করুন। সিএসএস:

.outer { width: 50%; float: left;}
.inner { border: 1px solid black; }

এবং এইচটিএমএল:

<body>
  <div class="outer">
    <div class="inner">A block</div>
  </div>
  <div class="outer">
    <div class="inner">Another block</div>
  <div>
</body>

Question 8

সীমানা না থাকলে প্যাডিং ব্যবহার করুন। সীমানা থাকলে প্যাডিং সরান।

.myDiv {
    width: 100px;
    height: 100px;
    padding-left: 2px;
    padding-right: 2px;
}

.myDiv:hover {
    padding-left: 0;
    padding-right: 0;
    border-left: 2px solid red;
    border-right: 2px solid red;
}

মূলত, কেবল 2px সীমানা দিয়ে 2px প্যাডিং প্রতিস্থাপন করুন। ডিভ আকার একই থাকে।

Question 9

আপনার ক্ষেত্রে আপনি প্যাডিং থেকে অর্ধেক বর্ডার বিয়োগ করে এটিকে প্রশ্নবিদ্ধ করতে পারেন? (আপনার সীমানাটি 5px প্রশস্ত হলে প্যাডিং থেকে -2.5, বাক্সের সামগ্রিক প্রস্থ হ্রাস করতে আরও ছোট হওয়ার জন্য আপনার নেতিবাচক প্যাডিং থাকতে পারে না)। সামগ্রিক বক্সটিকে একই আকার রাখতে আপনি মার্জিনে অতিরিক্ত 2.5px যুক্ত করতে পারেন।

আমি এই পরামর্শটি সত্যিই পছন্দ করি না তবে এটিকে পরিষ্কারভাবে পরিচালনা করার কোনও উপায় আছে বলে আমি মনে করি না।

Question 10

সুতরাং, আপনি সুপরিচিত আই বক্স বাক্স মডেল বাগের মতো একই অর্জন করার চেষ্টা করছেন ? এটা সম্ভব না. অথবা আপনি শুধুমাত্র Windows এ IE- এর সঙ্গে ক্লায়েন্টদের সহযোগিতা করতে হবে এবং একটি চয়ন করতে চান DOCTYPE যা ইন্টারনেট বাধ্য করে quirksmode ।

Question 11

অন্য বিকল্প, যদি আপনার ব্যাকগ্রাউন্ডের রঙটি শক্ত হয়:

body { background-color: #FFF; }

.myDiv {
    width: 100px;
    height: 100px;
    border: 3px solid #FFF;  // Border is essentially invisible since background is also #FFF;
}

.myDiv:hover {
    border-color: blue;  // Just change the border color
}

Question 12

রূপরেখা: 3px কঠিন কালো || সীমানা: 3px কঠিন কালো

div{
height:50px;
width:150px;
text-align:center;

}

div{    /*this is what you need ! */
outline:1px solid black
}

<div>
hello world
</div>

স্নিপেট প্রসারিত করুন