html - DIV ভিতরে সীমানা স্থাপন এবং তার প্রান্ত উপর নয়




css css3 (8)

আপনি বক্স-সাইজিং ব্যবহার করেন: সীমানা-বাক্স মানে কেবল সীমানা, প্যাডিং, মার্জিন ইত্যাদি নয়। সমস্ত উপাদানটি মূল উপাদানটির ভিতরে আসবে।

div p {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 150px;
    height:100%;
    border: 20px solid #f00;
    background-color: #00f;
    color:#fff;
    padding: 10px;
  
}
<div>
  <p>It was popularised in the 1960s with the release of Letraset sheets</p>
</div>

আমার একটি <div> উপাদান আছে এবং আমি এটিতে একটি সীমানা স্থাপন করতে চাই। আমি জানি style="border: 1px solid black" লিখতে পারে, কিন্তু এটি div এর উভয় পাশে 2px যোগ করে, যা আমি চাই না।

আমি এই সীমানা DIV প্রান্ত থেকে -1px হতে হবে। Div নিজেই 100px x 100px, এবং যদি আমি একটি সীমানা যোগ করি, তবে সীমানা তৈরি করতে আমাকে কিছু গণিত করতে হবে।

সীমানা তৈরি করার কোন উপায় আছে কি না, এবং বাক্সটি এখনও 100px (সীমানা সহ) হবে তা নিশ্চিত করুন?


@ সর্ভের সর্বোত্তম ক্রস ব্রাউজার সমাধান (বেশিরভাগ IE সমর্থনের জন্য) @ স্টেভে বলেছেন যে এটি প্রায় 1px ব্যাসার্ধ যুক্ত করার চেয়ে 98px প্রস্থ এবং উচ্চতায় একটি DIV তৈরি করতে পারে, অথবা আপনি 100x100 পিক্সেল ডিভির জন্য একটি ব্যাকগ্রাউন্ড চিত্র তৈরি করতে এবং এতে সীমানা আঁকতে পারেন।


আপনি নেতিবাচক মান মধ্যে সম্পত্তি রূপরেখা এবং রূপরেখা অফসেট ব্যবহার করতে পারেন, আমার জন্য wor:

outline: 2px solid red;
outline-offset: -2px;


আমি জানি এটি কিছুটা পুরানো, কিন্তু যেহেতু কীওয়ার্ড "সীমান্তের ভিতরে" আমাকে সরাসরি এখানে নিয়ে এসেছে, আমি এখানে উল্লেখযোগ্য কিছু ফলাফল ভাগ করতে চাই। যখন আমি হভার অবস্থায় সীমানা যোগ করছিলাম, তখন আমার এমন প্রভাব পড়লো যে ওপি কথা বলছে। সীমানা বিজ্ঞাপন পিক্সেল বক্সের মাত্রা যা এটি জঘন্য করেছে। আই 7 এর জন্যও কাজ করে এমন আরও দুটি উপায় রয়েছে।

1) ইতিমধ্যে উপাদান সংযুক্ত একটি সীমানা আছে এবং সহজভাবে রঙ পরিবর্তন। এই ভাবে গণিত ইতিমধ্যে অন্তর্ভুক্ত করা হয়।

div {
   width:100px;
   height:100px;
   background-color: #aaa;
   border: 2px solid #aaa; /* notice the solid */
}

div:hover {
   border: 2px dashed #666;
}

2) একটি ঋণাত্মক মার্জিন দিয়ে আপনার সীমানা ক্ষতিপূরণ। এটি এখনও অতিরিক্ত পিক্সেল যুক্ত করবে, তবে উপাদানটির অবস্থানটি হুমকিপূর্ণ হবে না

div {
   width:100px;
   height:100px;
   background-color: #aaa;
}

div:hover {
  margin: -2px;
  border: 2px dashed #333;
}

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

<div style="width:100px;">
<div style="border:2px solid #000;">
contents here
</div>
</div>

এই স্পষ্টভাবে শুধুমাত্র যদি আপনার সঠিক প্রস্থ অতিরিক্ত মার্কআপ থাকার চেয়ে আরো গুরুত্বপূর্ণ!


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

সুতরাং বলুন আপনার একটি কালো 100px x 100px div এবং আপনাকে একটি সাদা সীমানা দিয়ে এটি আনসেট করতে হবে - যা 5px (বলুন) এর একটি অভ্যন্তরীণ অফসেট আছে - এটি এখনও উপরের বৈশিষ্ট্যগুলির সাথে সম্পন্ন করা যেতে পারে।

box-shadow

এখানে কৌশলটি জানা যায় যে একাধিক বাক্স-ছায়া অনুমতি দেওয়া হয়, যেখানে প্রথম ছায়া উপরে থাকে এবং পরবর্তী ছায়াগুলির নিম্ন-ক্রম নিম্নতর থাকে।

সেই জ্ঞানের সাথে, বক্স-শেডো ঘোষণাটি হবে:

box-shadow: inset 0 0 0 5px black, inset 0 0 0 10px white;

div {
  width: 100px;
  height: 100px;
  background: black;
  box-shadow: inset 0 0 0 5px black, inset 0 0 0 10px white; 
}
<div></div>

মূলত, এই ঘোষণাটি কী বলছে তা হল: শেষ (10px সাদা) শ্যাডোটি প্রথমে রেন্ডার করুন, তারপরে উপরের 5px কালো ছায়াটি রেন্ডার করুন।

outline outline-offset সঙ্গে outline-offset

রূপরেখার ঘোষণার উপরে একই প্রভাবের জন্য:

outline: 5px solid white;
outline-offset: -10px;

div {
  width: 100px;
  height: 100px;
  background: black;
  outline: 5px solid white;
  outline-offset: -10px;
}
<div></div>

এনবি: আপনার কাছে এটি গুরুত্বপূর্ণ হলে outline-offset IE দ্বারা সমর্থিত নয়

Codepen ডেমো


ছদ্ম উপাদান ব্যবহার করুন:

.button {
    background: #333;
    color: #fff;
    float: left;
    padding: 20px;
    margin: 20px;
    position: relative;
}

.button::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 5px solid #f00;
}
<div class='button'>Hello</div>

ব্যবহার ::after আপনি নির্বাচিত উপাদান ভার্চুয়াল শেষ সন্তানের স্টাইল ::aftercontent সম্পত্তি একটি বেনামী প্রতিস্থাপিত উপাদান তৈরি করে।

আমরা পিতামাতার আপেক্ষিক পরম অবস্থান ব্যবহার করে ছদ্ম উপাদান ধারণকারী করা হয়। তারপরে আপনার মূল উপাদানটির পটভূমিতে যেকোনো কাস্টম ব্যাকগ্রাউন্ড এবং / বা সীমানা থাকা আপনার স্বাধীনতা রয়েছে।

এই পদ্ধতিটি মূল উপাদান বিষয়বস্তুর অবস্থানকে প্রভাবিত করে না যা box-sizing: border-box; ব্যবহার থেকে আলাদা box-sizing: border-box;

এই উদাহরণ বিবেচনা করুন:

.parent {
    width: 200px;
}

.button {
    background: #333;
    color: #fff;
    padding: 20px;
    border: 5px solid #f00;
    border-left-width: 20px;
    box-sizing: border-box;
}
<div class='parent'>
    <div class='button'>Hello</div>
</div>

এখানে। .button প্রস্থটি মূল উপাদান ব্যবহার করে সীমাবদ্ধ। border-left-width সেট করা সামগ্রী-বাক্স আকার এবং এইভাবে পাঠ্যের অবস্থান সমন্বয় করে।

.parent {
    width: 200px;
}

.button {
    background: #333;
    color: #fff;
    padding: 20px;
    position: relative;
}

.button::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 5px solid #f00;
    border-left-width: 20px;
}
<div class='parent'>
    <div class='button'>Hello</div>
</div>

ছদ্ম-উপাদান পদ্ধতির ব্যবহার সামগ্রী-বক্স আকার প্রভাবিত করে না।

অ্যাপ্লিকেশন উপর নির্ভর করে, একটি ছদ্ম-উপাদান ব্যবহার পদ্ধতির একটি ইচ্ছাজনক আচরণ হতে পারে বা হতে পারে।


border-box box-sizing সম্পত্তি সেট করুন:

div {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 100px;
    height: 100px;
    border: 20px solid #f00;
    background: #00f;
    margin: 10px;
}

div + div {
    border: 10px solid red;
}
<div>Hello!</div>
<div>Hello!</div>

এটা IE8 এবং উপরে কাজ করে।







border