Menyelesaikan limpahan latar belakang dengan radii sempadan yang diwarisi

Ciri CSS yang menarik (tetapi menjengkelkan) ialah latar belakang elemen kanak -kanak boleh melimpah sempadan bulat elemen induk. Sebagai contoh, kad yang mengandungi elemen dalaman, jika elemen dalaman ditetapkan, latar belakangnya boleh melimpah sempadan kad.

Biasanya cara paling mudah untuk menyelesaikan masalah ini adalah untuk menambah atribut

ke elemen kad. Saya percaya ini adalah penyelesaian pertama yang kebanyakan orang berfikir apabila mereka menghadapi keadaan ini. overflow: hidden Walau bagaimanapun, melakukan ini mencipta masalah baru - kandungan di luar elemen kad dipotong - jadi mustahil untuk menggunakan margin negatif atau

untuk memindahkan kandungan elemen kanak -kanak keluar dari kad.

position: absolute Terdapat cara yang sedikit rumit tetapi lebih berkesan untuk mengelakkan latar belakang elemen kanak -kanak daripada melimpah sempadan elemen induk, yang akan menambah sempadan bulat yang sama kepada elemen kanak -kanak.

Cara paling mudah adalah untuk membolehkan elemen kanak -kanak mewarisi sempadan bulat elemen induk:

Jika singkatan

.child {
  border-radius: inherit;
}

terlalu lama, anda masih boleh mewarisi radius sudut bulat dari empat sudut mengikut keadaan:

border-radius

atau, bagi mereka yang bersedia menggunakan sifat logik, di sini adalah kod yang setara. (Untuk pemahaman yang lebih mudah mengenai sifat -sifat logik, ganti

.child {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}

dan

dengan top dan left dan start dengan bottom.) right end

Mengapa tidak memohon latar belakang secara langsung pada kad?

.child {
  border-start-start-radius: inherit;
  border-start-end-radius: inherit;
  border-end-start-radius: inherit;
  border-end-end-radius: inherit;
}

Jika elemen

sendiri mengandungi

dan menetapkan latar belakang secara langsung, kesan yang sama dapat dicapai. Jadi, mengapa tidak melakukan ini? .card border-radius Nah, kadang -kadang anda tidak boleh melakukannya. Sebagai contoh, apabila elemen

anda dibahagikan kepada dua bahagian, dengan hanya sebahagian daripadanya berwarna.

.card Mengapa kita harus melakukan ini?

Standby mungkin sebab terbaik. Sekurang -kurangnya, anda tahu anda tidak akan membuat masalah kemudian apabila menggunakan skim pelarasan radius bulat.

Mod ini amat berguna apabila kedudukan penunggang CSS disokong sepenuhnya. Saya menjangkakan ini tidak lama lagi akan menjadi norma untuk kedudukan pop timbul dalam 1-2 tahun.

iaitu, untuk pop timbul, saya lebih suka memindahkan kandungan pop timbul dari aliran dokumen dan memasukkannya ke dalam elemen

sebagai elemen kanak-kanak langsung. Dengan melakukan ini, saya boleh menghalang

daripada mengeluarkan mana -mana popup apabila menggunakan kedudukan sauh.

Atas ialah kandungan terperinci Menyelesaikan limpahan latar belakang dengan radii sempadan yang diwarisi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!