বিন্দুযুক্ত সীমানার বিন্দুর মধ্যে স্থান কীভাবে বাড়ানো যায়

Question

আমি আমার বক্সে বিন্দু শৈলীর সীমানা ব্যবহার করছি

.box {
    width: 300px;
    height: 200px;
    border: dotted 1px #f00;
    float: left;
}

আমি সীমান্তের প্রতিটি বিন্দুর মধ্যে স্থান বৃদ্ধি করতে চাই।

Answer 1

এই কৌশলটি অনুভূমিক এবং উল্লম্ব উভয় সীমানার জন্য কাজ করে:

/*Horizontal*/
background-image: linear-gradient(to right, black 33%, rgba(255,255,255,0) 0%);
background-position: bottom;
background-size: 3px 1px;
background-repeat: repeat-x;

/*Vertical*/
background-image: linear-gradient(black 33%, rgba(255,255,255,0) 0%);
background-position: right;
background-size: 1px 3px;
background-repeat: repeat-y;

আপনি ব্যাকগ্রাউন্ড-আকার এবং রৈখিক-গ্রেডিয়েন্ট শতাংশের সাথে অনুপাতের সাথে আকার সমন্বয় করতে পারেন। এই উদাহরণে আমার কাছে 1px বিন্দু এবং 2px ব্যবধানের একটি বিন্দুযুক্ত রেখা রয়েছে। একাধিক ব্যাকগ্রাউন্ড ব্যবহার করে আপনার একাধিক ডটেড বর্ডার থাকতে পারে।

এটি এই জেএসফিডেলে চেষ্টা করুন বা কোড স্নিপেট উদাহরণটি একবার দেখুন:

div {
  padding: 10px 50px;
}
.dotted {
  border-top: 1px #333 dotted;
}
.dotted-gradient {
  background-image: linear-gradient(to right, #333 40%, rgba(255, 255, 255, 0) 20%);
  background-position: top;
  background-size: 3px 1px;
  background-repeat: repeat-x;
}
.dotted-spaced {
  background-image: linear-gradient(to right, #333 10%, rgba(255, 255, 255, 0) 0%);
  background-position: top;
  background-size: 10px 1px;
  background-repeat: repeat-x;
}
.left {
  float: left;
  padding: 40px 10px;
  background-color: #F0F0DA;
}
.left.dotted {
  border-left: 1px #333 dotted;
  border-top: none;
}
.left.dotted-gradient {
  background-image: linear-gradient(to bottom, #333 40%, rgba(255, 255, 255, 0) 20%);
  background-position: left;
  background-size: 1px 3px;
  background-repeat: repeat-y;
}
.left.dotted-spaced {
  background-image: linear-gradient(to bottom, #333 10%, rgba(255, 255, 255, 0) 0%);
  background-position: left;
  background-size: 1px 10px;
  background-repeat: repeat-y;
}

<div>no
  <br>border</div>
<div class='dotted'>dotted
  <br>border</div>
<div class='dotted-gradient'>dotted
  <br>with gradient</div>
<div class='dotted-spaced'>dotted
  <br>spaced</div>

<div class='left'>no
  <br>border</div>
<div class='dotted left'>dotted
  <br>border</div>
<div class='dotted-gradient left'>dotted
  <br>with gradient</div>
<div class='dotted-spaced left'>dotted
  <br>spaced</div>

Comments

নির্বাচিত উত্তর হওয়া উচিত।

— কেভিন জুরকোভস্কি 21

imho এটি এন ডিগ্রি একটি হ্যাক।

— মুহাম্মদ উমার

আমি একই জিনিসটি করতে চাই তবে বিন্দুযুক্ত সীমানা প্রস্থটি 1px এর পরিবর্তে 3px এবং এখন এটি বিন্দুর পরিবর্তে চৌকো হয়ে যায়।

— ভোজেন্দ্র রুনিয়র

আমি এটি প্রয়োগ করতে এবং রং এবং স্পেসিং দ্রুত পরিবর্তন করতে একটি এসসিএসএস মিক্সিন তৈরি করেছি। এটি github.com/florbraz/ ডটেড- বোর্ডার- w-custom-spacing-SCSS- মিক্সিন এ দেখুন ।

— ফ্লোর ব্রাজ

আমি যদি সমস্ত 4 টি প্রান্ত ছিন্ন করতে চাই তবে কী হবে?

— রায়ান শিলিংটন

Answer 2

অনুভূমিক সীমানাগুলি দিয়ে আমি যা চাই তার প্রায় কোনও কিছুই অর্জন করতে সাম্প্রতিক প্রকল্পে আমি একটি কৌশল ব্যবহার করেছি। আমি <hr/>প্রতিবার ব্যবহার করি আমার অনুভূমিক সীমানা দরকার। এই ঘন্টাটিতে সীমানা যুক্ত করার প্রাথমিক উপায়টি হ'ল কিছু

 hr {border-bottom: 1px dotted #000;}

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

hr {
height:14px; /* specify a height for this hr */
overflow:hidden;
}

এবং নীচে, আপনি আপনার সীমানা তৈরি করুন (এখানে বিন্দুর সাথে একটি উদাহরণ রয়েছে)

hr:after {
content:".......................................................................";
letter-spacing: 4px; /* Use letter-spacing to increase space between dots*/
}

এর অর্থ হ'ল আপনি বিন্দু, গ্রেডিয়েন্টস ইত্যাদিতে পাঠ্য-ছায়া যুক্ত করতে পারেন যা কিছু আপনি চান ...

ঠিক আছে, এটি অনুভূমিক সীমানার জন্য সত্যিই দুর্দান্ত কাজ করে। আপনার যদি উল্লম্ব বিষয়গুলির প্রয়োজন হয় তবে আপনি অন্য ঘন্টাটির জন্য একটি শ্রেণি নির্দিষ্ট করতে পারেন এবং CSS3 rotationসম্পত্তি ব্যবহার করতে পারেন ।

Comments

এই ক্রস ব্রাউজারটি কি সামঞ্জস্যপূর্ণ?

— J82

আমি ** এর কী বেদনা বজায় রাখতে হবে তা ভাবতে পারি না।

— Kzqai

উল্লম্ব এক জন্য একই প্রভাব পেতে?

— রিঙ্কু

@ রিঙ্কু রূপান্তর সহ: ঘোরান (90 ডিগ্রি); প্রদর্শন ব্লক;

— জেরোইন কে

খুব কুরুচিপূর্ণ, তবে খুব চালাক :) আমি আরও খেয়াল করেছি যে আমি উচ্চতা নির্ধারণ করে দিলে আমার আরও ভাল নিয়ন্ত্রণ থাকতে পারে: 0; এবং বসানো নিয়ন্ত্রণ করতে প্যাডিং ব্যবহার করুন। সুতরাং আমি নীচে একটি ছোট ঘর সহ ডটড লাইনটি চেয়েছিলাম তাই আমি প্যাডিং ব্যবহার করেছি: 0 0 10px;

— ম্যাথুলি

Answer 3

আপনি খাঁটি সিএসএস দিয়ে এটি করতে পারবেন না - সিএসএস 3 স্পেসে এমনকি এ সম্পর্কে একটি নির্দিষ্ট উদ্ধৃতি রয়েছে:

দ্রষ্টব্য: বিন্দু এবং ড্যাশগুলির ব্যবধানের উপর এবং ড্যাশগুলির দৈর্ঘ্যের উপর কোনও নিয়ন্ত্রণ নেই। বাস্তবায়নগুলিকে এমন একটি ব্যবধান চয়ন করতে উত্সাহিত করা হয় যা কোণগুলিকে প্রতিসম করে তোলে।

তবে আপনি সীমানা চিত্র বা পটভূমি চিত্র ব্যবহার করতে পারেন যা কৌশলটি করে।

Comments

সম্পূর্ণ কাস্টমাইজযোগ্য সীমানার জন্য আপনি গ্রেডিয়েন্টস (খাঁটি সিএসএস) ব্যবহার করতে পারেন। নীচের উত্তরটি দেখুন

— অলিভিটর

-1, @ শাদিক্কা, সিএসএস 3 অনুচ্ছেদে যা বলেছে border: dottedতা হ'ল এটি ব্যবহার করে করা যায় না , তবে ইগ্রোরাজের উত্তর যেমন দেখায় তেমন গ্রেডিয়েন্ট ব্যবহার করে এটি করা সম্ভব।

— পেসারিয়ার

Answer 4

এটি স্ট্যান্ডার্ড সিএসএস সীমানা এবং একটি সিউডো উপাদান + ওভারফ্লো: লুকানো ব্যবহার করে। উদাহরণস্বরূপ আপনি তিনটি পৃথক 2 পিএক্স ড্যাশযুক্ত সীমানা পান: সাধারণ, 5px এর মতো ব্যবধানযুক্ত, 10px এর মতো ব্যবধানযুক্ত। কেবলমাত্র 10-8 = 2px সহ 10px দৃশ্যমান।

div.two{border:2px dashed #FF0000}

div.five:before {
  content: "";
  position: absolute;
  border: 5px dashed #FF0000;
  top: -3px;
  bottom: -3px;
  left: -3px;
  right: -3px;
}

div.ten:before {
  content: "";
  position: absolute;
  border: 10px dashed #FF0000;
  top: -8px;
  bottom: -8px;
  left: -8px;
  right: -8px;
}

div.odd:before {left:0;right:0;border-radius:60px}

div {
  overflow: hidden;
  position: relative;


  text-align:center;
  padding:10px;
  margin-bottom:20px;
}

<div class="two">Kupo nuts here</div>
<div class="five">Kupo nuts<br/>here</div>
<div class="ten">Kupo<br/>nuts<br/>here</div>
<div class="ten odd">Kupo<br/>nuts<br/>here</div>

বড় গোলাকার কোণগুলির সাথে ছোট উপাদানগুলিতে প্রয়োগ করা কিছু মজাদার প্রভাব তৈরি করতে পারে।

Comments

শক্ত কাজ! এই উত্তরগুলির মধ্যে এটিই কেবলমাত্র আইএমও বজায় রাখা ভয়ানক না হয়ে সত্যই কাজ করে। এমনকি গৃহীত উত্তরটি কেবল ডিভের এক প্রান্তের জন্য কাজ করে। এটি পুরো সীমান্তের জন্য কাজ করে।

— রায়ান শিলিংটন

এটি এখন পর্যন্ত সেরা এবং সবচেয়ে মার্জিত উত্তর। সমাধান হিসাবে চিহ্নিত করা উচিত ...

— Beejee

Answer 5

সুতরাং দেওয়া উত্তরের সাথে শুরু করে CSS3 একাধিক সেটিংসের অনুমতি দেয় এই সত্যটি প্রয়োগ করে - নীচের কোডটি একটি সম্পূর্ণ বাক্স তৈরির জন্য দরকারী:

#border {
  width: 200px;
  height: 100px;
  background: yellow;
  text-align: center;
  line-height: 100px;
  background: linear-gradient(to right, orange 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(blue 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(to right, green 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(red 50%, rgba(255, 255, 255, 0) 0%);
  background-position: top, right, bottom, left;
  background-repeat: repeat-x, repeat-y;
  background-size: 10px 1px, 1px 10px;
}

<div id="border">
  bordered area
</div>

এটি লক্ষণীয় যে ব্যাকগ্রাউন্ড আকারের 10px এমন অঞ্চল দেয় যা ড্যাশ এবং ফাঁকটি coverেকে দেবে। পটভূমি ট্যাগের 50% হ'ল ড্যাশটি আসলে কত প্রশস্ত। সুতরাং প্রতিটি সীমান্তে বিভিন্ন দৈর্ঘ্যের ড্যাশ থাকা সম্ভব।

Answer 6

এর জন্য উপলভ্য মানগুলির জন্য MDN ডক্স দেখুন border-style:

• কোনটি নয়: কোনও সীমানা নয়, প্রস্থকে ০. সেট করে এটি ডিফল্ট মান।
• লুকানো: সারণী উপাদানগুলির জন্য সীমান্ত বিরোধের সমাধানের ক্ষেত্রে ব্যতীত 'কিছুই নয়' হিসাবে একই।
• ড্যাশড: শর্ট ড্যাশ বা লাইন বিভাগগুলির সিরিজ।
• বিন্দুযুক্ত: বিন্দুগুলির সিরিজ
• ডাবল: দুটি সরল রেখা যা পিক্সেল পরিমাণ সীমানা-প্রস্থ হিসাবে সংজ্ঞায়িত করে add
• খাঁজ: খোদাই প্রভাব।
• ইনসেট: বাক্সটি এম্বেড হওয়া উপস্থিত করে।
• সূচনা: 'ইনসেট' এর বিপরীতে। বাক্সটিকে 3 ডি প্রদর্শিত হবে (এমবসড)।
• রিজ: 'খাঁজ' এর বিপরীতে। সীমানাটি 3 ডি প্রদর্শিত হবে (বেরিয়ে আসছে)।
• solid: একা, সোজা, শক্ত লাইন।

এই পছন্দগুলি ছাড়াও, স্ট্যান্ডার্ড সীমানার শৈলীতে প্রভাবিত করার কোনও উপায় নেই।

যদি সম্ভাবনাগুলি আপনার পছন্দ মতো না হয় তবে আপনি সিএসএস 3 ব্যবহার করতে পারেন border-imageতবে নোট করুন যে এর জন্য ব্রাউজার সমর্থনটি এখনও খুব স্পষ্ট ty

Comments

ধন্যবাদ পেক্কা, এর অর্থ আমি সীমান্তের সম্পত্তি ব্যবহার করতে পারি না ... সুতরাং এর জন্য আমাকে চিত্রটি ব্যবহার করতে হবে।

— কালী চরণ রাজপুত

@ কেসি যদি সীমান্ত শৈলীর কোনওটি আপনার পছন্দ অনুসারে না হয় তবে হ্যাঁ।

— পেক্কা

Answer 7

শর্টহ্যান্ড সিনট্যাক্স সহ @ ইগোরাজোজের উত্তরের ভিত্তিতে 4 প্রান্তের সমাধান তৈরি করা:

background: linear-gradient(to right, #000 33%, #fff 0%) top/10px 1px repeat-x, /* top */
linear-gradient(#000 33%, #fff 0%) right/1px 10px repeat-y, /* right */
linear-gradient(to right, #000 33%, #fff 0%) bottom/10px 1px repeat-x, /* bottom */
linear-gradient(#000 33%, #fff 0%) left/1px 10px repeat-y; /* left */

#page {
    background: linear-gradient(to right, #000 33%, #fff 0%) top/10px 1px repeat-x, /* top */
    linear-gradient(#000 33%, #fff 0%) right/1px 10px repeat-y, /* right */
    linear-gradient(to right, #000 33%, #fff 0%) bottom/10px 1px repeat-x, /* bottom */
    linear-gradient(#000 33%, #fff 0%) left/1px 10px repeat-y; /* left */
    
    width: 100px;
    height: 100px;
}

<div id="page"></div>

Answer 8

এটি একটি পুরানো, তবে এখনও খুব প্রাসঙ্গিক বিষয়। বর্তমান শীর্ষ উত্তর ভাল, কিন্তু শুধুমাত্র খুব ছোট বিন্দু জন্য কাজ করে। ভোজেন্দ্র রুনিয়র যেমন মন্তব্যগুলিতে ইতিমধ্যে উল্লেখ করেছেন, বৃহত্তর (> 2 পিএক্স) বিন্দুর জন্য, বিন্দুগুলি বৃত্তাকার নয়, বৃত্তাকার দেখাচ্ছে। আমি এই পৃষ্ঠাটি ফাঁকা স্কোয়ারগুলি নয়, ব্যবধানযুক্ত বিন্দুগুলির জন্য অনুসন্ধান করেছি (বা কিছু উত্তর এখানে ব্যবহার হিসাবে ড্যাশ এমনকি)।

এই উপর বিল্ডিং, আমি ব্যবহার radial-gradient। এছাড়াও, ইউকুসার 32 এর উত্তরটি ব্যবহার করে , বিন্দু-বৈশিষ্ট্যগুলি সহজেই চারটি সীমানার জন্য পুনরাবৃত্তি করা যায়। কেবল কোণগুলি নিখুঁত নয়।

div {
    padding: 1em;
    background-image:
        radial-gradient(circle at 2.5px, #000 1.25px, rgba(255,255,255,0) 2.5px),
        radial-gradient(circle, #000 1.25px, rgba(255,255,255,0) 2.5px),
        radial-gradient(circle at 2.5px, #000 1.25px, rgba(255,255,255,0) 2.5px),
        radial-gradient(circle, #000 1.25px, rgba(255,255,255,0) 2.5px);
    background-position: top, right, bottom, left;
    background-size: 15px 5px, 5px 15px;
    background-repeat: repeat-x, repeat-y;
}

<div>Some content with round, spaced dots as border</div>

radial-gradient আশা :

• আকৃতি এবং alচ্ছিক অবস্থান
• দুই বা ততোধিক স্টপ: একটি রঙ এবং ব্যাসার্ধ

এখানে, আমি একটি 5 পিক্সেল ব্যাস (2.5px ব্যাসার্ধ) বিন্দু চেয়েছিলাম, বিন্দুগুলির মধ্যে 2 গুণ ব্যাস (10px) সহ, 15px পর্যন্ত যুক্ত করেছি। এর background-sizeসাথে মিল থাকা উচিত।

দুটি স্টপকে এমন সংজ্ঞায়িত করা হয়েছে যে বিন্দুটি সুন্দর এবং মসৃণ: অর্ধ ব্যাসার্ধের জন্য এবং সম্পূর্ণ ব্যাসার্ধের গ্রেডিয়েন্টের চেয়ে শক্ত কালো।

Answer 9

এটি একটি সত্যই পুরানো প্রশ্ন তবে এটি গুগলে একটি উচ্চ র‌্যাঙ্কিং রয়েছে তাই আমি আমার পদ্ধতিটি ফেলে যাচ্ছি যা আপনার প্রয়োজনের উপর নির্ভর করে কাজ করতে পারে।

আমার ক্ষেত্রে, আমি একটি ঘন ড্যাশযুক্ত সীমানা চাইছিলাম যার ড্যাশগুলির মধ্যে খুব কম বিরতি ছিল। 1px লম্বা প্যাটার্ন দ্বারা 10px প্রশস্ত তৈরি করতে আমি একটি CSS প্যাটার্ন জেনারেটর ব্যবহার করেছি (যেমন: http://www.patternify.com/ )। এর 9px শক্ত ড্যাশ রঙ, 1px সাদা।

আমার সিএসএসে, আমি সেই প্যাটার্নটিকে ব্যাকগ্রাউন্ড চিত্র হিসাবে অন্তর্ভুক্ত করেছি এবং তারপরে পটভূমির আকারের বৈশিষ্ট্যটি ব্যবহার করে এটি ছোট করে তুলেছি। আমি 20px দ্বারা 2px পুনরাবৃত্তি ড্যাশ দিয়ে শেষ করেছি, 18px এর শক্ত লাইন এবং 2px সাদা। সত্যই ঘন ড্যাশযুক্ত লাইনের জন্য আপনি এটিকে আরও স্কেল করতে পারেন।

চমত্কার বিষয়টি হ'ল চিত্রটি ডেটা হিসাবে এনকোড করা রয়েছে কারণ আপনার বাইরে অতিরিক্ত এইচটিটিপি অনুরোধ নেই, সুতরাং কোনও কার্য সম্পাদনের ভার নেই। আমি আমার চিত্রটি একটি SASS ভেরিয়েবল হিসাবে সংরক্ষণ করেছি যাতে আমি এটি আমার সাইটে পুনরায় ব্যবহার করতে পারি।

Answer 10

সংক্ষিপ্ত উত্তর: আপনি পারবেন না।

আপনাকে border-imageসম্পত্তি এবং কয়েকটি চিত্র ব্যবহার করতে হবে ।

Answer 11

এত লোককে বলা হয় "আপনি পারবেন না"। হ্যা, তুমি পারো. এটি সত্য যে ড্যাশগুলির মধ্যে জলের স্থান নিয়ন্ত্রণ করার জন্য কোনও সিএসএস বিধি নেই তবে CSS এর অন্যান্য ক্ষমতা রয়েছে। এত তাড়াহুড়া করবেন না যে কোনও কাজ করা যায় না।

.hr {
    border-top: 5px dashed #CFCBCC;
    margin: 30px 0;
    position: relative;
}

.hr:before {
    background-color: #FFFFFF;
    content: "";
    height: 10px;
    position: absolute;
    top: -2px;
    width: 100%;
}

.hr:after {
    background-color: #FFFFFF;
    content: "";
    height: 10px;
    position: absolute;
    top: -13px;
    width: 100%;
}

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

Comments

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

— অ্যালেক্স

Answer 12

আমি একটি এসভিজি দিয়ে বিন্দু তৈরি করতে একটি জাভাস্ক্রিপ্ট ফাংশন করেছি। আপনি জাভাস্ক্রিপ্ট কোডে ডট স্পেসিং এবং আকার সামঞ্জস্য করতে পারেন।

var make_dotted_borders = function() {
    // EDIT THESE SETTINGS:
    
    var spacing = 8;
    var dot_width = 2;
    var dot_height = 2;
    
    //---------------------

    var dotteds = document.getElementsByClassName("dotted");
    for (var i = 0; i < dotteds.length; i++) {
        var width = dotteds[i].clientWidth + 1.5;
        var height = dotteds[i].clientHeight;

        var horizontal_count = Math.floor(width / spacing);
        var h_spacing_percent = 100 / horizontal_count;
        var h_subtraction_percent = ((dot_width / 2) / width) * 100;

        var vertical_count = Math.floor(height / spacing);
        var v_spacing_percent = 100 / vertical_count;
        var v_subtraction_percent = ((dot_height / 2) / height) * 100;

        var dot_container = document.createElement("div");
        dot_container.classList.add("dot_container");
        dot_container.style.display = getComputedStyle(dotteds[i], null).display;

        var clone = dotteds[i].cloneNode(true);

        dotteds[i].parentElement.replaceChild(dot_container, dotteds[i]);
        dot_container.appendChild(clone);

        for (var x = 0; x < horizontal_count; x++) {
            // The Top Dots
            var dot = document.createElement("div");
            dot.classList.add("dot");
            dot.style.width = dot_width + "px";
            dot.style.height = dot_height + "px";

            var left_percent = (h_spacing_percent * x) - h_subtraction_percent;
            dot.style.left = left_percent + "%";
            dot.style.top = (-dot_height / 2) + "px";
            dot_container.appendChild(dot);

            // The Bottom Dots
            var dot = document.createElement("div");
            dot.classList.add("dot");
            dot.style.width = dot_width + "px";
            dot.style.height = dot_height + "px";

            dot.style.left = (h_spacing_percent * x) - h_subtraction_percent + "%";
            dot.style.top = height - (dot_height / 2) + "px";
            dot_container.appendChild(dot);
        }

        for (var y = 1; y < vertical_count; y++) {
            // The Left Dots:
            var dot = document.createElement("div");
            dot.classList.add("dot");
            dot.style.width = dot_width + "px";
            dot.style.height = dot_height + "px";

            dot.style.left = (-dot_width / 2) + "px";
            dot.style.top = (v_spacing_percent * y) - v_subtraction_percent + "%";
            dot_container.appendChild(dot);
        }
        for (var y = 0; y < vertical_count + 1; y++) {
            // The Right Dots:
            var dot = document.createElement("div");
            dot.classList.add("dot");
            dot.style.width = dot_width + "px";
            dot.style.height = dot_height + "px";

            dot.style.left = width - (dot_width / 2) + "px";
            if (y < vertical_count) {
                dot.style.top = (v_spacing_percent * y) - v_subtraction_percent + "%";
            }
            else {
                dot.style.top = height - (dot_height / 2) + "px";
            }

            dot_container.appendChild(dot);
        }
    }
}

make_dotted_borders();

div.dotted {
    display: inline-block;
    padding: 0.5em;
}

div.dot_container {
    position: relative;
    margin-left: 0.25em;
    margin-right: 0.25em;
}

div.dot {
    position: absolute;
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="100" width="100"><circle cx="50" cy="50" r="50" fill="black" /></svg>');
}

<div class="dotted">Lorem Ipsum</div>

Answer 13

যদি আপনি কেবলমাত্র আধুনিক ব্রাউজারগুলিই টার্গেট করছেন, এবং আপনার সামগ্রী থেকে আপনার আলাদা সীমানায় সীমানা থাকতে পারে, তবে আপনি বৃহত্তর ডট বা ড্যাশ পেতে সিএসএস স্কেল রূপান্তর ব্যবহার করতে পারেন:

border: 1px dashed black;
border-radius: 10px;
-webkit-transform: scale(8);
transform: scale(8);

এটি লাইন পেতে পেতে অনেকগুলি অবস্থানিক টুইট করা লাগে, তবে এটি কার্যকর হয়। সীমানার পুরুত্ব, প্রারম্ভিক আকার এবং স্কেল ফ্যাক্টর পরিবর্তন করে আপনি চান প্রায় বেধ দৈর্ঘ্যের অনুপাত। কেবলমাত্র যে জিনিসটি আপনি স্পর্শ করতে পারবেন না তা হ'ল ড্যাশ-টু-গ্যাপ রেশিও।

Comments

এটি করার মাধ্যমে সামগ্রীটি প্রয়োগ করা হবেscale(8)

— পারদীপ জৈন

সীমানা: 1px কালো ড্যাশযুক্ত; ক্রোম ব্রাউজারে অজানা সম্পত্তি হিসাবে বিবেচিত হয়।

— ইনজাম্মাম উল হাসান

Answer 14

<div style="width: 100%; height: 100vh; max-height: 20px; max-width: 100%; background: url('https://kajabi-storefronts-production.global.ssl.fastly.net/kajabi-storefronts-production/themes/853636/settings_images/Ei2yf3t7TvyRpFaLQZiX_dot.jpg') #000; background-repeat: repeat;">&nbsp;</div>

আমি এটিই করেছি - এখানে একটি চিত্র প্রবেশ করান চিত্র ব্যবহার করুন

Answer 15

আফাইক এটি করার কোনও উপায় নেই। আপনি একটি ড্যাশযুক্ত সীমানা ব্যবহার করতে পারেন বা সম্ভবত সীমানার প্রস্থকে কিছুটা বাড়িয়ে তুলতে পারেন, তবে সিএসএসের সাহায্যে আরও বেশি দুরের বিন্দু পাওয়া অসম্ভব।

Answer 16

আপনি একটি ক্যানভাস তৈরি করতে পারেন (জাভাস্ক্রিপ্ট মাধ্যমে) এবং এর মধ্যে একটি বিন্দু রেখা আঁকতে পারেন। ক্যানভাসের মধ্যে আপনি নিয়ন্ত্রণ করতে পারবেন ড্যাশ এবং এর মধ্যবর্তী স্থানটি কত দীর্ঘ হবে।

Comments

এটি একটি খুব সংশ্লেষযুক্ত সমাধান। পৃষ্ঠায় থাকা জেএসের বাকী ওজনের উপর নির্ভর করে পারফরম্যান্সে এবং অনুমিত লোডের সময়কালে এটি সামান্য কিছুটা বেশি খরচ করতে পারে বলেও আমি সাহায্য করতে পারি না feel

— এমমেট আর।