কোনও বাক্সে কোনও আকার / আংশিক সীমানা ঘোষণার উপায়?

Question 1

CSS এর কোনও বাক্সে কোনও আকার / আংশিক সীমানা ঘোষণার কোনও উপায়? উদাহরণস্বরূপ 350pxযে বাক্সটি কেবল তার প্রথম অংশে একটি সীমানা নীচে দেখায় 60px। আমি মনে করি এটি খুব কার্যকর হতে পারে।

উদাহরণ:

এখানে চিত্র বর্ণনা লিখুন

Question 2

আসলে তা না. তবে এমনভাবে প্রভাবটি অর্জন করা খুব সহজ যা কোনওভাবে নিখুঁতভাবে হ্রাস পায় এবং অতিরিক্ত অতিরিক্ত মার্কআপের প্রয়োজন নেই:

div {
  width: 350px;
  height: 100px;
  background: lightgray;
  position: relative;
  margin: 20px;
}

div:after {
  content: '';
  width: 60px;
  height: 4px;
  background: gray;
  position: absolute;
  bottom: -4px;
}

<div></div>

স্নিপেট প্রসারিত করুন

Question 3

আমি জানি, এটি ইতিমধ্যে সমাধান হয়েছে এবং পিক্সেলগুলির জন্য অনুরোধ করা হয়েছিল। তবে আমি কেবল কিছু ভাগ করে নিতে চাই ...

আংশিকভাবে আন্ডারলাইন করা টেক্সট উপাদানগুলি ব্যবহার করে display:tableবা সহজেই অর্জন করা যায়display:inline-block

^{(আমি কেবল ব্যবহার করি না display:inline-blockকারণ, হ্যাঁ আপনি জানেন, বিশ্রী- 4pxগ্যাপ)।}

পাঠ্য উপাদানসমূহ

h1 {
  border-bottom: 1px solid #f00;
  display: table;
}

<h1>Foo is not equal to bar</h1>

স্নিপেট প্রসারিত করুন

কেন্দ্রীকরণ , এর display:tableসাথে উপাদানটিকে কেন্দ্র করে রাখা অসম্ভব করে তোলে text-align:center।
এর সাথে কাজ করা যাক margin:auto...

h1 {
  border-bottom: 1px solid #f00;
  display: table;
  margin-left: auto;
  margin-right: auto;
}

<h1>Foo is not equal to bar</h1>

স্নিপেট প্রসারিত করুন

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

h1 {
  display: table;
  margin-left: auto;
  margin-right: auto;
}

h1:after {
  border-bottom: 1px solid #f00;
  content: '';
  display: block;
  width: 50%;
}

<h1>Foo is not equal to bar</h1>

স্নিপেট প্রসারিত করুন

অফসেট , আন্ডারলাইনটি এখনই সারিবদ্ধ করা হয়েছে। এটি কেন্দ্র করতে, কেবলমাত্র সিউডো-এলিমেন্টটি এর width( 50% / 2 = 25%) এর অর্ধেকটি ডানদিকে চাপুন ।

h1 {
  display: table;
  margin-left: auto;
  margin-right: auto;
}

h1:after {
  border-bottom: 1px solid #f00;
  content: '';
  display: block;
  margin-left: 25%;
  width: 50%;
}

<h1>Foo is not equal to bar</h1>

স্নিপেট প্রসারিত করুন

... যেমন ডেভিডম্যাটাস মন্তব্য করেছেন, হাত margin:autoদিয়ে marginঅফসেট গণনা করার চেয়ে কখনও কখনও ব্যবহার করা আরও ব্যবহারিক হয়।

সুতরাং, আমরা widthএই সমন্বয়গুলির মধ্যে একটি ব্যবহার করে বাম, ডান বা কেন্দ্রে (বর্তমানটি না জেনে ) আন্ডারলাইনটি সারিবদ্ধ করতে পারি :

বাম : margin-right: auto _{(বা কেবল এটি ছেড়ে দিন)}
মধ্যম :margin: auto
ডান :margin-left: auto

পুরো উদাহরণ

.underline {
  display: table;
  margin-left: auto;
  margin-right: auto;
}

.underline:after {
  border-bottom: 1px solid #f00;
  content: '';
  display: block;
  width: 50%;
}

.underline--left:after {
  margin-right: auto; /* ...or just leave it off */
}

.underline--center:after {
  margin-left: auto;
  margin-right: auto;
}

.underline--right:after {
  margin-left: auto
}

<h1 class="underline underline--left">Foo is not equal to bar</h1>
<h1 class="underline underline--center">Foo is not equal to bar</h1>
<h1 class="underline underline--right">Foo is not equal to bar</h1>

স্নিপেট প্রসারিত করুন

ব্লক-স্তর উপাদানসমূহ

এটি সহজেই গ্রহণ করা যেতে পারে, যাতে আমরা ব্লক-স্তরের উপাদান ব্যবহার করতে পারি। কৌশলটি হ'ল ছদ্ম-উপাদানগুলির উচ্চতাটিকে তার আসল উপাদানের (সহজভাবে height:100%) হিসাবে একই উচ্চতায় সেট করা :

div {
  background-color: #eee;
  display: table;
  height: 100px;
  width: 350px;
}
div:after {
  border-bottom: 3px solid #666;
  content: '';
  display: block;
  height: 100%;
  width: 60px;
}

<div></div>

স্নিপেট প্রসারিত করুন

Question 4

এখানে আরও একটি সমাধান যা linear-gradientআপনি চান যে কোনও ধরণের লাইন সহজেই তৈরি করতে পারেন তার উপর নির্ভর করে । একাধিক পটভূমি ব্যবহার করে আপনার একাধিক লাইনও থাকতে পারে (উদাহরণস্বরূপ প্রতিটি দিকে):

কোড স্নিপেট দেখান

.box1 {
  width: 200px;
  padding: 20px;
  margin: 10px auto;
  text-align: center;
  background: 
    linear-gradient(to right, transparent 20%, #000 20%, #000 40%, transparent 40%) 0 100% / 100% 3px no-repeat, 
    #ccc
}

.box2 {
  width: 200px;
  padding: 20px;
  margin: 10px auto;
  text-align: center;
  background: 
    linear-gradient(to right, transparent 20%, red 20%, red 80%, transparent 80%) 0 100% / 100% 2px no-repeat, 
    #ccc
}

.box3{
  width: 200px;
  padding: 20px;
  margin: 10px auto;
  text-align: center;
  background: 
    linear-gradient(to right, transparent 20%, red 20%, red 80%, transparent 80%) 0 100% / 100% 2px no-repeat,
    linear-gradient(to right, transparent 30%, blue 30%, blue 70%, transparent 70%) 0 0 / 100% 2px no-repeat,
    linear-gradient(to bottom, transparent 30%, brown 30%, brown 70%, transparent 70%) 0 0 / 3px 100% no-repeat,
    linear-gradient(to bottom, transparent 20%, orange 20%, orange 70%, transparent 70%) 100% 0 / 3px 100% no-repeat,
  #ccc
}

<div class="box1">
  Box1
</div>
<div class="box2">
  Box2
</div>
<div class="box3">
  Box3
</div>

স্নিপেট প্রসারিত করুন

উপরের মতটি অর্জনের জন্য এখানে আরও একটি বাক্য গঠন রয়েছে:

.box1 {
  width: 200px;
  padding: 20px;
  margin: 10px auto;
  text-align: center;
  background: 
   linear-gradient(#000, #000) top /40% 3px no-repeat, 
   #ccc
}

.box2 {
  width: 200px;
  padding: 20px;
  margin: 10px auto;
  text-align: center;
  background: 
    linear-gradient(red,red) bottom/ 60% 2px no-repeat, 
    #ccc;
}

.box3{
  width: 200px;
  padding: 20px;
  margin: 10px auto;
  text-align: center;
  background: 
   linear-gradient(red , red)bottom left/ 60% 2px,
   linear-gradient(blue, blue) 60% 0 / 40% 2px,
   linear-gradient(brown, brown) left/ 3px 30%,
   linear-gradient(orange, orange) right / 3px 40%,
   #ccc;
  background-repeat:no-repeat;
}

<div class="box1">
  Box1
</div>
<div class="box2">
  Box2
</div>
<div class="box3">
  Box3
</div>

স্নিপেট প্রসারিত করুন

Question 5

কিছু সীমানা আঁকতে আমি গ্রিড ব্যবহার করেছি।

এখানে দেখুন ।

কোড:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Responsive partial borders</title>
    <style>
        /* ungrid without mobile */
        .row{width:100%;display:table;table-layout:fixed;}
        .col{display:table-cell;}

        /* things to change */
        .row{width: 70%; margin: auto;}
        .mid.row > .col{ height: 150px; }

        /* draw box and align text */
        .col{ text-align: center;}
        .top.left.col{
            border-top: 1px solid black;
            border-left: 1px solid black;
        }
        .top.right.col{
            border-top: 1px solid black;
            border-right: 1px solid black;
        }
        .bottom.left.col{
            border-bottom: 1px solid black;
            border-left: 1px solid black;
        }
        .bottom.right.col{
            border-bottom: 1px solid black;
            border-right: 1px solid black;
        }
        .mid.row > .col{
            border-left: 1px solid black;
            border-right: 1px solid black;
            vertical-align: middle;
        }
        .top.center.col{
            position: relative;
            top: -0.5em;
        }
        .bottom.center.col{
            position: relative;
            bottom: -0.5em;
        }
    </style>
</head>
<body>

    <div class="row">
        <div class="top left col"></div>
        <div class="top center col">Top</div>
        <div class="top right col"></div>
    </div>
    <div class="mid row">
        <div class="col">Mid</div>
    </div>
    <div class="row">
        <div class="bottom left col"></div>
        <div class="bottom center col">Bottom</div>
        <div class="bottom right col"></div>
    </div>  

</body>
</html>

Question 6

সিএসএস আংশিক সীমানা সমর্থন করে না। এটি অনুকরণ করার জন্য আপনাকে একটি সংলগ্ন উপাদান ব্যবহার করতে হবে।