Adakah cara untuk mendeklarasikan ukuran / batas parsial ke kotak?

101

Adakah cara untuk mendeklarasikan ukuran / batas parsial ke kotak di CSS? Misalnya sebuah kotak dengan 350pxyang hanya memperlihatkan tepi-bawah pada awalnya 60px. Saya pikir itu mungkin sangat berguna.

Contoh:

masukkan deskripsi gambar di sini

css border

— davidmatas
sumber

152

Tidak juga. Tetapi sangat mudah untuk mencapai efek dengan cara yang terdegradasi dengan anggun dan tidak memerlukan markup yang berlebihan:

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>

Luaskan cuplikan

— rak buku
sumber

3

Tidak ada yang lebih menyenangkan jika diberi tanda sebagai jawaban yang benar tanpa memberi +1. Tapi saya memberi Anda +1! Ini adalah solusi sempurna untuk masalah saya. Terima kasih! edit Saya kira Anda bisa saja diberi +1 menjadi OP dan -1 oleh orang lain. Baiklah. Saya menghargai jawaban Anda, dan itu yang terpenting, benar ;-)

— CWSpear

7

Bagaimana Anda membuatnya berada di tengah, seperti dalam contoh keduanya?

— Cameron Martin

Saya harus menambahkan, ketika elemen induk adalah elemen blok sebaris dengan lebar fluida. Tentunya ketika lebar tetap itu mudah.

— Cameron Martin

4

Tidak masalah, saya mendapatkan efek yang saya inginkan - dabblet.com/gist/e5a78f2d4bf50b6be4d3 . Sayang sekali, ::outsidedan ::insideelemen semu belum tersedia, saya benci memberi markup hanya untuk gaya, tapi saya rasa tidak ada cara lain.

— Cameron Martin

Ini bekerja! Untuk menggunakannya dengan Bereaksi, Anda tidak dapat menggunakan contentdi :aftersebagai gaya inline atau JSS, tetapi bekerja dengan baik menggunakan komponen bergaya.

— Raphael Pinel

23

Saya tahu, ini sudah diselesaikan dan piksel diminta. Namun, saya hanya ingin berbagi sesuatu ...

Elemen teks yang digarisbawahi sebagian dapat dengan mudah dicapai dengan menggunakan display:tableataudisplay:inline-block

^{(Saya hanya tidak menggunakan display:inline-blockkarena, ya Anda tahu, 4pxcelah- canggung ).}

Elemen Tekstual

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

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

Luaskan cuplikan

Pemusatan , display:tabletidak memungkinkan untuk memusatkan elemen text-align:center.
Mari kita atasi dengan margin:auto...

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

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

Luaskan cuplikan

Yah , itu bagus, tapi tidak hanya sebagian .
Seperti rak buku yang sudah diperkenalkan, elemen semu bernilai emas.

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>

Luaskan cuplikan

Offset , sekarang garis bawahnya rata kiri. Untuk memusatkannya, cukup dorong elemen semu setengah dari its width( 50% / 2 = 25%) ke kanan.

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>

Luaskan cuplikan

... sebagai davidmatas dikomentari , menggunakan margin:autoterkadang lebih praktis, daripada menghitung- marginoffset dengan tangan.

Jadi, kita bisa menyelaraskan garis bawah ke kiri, kanan atau tengah (tanpa mengetahui arus width) dengan menggunakan salah satu kombinasi berikut:

Kiri :margin-right: auto _{(atau biarkan saja)}
Tengah :margin: auto
Kanan :margin-left: auto

Contoh lengkapnya

.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>

Luaskan cuplikan

Elemen Tingkat Blok

Ini dapat dengan mudah diadopsi, sehingga kita dapat menggunakan elemen level blok. Triknya adalah dengan mengatur ketinggian elemen semu ke ketinggian yang sama dengan elemen aslinya (sederhana 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>

Luaskan cuplikan

— yckart
sumber

2

Jawaban yang bagus. Untuk :aftersaya lebih suka margin: 0 autopendekatan daripada margin-left: 25%karena itu akan bekerja dengan lebar apa pun yang Anda nyatakan tanpa perlu melakukan matematika.

— davidmatas

1

@davidatas Poin yang bagus! Saya baru saja menggunakan cara-matematika untuk menjelaskan bagaimana memposisikannya secara manual dengan tangan. Dengan contoh ini siapa pun dapat memahami bagaimana menyelaraskannya ke kiri / tengah / kanan. Bagaimanapun, saya akan menambahkan auto- simplificator :)

— yckart

15

Berikut adalah solusi lain yang bergantung pada linear-gradienttempat Anda dapat dengan mudah membuat jenis garis apa pun yang Anda inginkan. Anda juga dapat memiliki beberapa baris (di setiap sisi misalnya) dengan menggunakan beberapa latar belakang:

Tampilkan cuplikan kode

.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>

Luaskan cuplikan

Berikut adalah sintaks lain untuk mencapai hal yang sama seperti di atas:

.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>

Luaskan cuplikan

— Temani Afif
sumber

1

Wow ... Saya telah bermain-main selama berjam-jam untuk menemukan cara agar hanya sudut kiri atas dan kanan atas kotak "tersirat" yang ditampilkan. : sebelum dan: setelah terlalu terbatas, itu mengacaukan pemosisian objek. Ini adalah solusi yang brilian!

— Wouter

Beberapa informasi latar belakang tentang mengapa dan bagaimana ini bekerja: webfx.com/blog/web-design/background-css-shorthand

— Wouter

2

Saya menggunakan kisi untuk menggambar beberapa batas.

Lihat disini .

Kode:

<!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>

— situs
sumber

@ SverriM.Olsen karena orang tersebut mengedit kode, komentarnya sudah usang

— Sagar V

0

CSS tidak mendukung batas parsial. Anda perlu menggunakan elemen yang berdekatan untuk mensimulasikan ini.

— Diodeus - James MacFarlane
sumber

Atau pseudo-element, yang dapat Anda lakukan sepenuhnya dengan CSS dan tidak menambahkan markup apa pun, seperti yang diilustrasikan oleh jawaban di atas

— OG Sean