Rumah >hujung hadapan web >html tutorial >Satu helah untuk mengajar anda cara menggunakan HTML untuk menambah kesan sempadan pada imej (penjelasan kod terperinci)

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

奋力向前asal: 2021-08-19 18:39:2821172semak imbas

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

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>

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;

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;
}

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;
}

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

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!

Kenyataan：

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

Artikel sebelumnya：Ajar anda langkah demi langkah cara menggunakan css untuk mencipta kesan butang bulat (penjelasan kod terperinci)Artikel seterusnya：Ajar anda langkah demi langkah cara menggunakan css untuk mencipta kesan butang bulat (penjelasan kod terperinci)

Artikel berkaitan

Lihat lagi