ড্যাশযুক্ত সীমানা স্ট্রোকের দৈর্ঘ্য এবং স্ট্রোকের মধ্যে দূরত্ব নিয়ন্ত্রণ করুন

Question

সিএসএসে ড্যাশড বর্ডার স্ট্রোকগুলির মধ্যে দৈর্ঘ্য এবং দূরত্ব নিয়ন্ত্রণ করা কি সম্ভব?

নীচের এই উদাহরণটি ব্রাউজারগুলির মধ্যে আলাদাভাবে প্রদর্শন করে:

div {
  border: dashed 4px #000;
  padding: 20px;
  display: inline-block;
}

<div>I have a dashed border!</div>

বড় পার্থক্য: আইই 11 / ফায়ারফক্স / ক্রোম

এমন কোনও পদ্ধতি আছে যা ড্যাশযুক্ত সীমানার উপস্থিতির আরও বৃহত্তর নিয়ন্ত্রণ সরবরাহ করতে পারে?

Answer 1

সিএসএস রেন্ডার ব্রাউজার নির্দিষ্ট এবং আমি এটিতে কোনও সূক্ষ্ম টিউনিং জানি না, হ্যামের পরামর্শ অনুসারে আপনার ছবিগুলি নিয়ে কাজ করা উচিত। তথ্যসূত্র: http://www.w3.org/TR/CSS2/box.html#border-style-properties

Answer 2

নেটিভ ড্যাশড সীমান্ত সম্পত্তি মানটি ড্যাশগুলির উপর নিজের নিয়ন্ত্রণ সরবরাহ করে না ... সুতরাং border-imageসম্পত্তিটি আনুন !

এর সাথে নিজের সীমানা মেশান border-image

সামঞ্জস্যতা : এটি দুর্দান্ত ব্রাউজার সমর্থন (IE 11 এবং সমস্ত আধুনিক ব্রাউজার) সরবরাহ করে। পুরানো ব্রাউজারগুলির ফালব্যাক হিসাবে একটি সাধারণ সীমানা সেট করা যেতে পারে।

আসুন এটি তৈরি করুন

এই সীমানাগুলি ঠিক একই ক্রস ব্রাউজার প্রদর্শন করবে!

পদক্ষেপ 1 - একটি উপযুক্ত চিত্র তৈরি করুন

এই উদাহরণটি 15 পিক্সেল প্রশস্ত 15 পিক্সেল উচ্চ এবং ফাঁকগুলি বর্তমানে 5px প্রশস্ত। এটি স্বচ্ছতার সাথে একটি .png।

জুম ইন করার সময় ফটোশপটিতে এটি দেখতে দেখতে এটির মতো দেখাচ্ছে:

এটি স্কেল করার মতো দেখাচ্ছে:

ব্যবধান এবং স্ট্রোক দৈর্ঘ্য নিয়ন্ত্রণ করে

আরও প্রশস্ত / সংক্ষিপ্ত ফাঁক বা স্ট্রোক তৈরি করতে, চিত্রের ফাঁক বা স্ট্রোকগুলি প্রশস্ত / সংক্ষিপ্ত করুন।

এখানে বৃহত্তর 10px ফাঁক সহ একটি চিত্র রয়েছে:

সঠিকভাবে স্কেলড =

পদক্ষেপ 2 - সিএসএস তৈরি করুন - এই উদাহরণে 4 টি বেসিক পদক্ষেপ প্রয়োজন

1. সীমানা-চিত্র-উত্স সংজ্ঞা দিন :

   border-image-source:url("http://i.stack.imgur.com/wLdVc.png");  

2. Ptionচ্ছিক - সীমানা-চিত্র-প্রস্থ নির্ধারণ করুন :

   border-image-width: 1;

   ডিফল্ট মান ১। এটি পিক্সেল মান, শতাংশের মান বা অন্য একাধিক (1x, 2x, 3x ইত্যাদি) দিয়েও সেট করা যেতে পারে। এটি কোনও border-widthসেটকে ওভাররাইড করে।

3. সীমানা-চিত্র-স্লাইস সংজ্ঞায়িত করুন :

   এই উদাহরণস্বরূপ, চিত্রগুলির উপরে, ডান, নীচে এবং বাম সীমানার বেধ 2px এবং এর বাইরে কোনও ফাঁক নেই, সুতরাং আমাদের স্লাইসের মান 2:

   border-image-slice: 2; 

   টুকরোগুলি দেখতে দেখতে উপরে, ডান, নীচে এবং বাম থেকে 2 পিক্সেল:

   

