Rumah > hujung hadapan web > tutorial css > Bagaimana untuk menambah dua sempadan pada imej dalam css

Bagaimana untuk menambah dua sempadan pada imej dalam css

醉折花枝作酒筹
Lepaskan: 2023-01-07 11:45:27
asal
3201 orang telah melayarinya

Dalam CSS, anda boleh menggunakan padding untuk menambah sempadan kedua Anda hanya perlu menambah "sempadan: warna pepejal saiz jidar; padding: saiz piksel;" pada elemen gambar. Anda boleh menganggap teg img sebagai bekas yang boleh memuatkan imej dan anda boleh menetapkan padding untuknya.

Bagaimana untuk menambah dua sempadan pada imej dalam css

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Menambah sempadan dua pada imej mempunyai banyak aplikasi dalam penggunaan sebenar, tetapi ia mungkin tidak kerap. Berikut ialah pengenalan ringkas tentang cara mencapai kesan ini, supaya menjadi mahir dalam aplikasi beberapa sifat CSS. Mari lihat contoh kod dahulu:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>document</title>
<style type="text/css">
img{
  border:5px solid #696;
  padding:5px;
  background-color:#CCC;
}
</style>
</head>
<body>
<img src="mytest/demo/dborder.jpg"/>
</body>
</html>
Salin selepas log masuk

Kod di atas mencapai kesan ini dengan menetapkan sempadan dan padding teg Khususnya, ramai pemula sering berfikir bahawa adalah kandungan yang serupa dengan teks. Sebenarnya, ia tidak boleh dianggap sebagai bekas yang boleh memuatkan gambar (mungkin walaupun ia tidak cukup tepat). sempadan dalam boleh ditetapkan untuknya.

Pembelajaran yang disyorkan: tutorial video css

Atas ialah kandungan terperinci Bagaimana untuk menambah dua sempadan pada imej dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
css
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan