দুটি রঙের সীমানা

Question

এমবসড লুকের জন্য ক্লায়েন্ট দুটি রঙের সীমানা চায়। আমি কি একটি উপাদান এটি করতে পারি? আমি পৃথক সীমানা সহ দুটি ডোম উপাদান স্ট্যাকিং এড়াতে আশা করছিলাম।

Comments

আপনি প্রভাব অর্জন করতে জাভাস্ক্রিপ্ট ব্যবহার করতে ইচ্ছুক? jquery.malsup.com/corner

— nopuck4you

Answer 1

হ্যাঁ: outlineসম্পত্তি ব্যবহার করুন ; এটি আপনার সীমানার বাইরে দ্বিতীয় সীমানা হিসাবে কাজ করে। সতর্ক থাকুন, তবে, এটি মার্জিন, প্যাডিংস এবং ড্রপ-ছায়ার সাথে একটি উইঙ্কি ফ্যাশনে ইন্টারেক্ট করতে পারে। কিছু ব্রাউজারে আপনাকে ব্রাউজার-নির্দিষ্ট উপসর্গও ব্যবহার করতে হতে পারে; যাতে এটি এতে উঠে আসে তা নিশ্চিত করার জন্য: -webkit-outlineএবং এটির মতো (যদিও বিশেষত ওয়েবকিটের এটির প্রয়োজন হয় না)।

আপনি যে কোনও ব্রাউজারের জন্য আউটলাইনটি জেটসিসন করতে চান সেই ক্ষেত্রে এটি কার্যকরও হতে পারে (যেমন আপনি যদি ড্রপ শেডোর সাথে আউটলাইনটি একত্রিত করতে চান তবে ওয়েবকিটে আউটলাইনটি ছায়ার ভিতরে রয়েছে; ফায়ারফক্সে এটি রয়েছে) বাইরে, যাতে -moz-outline: 0আপনার সুন্দর সিএসএস ড্রপ ছায়ার আশেপাশে একটি লাইন পেতে না পারে তা নিশ্চিত করার জন্য দরকারী)

.someclass {
  border: 1px solid blue;
  outline: 1px solid darkblue;
}

সম্পাদনা করুন: কিছু লোক মন্তব্য করেছেন যা outlineআইই <8 এর সাথে ভালভাবে জাগে না 8. যদিও এটি সত্য; IE <8 সমর্থন করা আসলে আপনার করা উচিত এমন কিছু নয়।

Comments

-1 "IE <8 সমর্থন করার জন্য আসলে আপনার করা উচিত নয়"। আই 6 সমর্থন না করা ভাল হতে পারে। তবে আই 7 সমর্থন না করা হাস্যকর, একটি প্রযুক্তিগত শ্রোতাবিহীন কোনও সাইট এটি বহন করতে পারে না

— পেক্কা

outlineCSS2 সাল থেকে প্রায় ছিল।

— বোল্টক্লক

আইই 7 সমর্থন না করার জন্য +1, আপনার সাইটের সর্বদা কাজ করা উচিত এবং আইই 7 তে যুক্তিসঙ্গতভাবে ভাল দেখানো উচিত, সম্পূর্ণ সমর্থন প্রয়োজন হয় না। বিশেষত যদি এটি কেবল দুটি রঙের সীমানা। আমি ব্যক্তিগতভাবে বাক্স-ছায়া এবং অন্যান্য 'উন্নত' বৈশিষ্ট্যগুলি ব্যবহার করছি। আই 7 একটি বাক্সের ছায়া দেখতে পাচ্ছে না, ... বড় ব্যাপার। আই আই qu এর কুইর্কের চারপাশে কাজ করার জন্য কম উপযুক্ত, অত্যধিক জটিল বা এমনকি পুরানো সমাধান ব্যবহার করার কোনও কারণ নেই।

— মেরিয়ান থেইসেন

এছাড়াও, নকশা উদ্দেশ্যে আউটলাইন সম্পত্তি হ্যাক না করার জন্য ভাল অ্যাক্সেসযোগ্যতার কারণে এই রেফারেন্সটি দেখুন: outlinenone.com

— জোয়েল গ্লোভিয়ার

সাবধানতার একটি শব্দ, outlineতুলনায় কম বহুমুখী border। বিশেষ করে, W3C এর বলছেন : "নোট সীমারেখা সবদিকে সমান সীমানা বিপরীতে।। আছে না 'রূপরেখা টপ' বা 'রূপরেখা-বাম' সম্পত্তি ।" (জোর আমার।)

— বব স্টেইন

Answer 2

এটি খুব সম্ভব। এটি একটি সামান্য সিএসএস কৌতুক লাগে!

div.border {
  border: 1px solid #000;
  position: relative;
}

div.border:before {
  position: absolute;
  display: block;
  content: '';
  border: 1px solid red;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

<div class="border">Hi I have two border colors<br />I am also Fluid</div>

যে আপনার জন্য খুঁজছেন?

Comments

প্রকৃতপক্ষে এটি কৃপণ, তবে এটি নিখুঁতভাবে হ্রাস করে এবং এমনকি আমার এইচটিসির স্টক ব্রাউজারে (অ্যান্ড্রয়েড) কাজ করে! আপনি যদি ব্যবহার করেন border-radiusতবে অভ্যন্তরীণ সীমানার ব্যাসার্ধটিকে এক পিক্সেল হ্রাস করার চেষ্টা করুন, এটি দুটি বৃত্তাকার সীমানার মধ্যকার ব্যবধানকে প্রায় অলক্ষিত করে তুলবে।

— ফ্লু

এটা সুন্দর. কেবল নীচের সীমানার জন্য আমার জন্য আরও ভাল কাজ করার bottom:1pxপরিবর্তে ব্যবহার করা height:100%:)

— নিক

যদি আপনার কাছে কোনও প্যাডিং থাকে তবে div.borderআমি দেখতে পেলাম যে একই মাত্রার সাথে নেতিবাচক মার্জিন যুক্ত করে div.border:beforeসমস্ত কিছুকে ইনলাইন রাখতে সহায়তা করে। এটি করার আরও ভাল উপায় আছে? jsFiddle

— এনডাব্লু টেক

Answer 3

আরেকটি উপায় হ'ল box-shadow:

#mybox {
box-shadow:
  0 0 0 1px #CCC,
  0 0 0 2px #888,
  0 0 0 3px #444,
  0 0 0 4px #000;
-moz-box-shadow:
  0 0 0 1px #CCC,
  0 0 0 2px #888,
  0 0 0 3px #444,
  0 0 0 4px #000;
-webkit-shadow:
  0 0 0 1px #CCC,
  0 0 0 2px #888,
  0 0 0 3px #444,
  0 0 0 4px #000;
}

<div id="mybox">ABC</div>

এখানে উদাহরণ দেখুন ।

Comments

আমি এটি পছন্দ করি যেহেতু এটি সীমানা ব্যাসার্ধের সাথে রূপরেখা পদ্ধতির বিপরীতে কাজ করে

— জোহান

Answer 4

আপনি কি সিএসএস অনুমানের মধ্যে উপলব্ধ বিভিন্ন সীমান্ত শৈলী চেষ্টা করেছেন? ইতিমধ্যে দুটি সীমানা শৈলী রয়েছে যা আপনার প্রয়োজনের সাথে সামঞ্জস্য করতে পারে:

border-style: ridge;

বা

border-style: groove;

Comments

এটি আমার প্রয়োজন ঠিক ছিল। (IE8 এ <ফিল্ডসেট> স্থির করে)

— ডুমোমানিয়াক

Answer 5

আউটলাইনটি ভাল তবে কেবল যখন আপনি চারদিকে সীমানা চান want

যদি আপনি এটি কেবল নীচে বা উপরে তৈরি করতে চান তবে আপনি এটি ব্যবহার করতে পারেন বলুন

<style>

  #border-top {
  border-top: 1px solid  #ccc;
  box-shadow: inset 0 1px 0 #fff;
}
</style>

<p id="border-top">This is my content</p>

এবং নীচে জন্য:

<style>

      #border-bottom {
      border-top: 1px solid  #ccc;
      box-shadow: 0 1px 0 #fff;
    }
</style>

    <p id="border-bottom">This is my content</p>

আশা করি এটি সাহায্য করবে।

Answer 6

অসমর্থিত এবং সমস্যাযুক্ত রূপরেখা ব্যবহারের পরিবর্তে কেবল ব্যবহার করুন

• অভ্যন্তরীণ সীমানার জন্য পটভূমি রঙ + প্যাডিং
• বাইরের একের জন্য সাধারণ সীমানা।

উদাহরণ:

এইচটিএমএল:

<img src="http://cdn3.thumbs.common.smcloud.net/common/8/6/s/863444wpPN.jpg/r-0,500-n-863444wpPN.jpg" alt="malkovich" />

সিএসএস:

img {
    padding: 1px;
    background: yellow;
    border:1px solid black;
}

পরীক্ষা (জেএসফিডাল) :

img {
  padding: 1px;
  background: yellow;
  border: 1px solid black;
}

<img src="http://cdn3.thumbs.common.smcloud.net/common/8/6/s/863444wpPN.jpg/r-0,500-n-863444wpPN.jpg" alt="malkovich" />

Comments

ভাল কাজ করে, তবে যদি আপনার পটভূমির বিষয়বস্তু থাকে।

— কালমে

Answer 7

যদি "এম্বেসিং" করার অর্থ আপনি দুটি পৃথক রঙের সাথে একে অপরের চারপাশে দুটি সীমানা বোঝায় তবে outlineসম্পত্তি ( outline-left, outline-right....) থাকে তবে এটি আইই পরিবারে খুব কম সমর্থিত হয় (যেমন, আই 6 এবং 7 একে একে সমর্থন করে না) )। আপনার যদি দুটি সীমানার প্রয়োজন হয় তবে দ্বিতীয় র‌্যাপার উপাদানটি অবশ্যই সেরা।

যদি আপনি একই সীমান্তে দুটি রঙ ব্যবহার করতে চান। যেমন ব্যবহার করুন

border-right: 1px white solid;
border-left: 1px black solid;
border-top: 1px black solid;
border-bottom: 1px white solid;

বিশেষ আছে border-stylesভাল হিসাবে এই জন্য ( ridge, outsetএবং inset) কিন্তু তারা আমার অভিজ্ঞতা ব্রাউজারগুলি জুড়ে পরিবর্তিত হতে থাকে।

Comments

আমি বিশ্বাস করি তিনি যা জিজ্ঞাসা করছেন তার এমনই একটি border : black white; অর্থ যার অর্থ একটি সীমান্তের জন্য দুটি ভিন্ন রঙের সংজ্ঞা দেওয়া যা একই সাথে ক্রমান্বয়ে দেখায়।

— তারিক

@ ব্র্যাভার্ড আহ, আমি দেখছি এটি তাত্ত্বিকভাবে ব্যবহার করা সম্ভব outlineহবে তবে আইই <8

— পেক্কা

মনে রাখবেন যে কেবল রূপরেখা আছে ... দুর্ভাগ্যক্রমে বাহ্যরেখা-বাম, আউটলাইন-ডান, আউটলাইন-শীর্ষ বা আউটলাইন-নীচের মতো কোনও জিনিস নেই।

— ডেভিড শেরেট

Answer 8

সম্ভব, কিন্তু আপনি দেখতে পরীক্ষা করা উচিত যদি border-styleমান পছন্দ inset, outsetঅথবা অন্য কোনো, প্রভাব যদি আপনি চান সম্পন্ন .. ( আমি এটা যদিও সন্দেহ .. )

সিএসএস 3 এর সীমানা-চিত্র বৈশিষ্ট্য রয়েছে, তবে আমি এখনও ব্রাউজারগুলির সমর্থন সম্পর্কে জানি না ( http://www.css3.info/preview/border-image/ এ আরও তথ্য ) ..

Comments

প্রোগ্রামিং জগতে কিছুই অসম্ভব নয়: পি ভাল আমি সব সময় এই বিবৃতি দিতে পছন্দ করি :)

— তারিক

Answer 9

সহজভাবে লিখুন

style="border:medium double;"

এইচটিএমএল ট্যাগের জন্য

Comments

এটি দুটি সীমানা দেয় তবে তাদের মধ্যে একটি রঙ দেয়।

— উইলিয়াম টটল্যান্ড

Answer 10

আপনি ব্যবহার করতে পারেন

<html>
<head>
<title>Two Colors</title>
<style type="text/css">

.two-colors {
background: none repeat scroll 0% 0% rgb(245, 245, 245); border-color: rgba(111,111,111,0.2) transparent;
 padding: 4px; outline: 1px solid green;
}

</style>

<style type="text/css">
      body {
        padding-top: 20px;
        padding-bottom: 40px;
        background-color:yellow;        
      }
    </style>

</head>
<body>
<a target="_blank" href="people.htm">
  <img class="two-colors" src="people.jpg" alt="Klematis" width="213" height="120" />
  </a>

</body>
</html>

Answer 11

এটি একটি দুর্দান্ত প্রভাব উত্পাদন করে।

<div style="border: 1px solid gray; padding: 1px">
<div style="border: 1px solid gray">
   internal stuff
</div>
</div>