Bagaimana untuk melaksanakan sempadan garis bergelombang dalam css

Cara melaksanakan sempadan bergelombang dengan css: mula-mula buat fail sampel HTML, kemudian buat tag p dan akhirnya laksanakan sempadan bergelombang melalui kecerunan jejari "radial-gradient".

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

Bagaimana untuk melaksanakan sempadan beralun dalam css?

Kaedah jejari jejari kecerunan jejari CSS3 untuk mencapai sempadan bergelombang dan chamfer dalaman

Kata Pengantar

Bos memberi saya gambar Apabila saya melihat imej kupon (seperti yang ditunjukkan di bawah), saya menyedari bahawa sempadan beralun dan chamfering dalam tidak boleh ditulis menggunakan CSS, jadi saya menerangkannya kepada bos dan meminta potongan UI. Bos menjawab: CSS3 boleh melakukannya. Baiklah, orang-orang besar telah berkata bahawa ia boleh direalisasikan, mengapa anda tidak bergegas dan meminta Saudara Gu ke Du Niang.

Laksanakan chamfering dalaman

dan kemudian terangkan kod

<p class="radial-gradient"></p>
<style>
.radial-gradient {
    width: 200px;
    height: 100px;
    position: relative;
    background-image: radial-gradient(circle at right top, #fff, #fff 10px, transparent 11px),
           radial-gradient(circle at right bottom, #fff, #fff 10px, transparent 11px);
    background-color: red;
}
</style>

.radial-gradient Terdapat tidak perlu menerangkan gaya, sesiapa yang mengetahui beberapa CSS akan mengetahuinya. Kuncinya ialah gaya .radial-gradient:after.

Fokus pada menerangkan untuk tujuan gaya kecerunan jejari (bulatan di bahagian atas kanan, #fff, #fff 10px, lutsinar 11px).

bulatan mewakili kecerunan bulat, yang bermaksud melukis bulatan. Untuk melukis bulatan anda perlu mengetahui asal usul.

bulatan di bahagian atas kanan Bahagian atas kanan dalam bulatan di bahagian atas kanan ialah kedudukan asal. Di sini kedudukan asal ialah koordinat relatif kepada bekas. Kanan mewakili bahagian paling kanan bekas, dan bahagian atas mewakili bahagian paling atas bekas, dengan kata lain, sudut kanan atas.

bulatan di bahagian atas kanan #fff, #fff 10px, lutsinar 11px di belakangnya ialah panjang pelbagai kecerunan warna bermula dari asal.

#fff pertama dalam kod #fff, #fff 10px, lutsinar 11px bermaksud asal ialah warna #fff, #fff 10px bermaksud jejari 10px dari asal adalah semua warna #fff, lutsinar 11px bermaksud Warna lutsinar dari 10px hingga 11px dari asal Memandangkan tiada warna lain ditetapkan, warna itu lutsinar selepas 11px dari asal.

Ringkasan jejari-kecerunan (bulatan di bahagian atas kanan, #fff, #fff 10px, lutsinar 11px), adalah untuk melukis bulatan dengan sudut kanan atas bekas sebagai asal, dengan jejari 10px Warna dalam ialah #fff, dan warna dalam jejari lebih daripada 10px adalah lutsinar.

Dengan cara ini, chamfer dalam terbentuk di penjuru kanan sebelah atas

Begitu juga, radial-gradient(bulatan di bahagian bawah kanan, #fff, #fff 10px, 11px lutsinar); tidak menjelaskannya.

Untuk melaksanakan sempadan beralun

Tambah kod dan tambah gaya css

<style>
.radial-gradient:after {
    content: &#39;&#39;;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: -5px;
    width: 10px;
    height: 100%;
    background: radial-gradient(circle, #fff, #fff 4px, transparent 5px);
    background-size: 10px 10px;
}
</style>

latar belakang: radial-gradient(bulatan, #fff , #fff 4px, lutsinar 5px); Tiada perkataan atas sebelah kanan di sini, yang bermaksud asal berada di tengah bekas #fff, #fff 4px, lutsinar 5px, bermakna warna #fff berada dalam jejari 4px, dan jejari lebih besar daripada 4px warna telus. Dengan cara ini, terdapat bulatan warna #fff dengan diameter 8px terletak di tengah bekas (bekas di sini ialah: selepas).

(Latar belakang biru adalah untuk kesan demonstrasi)

Tambah saiz latar belakang: 10px 10px; tetapkan saiz latar belakang kepada 10px lebar dan 10px tinggi, supaya berbilang diameter boleh dicapai Bulatan 8px warna #fff.

(Latar belakang biru adalah untuk kesan tunjuk cara)

kiri: -5px; mengimbangi 5px ke kiri, supaya hanya separuh daripada :after berada di dalam bekas .radial-gradient

Akhir sekali, rendering dilampirkan

Ringkasan

Untuk mencapai chamfering dalaman, anda sebenarnya perlu melukis bulatan dengan warna #fff. Hanya satu perempat daripada bulatan berada di dalam bekas. Untuk mencapai sempadan beralun, anda sebenarnya perlu melukis berbilang bulatan warna #fff > [Pembelajaran yang disyorkan:

]

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan sempadan garis bergelombang dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!