4. সীমানা-চিত্র-পুনরাবৃত্তি সংজ্ঞায়িত করুন :

   এই উদাহরণে, আমরা প্যাটার্নটি আমাদের ডিভের চারপাশে সমানভাবে পুনরাবৃত্তি করতে চাই। সুতরাং আমরা চয়ন:

   border-image-repeat: round;

শর্টহ্যান্ড লেখা

উপরের বৈশিষ্ট্যগুলি পৃথকভাবে বা সীমানা-চিত্র ব্যবহার করে সংক্ষিপ্তভাবে সেট করা যেতে পারে :

border-image: url("http://i.stack.imgur.com/wLdVc.png") 2 round;

সম্পূর্ণ উদাহরণ

border: dashed 4px #000ফলব্যাকটি নোট করুন । সমর্থনকারী ব্রাউজারগুলি এই সীমানাটি গ্রহণ করবে।

.bordered {
  display: inline-block;
  padding: 20px;
  /* Fallback dashed border
     - the 4px width here is overwritten with the border-image-width (if set)
     - the border-image-width can be omitted below if it is the same as the 4px here
  */
  border: dashed 4px #000;
  
  /* Individual border image properties */
  border-image-source: url("http://i.stack.imgur.com/wLdVc.png");
  border-image-slice: 2;
  border-image-repeat: round;  
  
  /* or use the shorthand border-image */
  border-image: url("http://i.stack.imgur.com/wLdVc.png") 2 round;
}


/*The border image of this one creates wider gaps*/
.largeGaps {
  border-image-source: url("http://i.stack.imgur.com/LKclP.png");
  margin: 0 20px;
}

<div class="bordered">This is bordered!</div>

<div class="bordered largeGaps">This is bordered and has larger gaps!</div>

Comments

মনে রাখবেন যে আপনি border-style: solidযদি ফ্যালব্যাক বাদ দেন তবে আপনাকে (বা অনুরূপ কিছু) নির্দিষ্ট করতে হবে।

— রব্বেন্ডেবিনে

এই সমাধানটি 'সীমান্ত-বর্ণ' বৈশিষ্ট্যটির সাথে কাজ করে না

— মাইকেল রোভিনসকি

Answer 3

border-imageসম্পত্তি ছাড়াও , স্ট্রোকের দৈর্ঘ্য এবং তাদের মধ্যে দূরত্বের নিয়ন্ত্রণ সহ ড্যাশযুক্ত সীমানা তৈরি করার আরও কয়েকটি উপায় রয়েছে। সেগুলি নীচে বর্ণিত:

পদ্ধতি 1: এসভিজি ব্যবহার করে

আমরা একটি pathবা একটি polygonউপাদান ব্যবহার করে এবং stroke-dasharrayসম্পত্তি সেট করে ড্যাশড সীমানা তৈরি করতে পারি । সম্পত্তিটি দুটি পরামিতি নেয় যেখানে একটি ড্যাশের আকার নির্ধারণ করে এবং অন্যটি তাদের মধ্যে স্থান নির্ধারণ করে।

পেশাদাররা:

1. প্রকৃতির দ্বারা এসভিজিগুলি স্কেলযোগ্য গ্রাফিক্স এবং কোনও ধারক মাত্রার সাথে খাপ খাইয়ে নিতে পারে।
2. border-radiusজড়িত থাকলেও খুব ভাল কাজ করতে পারে । আমরা শুধু প্রতিস্থাপন করবে আছে pathএকটি সঙ্গে circleমত এই উত্তর (বা) রূপান্তর pathএকটি বৃত্ত মধ্যে।
3. এসভিজির জন্য ব্রাউজার সমর্থনটি বেশ ভাল এবং আইই 8- এর জন্য ভিএমএল ব্যবহার করে ফ্যালব্যাক সরবরাহ করা যেতে পারে।

কনস:

1. যখন ধারকটির মাত্রা আনুপাতিকভাবে পরিবর্তিত হয় না, তখন পাথগুলি স্কেল করে যার ফলে ড্যাশের আকার এবং তাদের মধ্যে স্থান পরিবর্তন হয় (স্নিপেটের প্রথম বাক্সে ঘোরাফেরা করার চেষ্টা করুন)। এটি vector-effect='non-scaling-stroke'(দ্বিতীয় বাক্সের মতো) যোগ করে নিয়ন্ত্রণ করা যেতে পারে তবে এই সম্পত্তিটির জন্য ব্রাউজার সমর্থনটি আইই তে নেই।

