किसी बॉक्स को आकार / आंशिक सीमा घोषित करने का कोई तरीका?

Question 1

सीएसएस में एक बॉक्स को आकार / आंशिक सीमा घोषित करने का कोई तरीका? उदाहरण के लिए एक बॉक्स जिसके साथ 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>

स्निपेट का विस्तार करें

... जैसा कि davidmatas ने टिप्पणी की, का उपयोग 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

CSS आंशिक सीमाओं का समर्थन नहीं करता है। इसे अनुकरण करने के लिए आपको आसन्न तत्व का उपयोग करना होगा।