Mengapa Sempadan Telus Mengherotkan Latar Belakang Kecerunan dalam CSS?

Herohan Sempadan Telus dengan Latar Belakang Kecerunan

Dalam CSS, menggunakan sempadan lutsinar pada elemen dengan latar belakang kecerunan linear boleh menyebabkan perkara yang luar biasa kesan apabila tepi kiri dan kanan unsur mempamerkan warna herot atau diratakan.

Ini berlaku kerana titik permulaan dan penamat kecerunan berada di tepi kotak padding, manakala sempadan ditunjukkan di luarnya. Akibatnya, sempadan kelihatan herot secara visual apabila latar belakang diulang pada kedua-dua belah kotak padding untuk mengisi kotak sempadan.

Punca Herotan

Punca herotan sebab herotan ini terletak pada cara pelayar mentafsir model kotak CSS. Kotak padding menentukan kawasan di mana kandungan elemen diletakkan, manakala kotak sempadan merangkumi kotak padding dan sempadan. Dalam senario yang diberikan, latar belakang kecerunan terkandung dalam kotak padding, tetapi sempadan lutsinar melangkaui sempadannya.

Penyelesaian

Untuk menyelesaikan isu ini, satu boleh menggunakan sifat CSS yang dikenali sebagai "box-shadow: inset." Tidak seperti jidar, bayang kotak inset dipaparkan dalam kotak padding, memberikan kesan visual yang serupa dengan jidar tanpa menyebabkan herotan.

Dengan menggantikan jidar dengan sifat bayang kotak berikut, penampilan yang diingini boleh dicapai:

box-shadow: inset 0 0 0 10px rgba(0,0,0,0.2);

Tambahan pula, memandangkan bayangan kotak tidak menempati ruang seperti sempadan, ia perlu meningkatkan padding sewajarnya.

Ilustrasi

Rajah berikut menggambarkan perbezaan antara kotak padding dan kotak sempadan:

[Imej kotak padding dan border-box]

Demonstrasi

Demonstrasi interaktif penyelesaian boleh didapati di: http://jsfiddle.net/ilpo/fzndodgx/5/

Atas ialah kandungan terperinci Mengapa Sempadan Telus Mengherotkan Latar Belakang Kecerunan dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!