আমি নীচে একটি liস্টাইলযুক্ত আছে :
li{
display:inline-block;
padding:5px;
border:1px solid none;
}
li:hover{
border:1px solid #FC0;
}আমি যখন liসীমান্তের ওপারে ঘুরে দেখি তখন liপ্রায় শিফট না করেই উপস্থিত হয়। দৃশ্যমান নয় এমন 'সীমানা' থাকা কি সম্ভব?
উত্তর:
রঙ হিসাবে আপনি "স্বচ্ছ" ব্যবহার করতে পারেন। আইই এর কয়েকটি সংস্করণে, এটি কালো হিসাবে উঠে আসে, তবে আমি আইআই days দিন থেকে এটি পরীক্ষা করে দেখিনি।
http://www.researchkitchen.de/blog/archives/css-bordercolor-transparent.php
স্বচ্ছতার পরিবর্তে অস্বচ্ছ বর্ডারের সমাধান পেতে আপনারা নিশ্চয়ই এখানে অবতরণ করছেন। যে ক্ষেত্রে আপনি ব্যবহার করতে পারেন ইন rgba, যেখানে aঘোরা alpha।
.your_class {
height: 100px;
width: 100px;
margin: 100px;
border: 10px solid rgba(255,255,255,.5);
}এখানে, আপনি opacityএর borderথেকে পরিবর্তন করতে পারেন0-1
আপনি কেবল একটি সম্পূর্ণ স্বচ্ছ সীমান্ত চান, ব্যবহার করা ভাল জিনিস হল transparent, মতborder: 1px solid transparent;
আপনি সীমানা সরিয়ে প্যাডিং বাড়িয়ে দিতে পারেন:
li {
display: inline-block;
padding: 6px;
border-width: 0px;
}
li:hover {
border: 1px solid #FC0;
padding: 5px;
}<ul>
<li>Hovering is great</li>
</ul><a/>বাক্স। সীমানাটি উপাদানটির অন্তর্ভুক্ত (সুতরাং ক্লিকযোগ্য), প্যাডিং পিতামাতার অন্তর্ভুক্ত।
হ্যাঁ, আপনি ব্যবহার করতে পারেন border: 1px solid transparent
আর একটি সমাধান outlineহওভারে ব্যবহার করা (এবং সীমানাকে 0 তে সেট করা) যা নথির প্রবাহকে প্রভাবিত করে না:
li{
display:inline-block;
padding:5px;
border:0;
}
li:hover{
outline:1px solid #FC0;
}বিশেষ দ্রষ্টব্য। আপনি কেবলমাত্র বাহ্যরেখাকে শার্টহ্যান্ড সম্পত্তি হিসাবে সেট করতে পারেন, পৃথক পক্ষের জন্য নয়। এটি কেবল ডিবাগিংয়ের জন্য ব্যবহৃত হতে বোঝানো হয়েছে তবে এটি দুর্দান্তভাবে কাজ করে।
যেহেতু আপনি একটি মন্তব্যে বলেছেন যে আপনার আরও বেশি বিকল্প রয়েছে, তত ভাল, এখানে আরও একটি।
সিএসএস 3 তে দুটি আলাদা তথাকথিত "বক্স মডেল" রয়েছে। একটি ব্লক উপাদানগুলির প্রস্থে সীমানা এবং প্যাডিং যুক্ত করে, অন্যটি তা করে না। আপনি নির্দিষ্ট করে পরবর্তীটি ব্যবহার করতে পারেন
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;তারপরে, আধুনিক ব্রাউজারগুলিতে, উপাদানটির সর্বদা একই প্রস্থ থাকবে। উদাহরণস্বরূপ, আপনি যদি হোভারের উপরে এটির সীমানা প্রয়োগ করেন তবে সীমানার প্রস্থ উপাদানটির সামগ্রিক প্রস্থে যুক্ত হবে না; সীমান্তটি উপাদানটির ভিতরে "ভিতরে" যুক্ত করা হবে, সুতরাং কথা বলার জন্য। তবে, আমি যদি সঠিকভাবে মনে রাখি তবে এটি widthকাজ করার জন্য আপনাকে অবশ্যই স্পষ্টভাবে উল্লেখ করতে হবে । এই বিশেষ ক্ষেত্রে আপনার পক্ষে সম্ভবত কোনও বিকল্প নয় তবে ভবিষ্যতের পরিস্থিতিতে আপনি এটি মাথায় রাখতে পারেন।
এই ব্লগ এন্ট্রিborder-color: transparent আই 6 নকল করার একটি উপায় আছে । নীচের উদাহরণটিতে ব্লগ এন্ট্রি মন্তব্যগুলিতে উপস্থিত হওয়া "হ'লআউট" সংশোধন রয়েছে:
/* transparent border */
.testDiv {
width: 200px;
height: 200px;
border: solid 10px transparent;
}
/* IE6 fix */
*html .testDiv {
zoom: 1;
border-color: #FEFEFE;
filter: chroma(color=#FEFEFE);
}border-colorআইআই 6 ফিক্সে ব্যবহৃত .testDivউপাদানটি কোথাও ব্যবহার করা হয়নি তা নিশ্চিত করুন used আমি থেকে উদাহরণস্বরূপ পরিবর্তিত pinkকরার #FEFEFEকারণ যে এমনকি কম বলে মনে হয় ব্যবহৃত হওয়ার সম্ভাবনা।
এর সহজ সমাধানটি rgbaরঙ হিসাবে ব্যবহার করা: border-color: rgba(0,0,0,0);এটি সম্পূর্ণ স্বচ্ছ সীমানার রঙ color
স্বচ্ছ সম্পত্তি ব্যবহার করুন
border-color : transparent;