Bagaimana untuk mengulang imej sempadan menggunakan CSS?-tutorial css-php.cn

Bagaimana untuk mengulang imej sempadan menggunakan CSS?

王林

Lepaskan： 2023-09-10 11:13:02

ke hadapan

1011 orang telah melayarinya

Bagaimana untuk mengulang imej sempadan menggunakan CSS?

CSS (Cascading Style Sheets) ialah alat berkuasa yang membolehkan kami mengawal persembahan visual elemen HTML pada halaman web, termasuk menambah imej latar belakang pada elemen. Satu teknik yang berguna ialah mengulang imej sempadan menggunakan CSS. Ini membolehkan kami membuat sempadan yang menarik dan kompleks untuk elemen tanpa menggunakan berbilang imej atau kod HTML dan CSS yang kompleks.

Tatabahasa

Berikut ialah sintaks untuk mengulang imej sempadan menggunakan CSS -

sss - selector {
   border-image: source slice width outset repeat;
}

Salin selepas log masuk

Di sini, sumber menentukan laluan ke imej yang kita mahu gunakan untuk sempadan, slice menentukan cara imej harus dihiris ke dalam bahagian, lebar menentukan lebar imej untuk sempadan, outset menentukan berapa banyak imej sempadan harus diimbangi dari tepi elemen, ulang Menentukan cara imej harus berulang di sepanjang sempadan.

Imej Sempadan

Sebelum kita melihat cara mengulang imej sempadan menggunakan CSS, adalah penting untuk memahami apa itu imej sempadan. Imej sempadan ialah imej yang digunakan untuk membuat sempadan di sekeliling elemen HTML. Imej sempadan biasanya merupakan corak atau reka bentuk yang diulang di sekeliling pinggir elemen, menghasilkan bingkai hiasan.

Untuk menggunakan imej sempadan dalam CSS, kami terlebih dahulu mentakrifkan imej menggunakan sifat imej sempadan. Atribut imej sempadan digunakan untuk menentukan dari mana imej itu berasal, cara imej dihiris dan cara imej berulang di sekeliling tepi elemen.

Ulang imej sempadan menggunakan CSS

Untuk mengulang imej sempadan menggunakan CSS, kita perlu menentukan sifat sempadan-imej-ulang. Sifat ini menentukan cara imej sempadan harus diulang di sekeliling tepi elemen.

Atribut

border-image-repeat mempunyai empat nilai yang mungkin -

stretch - Imej sempadan diregangkan untuk memenuhi keseluruhan sempadan.
ulang - Imej sempadan berulang secara mendatar dan menegak untuk memenuhi keseluruhan sempadan.
bulat - Imej sempadan berulang secara mendatar dan menegak, tetapi juga diregangkan atau dimampatkan agar sesuai dengan saiz sempadan.
ruang - Imej sempadan berulang secara mendatar dan menegak, tetapi juga dijarakkan agar sesuai dengan saiz sempadan.

Langkah

Untuk mengendalikan imej sempadan berulang menggunakan CSS, kami mengikuti langkah yang diberikan di bawah -

Kami mencipta atau mencari imej untuk digunakan sebagai corak sempadan.
Seterusnya, kami menetapkan gaya sempadan dan lebar untuk elemen HTML yang ingin kami tambahkan sempadan.
Akhir sekali, kami menggunakan sifat imej sempadan CSS untuk menentukan imej yang ingin kami gunakan dan cara ia harus diulang. Kami boleh menentukan laluan ke fail imej menggunakan fungsi url() dan mengawal cara imej berulang di sepanjang sempadan menggunakan nilai ulang, regangan, bulat, atau ruang.

Tiga contoh berikut menunjukkan cara mengulang imej sempadan menggunakan CSS.

Contoh 1: Menggunakan imej sempadan yang ringkas

Dalam contoh ini, kami akan mencipta imej sempadan berulang menggunakan corak mudah. Sempadan akan digunakan pada elemen p.

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         text-align: center;
      }
      p {
         border: 20px solid transparent;
         border-image: url('https://tutorialspoint.com/css/images/border.png') 20 repeat;
         font-size: 25px;
      }
   </style>
</head>
   <body>
      <p>Using a Simple Repeated Border Image</p>
   </body>
</html>

Salin selepas log masuk

Contoh 2 - Menggunakan imej sempadan bulat

Dalam contoh ini, kami akan mencipta imej sempadan berulang dengan corak bulat. Sempadan akan digunakan pada elemen p.

<html>
<head>
   <style>
      body {
         text-align: center;
      }
      p {
         border: 20px solid transparent;
         border-image: url('https://tutorialspoint.com/css/images/border.png') 20 round;
         font-size: 25px;
      }
   </style>
</head>
   <body>
      <p>Repeating border image with a circular pattern</p>
   </body>
</html>

Salin selepas log masuk

Contoh 3 - Menggunakan imej sempadan ruang

Dalam contoh ini, kami akan mencipta imej sempadan berulang menggunakan corak dengan ruang antara setiap ulangan. Sempadan akan digunakan pada elemen p.

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         text-align: center;
      }
      p {
         border: 20px solid transparent;
         border-image: url('https://tutorialspoint.com/css/images/border.png') 60 space;
         font-size: 25px;
         width:500px;
         height:200px;
         margin:auto;
      }
   </style>
</head>
   <body>
      <p>Repeating border image with a space pattern</p>
   </body>
</html>

Salin selepas log masuk

Kesimpulan

Menggunakan imej sempadan berulang CSS ialah cara terbaik untuk menambah sempadan hiasan pada elemen HTML. Dengan menggunakan sifat border-image-repeat kita boleh mengawal cara imej sempadan berulang dan mencipta corak dan reka bentuk yang menarik.

Atas ialah kandungan terperinci Bagaimana untuk mengulang imej sempadan menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!