Satu helah untuk mengajar anda cara menggunakan HTML untuk menambah kesan sempadan pada imej (penjelasan kod terperinci)-html tutorial-php.cn

Satu helah untuk mengajar anda cara menggunakan HTML untuk menambah kesan sempadan pada imej (penjelasan kod terperinci)

奋力向前

Lepaskan： 2021-08-19 19:11:52

asal

21157 orang telah melayarinya

Dalam artikel sebelumnya "Ajar anda langkah demi langkah cara menggunakan CSS untuk mencipta kesan butang bulat (penjelasan kod terperinci) ", saya memperkenalkan anda cara menggunakan CSS untuk membuat bulat kesan butang. Artikel berikut akan memperkenalkan kepada anda cara menggunakan html untuk menambah kesan sempadan pada gambar Mari kita lihat cara melakukannya

Satu helah untuk mengajar anda cara menggunakan HTML untuk menambah kesan sempadan pada imej (penjelasan kod terperinci)

Cara menambah kesan sempadan. kepada gambar

1 Buka perisian kod HTML, buat kod, dan terdapat dua cara untuk menambah kesan imej

Satu kaedah: tambah strok pada imej atau tambah sempadan pada kotak luar.

Kaedah kedua: terus tambah teg imej img.

Pilih satu daripada dua, saya guna cara kedua.

Contoh kod

<style>
<div>{
 margin-top:50px;
 margin-left: 100px: 
}
</style>
</head>
<body>
<div>
<img  src="787.jpg" alt="Satu helah untuk mengajar anda cara menggunakan HTML untuk menambah kesan sempadan pada imej (penjelasan kod terperinci)" >
</div>

Salin selepas log masuk

Kesan kod

Satu helah untuk mengajar anda cara menggunakan HTML untuk menambah kesan sempadan pada imej (penjelasan kod terperinci)

Kesan kod ialah keluar , mendapati tiada sempadan.

2. Tambahkan tetapan sempadan pada gambar, gaya: gaya sempadan, gaya termasuk pepejal, putus-putus, dll. Warna ditetapkan mengikut warna sempadan dan ketebalan ditetapkan mengikut lebar sempadan.

Nota: Gaya sempadan, gaya sempadan, adalah penting, jika tidak, semua atribut lain akan menjadi tidak sah.

div img{
border-style: dashed;
border-width: 5px;
border-color: blue;

Salin selepas log masuk

Satu helah untuk mengajar anda cara menggunakan HTML untuk menambah kesan sempadan pada imej (penjelasan kod terperinci)

Selepas kod dilaksanakan, ia adalah warna jidar dan kini jidar terdiri daripada garis putus-putus

3 tiga atribut Gabungkan ia menjadi satu atribut, seperti border:dashed 5px blue kesannya masih sama, yang sangat mudah.

div img{
border:dashed 5px blue;
}

Salin selepas log masuk

Satu helah untuk mengajar anda cara menggunakan HTML untuk menambah kesan sempadan pada imej (penjelasan kod terperinci)

Kesan kod masih sama, kerana ketiga-tiga atribut digabungkan menjadi satu atribut Kemudian, kami hanya memilih untuk menambah kesan pada satu sisi imej itu.

4. Kiri: sempadan-kiri, kanan: sempadan-kanan, atas: sempadan-atas, bawah: sempadan-kiri Menurut tetapan ini, mana-mana bahagian boleh ditetapkan secara berasingan.

div img{
border:dashed 5px blue;
border-right:solid 10px blue; 
border-top: solid 10px blue;
    border-bottom: solid 10px blue;
    border-left:  solid 10px blue;
}

Salin selepas log masuk

Satu helah untuk mengajar anda cara menggunakan HTML untuk menambah kesan sempadan pada imej (penjelasan kod terperinci)

5. Kesan kod hampir dalam keadaan ini boleh dibesarkan? Kawal warna sempadan melalui atribut sempadan div, tetapkan lebar sempadan kepada 20px dan warna kepada biru

div img{
	border:dashed 5px blue;
	border-right:solid 20px blue; 
	border-top: solid 20px blue;
    border-bottom: solid 20px blue;
    border-left:  solid 20px blue

Salin selepas log masuk

Satu helah untuk mengajar anda cara menggunakan HTML untuk menambah kesan sempadan pada imej (penjelasan kod terperinci)

Kesan akhir.

Nota: Komposisi atribut singkatan sempadan

lebar sempadan: menentukan lebar sempadan; gaya sempadan: Tentukan gaya sempadan;
warna sempadan: Tentukan warna sempadan.
Pembelajaran yang disyorkan:
Tutorial video HTML

Atas ialah kandungan terperinci Satu helah untuk mengajar anda cara menggunakan HTML untuk menambah kesan sempadan pada imej (penjelasan kod terperinci). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!