.dashed-vector {
  position: relative;
  height: 100px;
  width: 300px;
}
svg {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
}
path{
  fill: none;
  stroke: blue;
  stroke-width: 5;
  stroke-dasharray: 10, 10;
}
span {
  position: absolute;
  top: 0px;
  left: 0px;
  padding: 10px;
}


/* just for demo */

div{
  margin-bottom: 10px;
  transition: all 1s;
}
div:hover{
  height: 100px;
  width: 400px;
}

<div class='dashed-vector'>
  <svg viewBox='0 0 300 100' preserveAspectRatio='none'>
    <path d='M0,0 300,0 300,100 0,100z' />
  </svg>
  <span>Some content</span>
</div>

<div class='dashed-vector'>
  <svg viewBox='0 0 300 100' preserveAspectRatio='none'>
    <path d='M0,0 300,0 300,100 0,100z' vector-effect='non-scaling-stroke'/>
  </svg>
  <span>Some content</span>
</div>

---

পদ্ধতি 2: গ্রেডিয়েন্ট ব্যবহার করে

আমরা একাধিক linear-gradientপটভূমি চিত্র ব্যবহার করতে পারি এবং ড্যাশযুক্ত সীমান্ত প্রভাব তৈরি করতে তাদের যথাযথভাবে অবস্থান করতে পারি। এটি একটি দিয়েও করা যেতে পারে repeating-linear-gradientতবে একটি পুনরাবৃত্ত গ্রেডিয়েন্ট ব্যবহার করার কারণে খুব বেশি উন্নতি হয়নি কারণ আমাদের প্রতিটি গ্রেডিয়েন্টকে কেবল একটি দিকে পুনরাবৃত্তি করতে হবে।

.dashed-gradient{
  height: 100px;
  width: 200px;
  padding: 10px;
  background-image: linear-gradient(to right, blue 50%, transparent 50%), linear-gradient(to right, blue 50%, transparent 50%), linear-gradient(to bottom, blue 50%, transparent 50%), linear-gradient(to bottom, blue 50%, transparent 50%);
  background-position: left top, left bottom, left top, right top;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 20px 3px, 20px 3px, 3px 20px, 3px 20px;
}

.dashed-repeating-gradient {
  height: 100px;
  width: 200px;
  padding: 10px;
  background-image: repeating-linear-gradient(to right, blue 0%, blue 50%, transparent 50%, transparent 100%), repeating-linear-gradient(to right, blue 0%, blue 50%, transparent 50%, transparent 100%), repeating-linear-gradient(to bottom, blue 0%, blue 50%, transparent 50%, transparent 100%), repeating-linear-gradient(to bottom, blue 0%, blue 50%, transparent 50%, transparent 100%);
  background-position: left top, left bottom, left top, right top;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 20px 3px, 20px 3px, 3px 20px, 3px 20px;
}

/* just for demo */

div {
  margin: 10px;
  transition: all 1s;
}
div:hover {
  height: 150px;
  width: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='dashed-gradient'>Some content</div>
<div class='dashed-repeating-gradient'>Some content</div>

পেশাদাররা:

1. স্ক্যানেবল এবং কন্টেইনারটির মাত্রা গতিশীল হলেও মানিয়ে নিতে পারে।
2. অতিরিক্ত কোনও ছদ্ম-উপাদান ব্যবহার করে না যার অর্থ তাদের অন্য কোনও সম্ভাব্য ব্যবহারের জন্য আলাদা রাখা যেতে পারে।

কনস:

1. রৈখিক গ্রেডিয়েন্টগুলির জন্য ব্রাউজার সমর্থন তুলনামূলকভাবে কম এবং আপনি IE 9- সমর্থন করতে চাইলে এটি যায় না। এমনকি CSS3 PIE এর মতো লাইব্রেরিও IE8- এ গ্রেডিয়েন্ট নিদর্শন তৈরি করতে সমর্থন করে না।
2. border-radiusজড়িত থাকার সময় ব্যবহার করা যায় না কারণ ব্যাকগ্রাউন্ডের ভিত্তিতে বক্ররেখা থাকে না border-radius। পরিবর্তে তারা ক্লিপ পেতে।

---

পদ্ধতি 3: বক্সের ছায়া

সিউডো-এলিমেন্ট ব্যবহার করে আমরা একটি ছোট বার (ড্যাশের আকারে) তৈরি করতে পারি এবং তারপরে box-shadowনীচের স্নিপেটের মতো সীমানা তৈরি করতে এর একাধিক সংস্করণ তৈরি করতে পারি।

যদি ড্যাশটি একটি বর্গক্ষেত্র আকার হয় তবে একক সিউডো-উপাদান যথেষ্ট হবে তবে এটি যদি একটি আয়তক্ষেত্র হয় তবে আমাদের শীর্ষ + নীচের সীমান্তগুলির জন্য একটি সিউডো-এলিমেন্ট এবং বাম + ডান সীমানার জন্য অন্য সিউডো-এলিমেন্টের প্রয়োজন হবে। এর কারণ শীর্ষ সীমান্তের ড্যাশগুলির জন্য উচ্চতা এবং প্রস্থটি বাম দিকের থেকে পৃথক হবে।

পেশাদাররা:

1. সিউডো-এলিমেন্টের মাত্রা পরিবর্তন করে ড্যাশের মাত্রাগুলি নিয়ন্ত্রণযোগ্য control প্রতিটি ছায়ার মধ্যে স্থানটি সংশোধন করে ব্যবধানটি নিয়ন্ত্রণযোগ্য।
2. প্রতিটি বাক্সের ছায়ার জন্য আলাদা রঙ যুক্ত করে একটি খুব অনন্য প্রভাব তৈরি করা যেতে পারে।

কনস:

1. যেহেতু ম্যানুয়ালি ড্যাশ এবং স্পেসিংয়ের মাত্রাগুলি আপনাকে ম্যানুয়ালি সেট করতে হবে, তাই প্যারেন্ট বক্সের মাত্রাগুলি গতিশীল হলে এই পদ্ধতিটি ভাল নয়।
2. আইই 8 এবং নিম্নতর বাক্সের ছায়া সমর্থন করে না । তবে CSS3 PIE এর মতো লাইব্রেরি ব্যবহার করে এটি কাটিয়ে উঠতে পারে।
3. এর সাথে ব্যবহার করা যেতে পারে border-radiusতবে তাদের অবস্থান নির্ধারণ করা খুব চতুর হবে একটি বৃত্তের পয়েন্টগুলি (এবং সম্ভবত এমনকি transform) ও খুঁজে পেতে হবে ।

.dashed-box-shadow{
  position: relative;
  height: 120px;
  width: 120px;
  padding: 10px;
}
.dashed-box-shadow:before{ /* for border top and bottom */
  position: absolute;
  content: '';
  top: 0px;
  left: 0px;
  height: 3px; /* height of the border top and bottom */
  width: 10px; /* width of the border top and bottom */
  background: blue; /* border color */
  box-shadow: 20px 0px 0px blue, 40px 0px 0px blue, 60px 0px 0px blue, 80px 0px 0px blue, 100px 0px 0px blue, /* top border */
    0px 110px 0px blue, 20px 110px 0px blue, 40px 110px 0px blue, 60px 110px 0px blue, 80px 110px 0px blue, 100px 110px 0px blue; /* bottom border */
}
.dashed-box-shadow:after{ /* for border left and right */
  position: absolute;
  content: '';
  top: 0px;
  left: 0px;
  height: 10px; /* height of the border left and right */
  width: 3px; /* width of the border left and right */
  background: blue; /* border color */
  box-shadow: 0px 20px 0px blue, 0px 40px 0px blue, 0px 60px 0px blue, 0px 80px 0px blue, 0px 100px 0px blue, /* left border */
    110px 0px 0px blue, 110px 20px 0px blue, 110px 40px 0px blue, 110px 60px 0px blue, 110px 80px 0px blue, 110px 100px 0px blue; /* right border */
}

<div class='dashed-box-shadow'>Some content</div>

Comments

আপনি যদি এসভিজি সমাধানটি ব্যবহার করতে যাচ্ছেন তবে আমি pointer-events:noneবিষয়বস্তুটির সাথে ইন্টারঅ্যাক্ট করতে সক্ষম হতে এসভিজি ইনর্ডার যুক্ত করার পরামর্শ দিচ্ছি ।

— সোডজ

দুর্দান্ত উত্তর।

— ডিভ্যান্স

Answer 4

সংক্ষিপ্ত এক: না, তা নয়। পরিবর্তে আপনাকে চিত্রগুলি নিয়ে কাজ করতে হবে।

Comments

এই উত্তরটি 2018 সালের পুরানো

— গডব্লিসট্রাসউবেরি

@ উইলিয়ামহ্যাম্পশায়ার আমি এই কৌশলটি নিয়ে যাব youtu.be/vs34f9FiHps?t=779 তবে গৃহীত উত্তরগুলি পরীক্ষা করুন, আপনি অন্যান্য সমাধানগুলি আরও ভাল পছন্দ করতে পারেন

— Godblessstrawberry

@godblessstrawberry ধন্যবাদ !! তবে এটি যে এসভিজি ব্যবহার করছে তাই এখনও কেবল সিএসএস ব্যবহার করছে না ...

— উইলিয়াম হ্যাম্পশায়ার

@ উইলিয়ামহ্যাম্পশায়ার থ্রেডে বাক্স-শ্যাডো সমাধান রয়েছে যা আমি হ্যারি উত্তর দিয়েছি

— Godblessstrawberry

@godblessstrawberry আপনি কি সমাধানটির চেষ্টা করেছেন? সমাধানটি বিভাগ দ্বারা ড্যাশড লাইন বিভাগকে টেনে নিয়েছে। এটি কেবল একটি পোকা এবং অনুশীলনে অকেজো!

— ইউ জিয়ানরং

Answer 5

@ কোয়ার্ট দ্বারা তৈরি একটি দুর্দান্ত সরঞ্জাম রয়েছে যার ড্যাশযুক্ত সীমান্ত জেনারেটর বলে ।

এটি আপনার ইচ্ছা স্ট্রোক ড্যাশ অ্যারে সেট করার জন্য ব্যাকগ্রাউন্ড চিত্র হিসাবে একটি এসজিজি ব্যবহার করে এবং এটি বেশ সুবিধাজনক।

তারপরে আপনি এটিকে কেবল সীমানার জায়গায় আপনার উপাদানটির পটভূমির সম্পত্তি হিসাবে ব্যবহার করতে পারেন:

div {
  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='black' stroke-width='4' stroke-dasharray='6%2c 14' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
  padding: 20px;
  display: inline-block;
}

Comments

এটি একটি সহজ, সহজ এবং দ্রুত সমাধান

— jamesioppolo

এটি ভাল কাজ!

— কেভিন রাফে

Answer 6

স্ট্রোকের দৈর্ঘ্য স্ট্রোকের প্রস্থের উপর নির্ভর করে। আপনি প্রস্থ বৃদ্ধি করে দৈর্ঘ্য বৃদ্ধি করতে পারেন এবং অভ্যন্তরের উপাদান দ্বারা সীমান্তের কিছু অংশ আড়াল করতে পারেন।

.thin {
    background: #F4FFF3;
    border: 2px dashed #3FA535;  
    position: relative;
}

.thin:after {
    content: '';
    position: absolute;
    left: -1px;
    top: -1px;
    right: -1px;
    bottom: -1px;
    border: 1px solid #F4FFF3;
}

https://jsfiddle.net/ok6srt2z/

Comments

তবে এইভাবে আপনি মূল উপাদানটির বিষয়বস্তুগুলি ক্লিক করতে অক্ষম হবেন কারণ "পরে" সিউডোলেমেন্ট এটি কভার করবে। সুতরাং সবচেয়ে ভাল উপায় হ'ল এসভিজি ব্যবহার।

— il4

pointer-events: noneওভারলে সমস্যাটি রোধ করতে আপনি যুক্ত করতে পারেন ।

— বেনজে

Answer 7

আমি সম্প্রতি একই সমস্যা ছিল।

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

<div class="relative">
    <div class="absolute absolute--fill overflow-hidden">
        <div class="absolute absolute--fill b--dashed b--red"
            style="
                border-width: 4px 0px 4px 0px;
                transform: scaleX(2);
        "></div>
        <div class="absolute absolute--fill b--dashed b--red"
            style="
                border-width: 0px 4px 0px 4px;
                transform: scaleY(2);
        "></div>
    </div>

    <div> {{Box content goes here}} </div>
</div>

দ্রষ্টব্য: আমি এই উদাহরণে ট্যাচিয়ন ব্যবহার করেছি, তবে আমার ধারণা ক্লাসগুলি একরকম স্ব-ব্যাখ্যামূলক।

Answer 8

এটি ডিভের উপর ক্লাস = "মাইক্লাস" ব্যবহার করে কমলা এবং ধূসর সীমানা তৈরি করবে।

.myclass {
    outline:dashed darkorange  12px;
    border:solid slategray  14px;
    outline-offset:-14px;
}

Comments

"ড্যাশড সীমানা উপস্থিতিগুলিকে আরও বেশি নিয়ন্ত্রণ প্রদান করুন" এর মাধ্যমে, ওপি (মূল পোস্টার) এর অর্থ হ'ল তিনি প্রতিটি ড্যাশের দৈর্ঘ্য নিয়ন্ত্রণ করতে চান, যেমনটি প্রশ্নের শুরুতে বলা হয়েছিল। কোন বিভ্রান্তির জন্য দুঃখিত।

— স্কাইলার