Aduh
1. Pindahkan mouse ke halaman web dan hilang = =
*{ kursor: tidak ada!penting; }2. Efek blur teks sederhana
*{ warna: transparan; bayangan teks: #111 0 0 5px; }![]()
3. Beberapa batas
.div { box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 0 12px rgba(0, 0, 0, 0.2), 0 0 0 18px rgba(0, 0, 0, 0.2), 0 0 0 24px rgba(0, 0, 0, 0.2); tinggi: 200px; margin: 50px otomatis; lebar: 400px}![]()
4. Edit CSS secara real time
<!DOCTYPE html><html> <body> <style style="display:block" contentEditable> body { color: blue } </style> </body></html>![]()
5. Operasi sederhana di CSS
.div{ lebar: calc (100% - 500px); }![]()
6 、 radius perbatasan
Karena pada dasarnya banyak orang menggunakannya dengan cara ini:
.div { border-radius: 4px; }![]()
Sedikit lebih mewah seperti ini:
.div { border-radius: 4px 6px 6px 4px; }![]()
Namun, beginilah cara teknologi hitam pamungkas digunakan:
.div { border-radius: 5px 5px 3px 2px / 5px 5px 1px 3px; }![]()
border-radius Ini dapat diberi 8 nilai:
Bagian depan garis miring mempengaruhi arah horizontal, dan bagian belakang garis miring mempengaruhi arah vertikal.
Setiap angka mewakili empat arah yang berbeda.
7 、 offset garis besar
Saat menulis CSS di bawah input, Anda akan terbiasa dengan pernyataan berikut:
masukan { garis besar : tidak ada; }input:focus { outline : none; Ini adalah cara menghapus wireframe biru default dari kotak input input.
Ada juga properti outline-offset di CSS di mana Anda dapat mengatur jarak wireframe default:
input { outline-offset: 4px ; }(Grup pertukaran pembelajaran front-end web: 328058344 Tidak ada obrolan ringan, jangan masuk kecuali Anda menyukainya! Sesuaikan ukuran nilai atribut dan Anda dapat melihat perubahan jarak garis besar.
Akhirnya, saya akan menyajikan demo putih besar sebelum fakta
<!doctype html><html> <head> <meta charset="utf-8"> <title>Baymax</title> <link rel=stylesheet href="demo2.css"/> </head> <style> tubuh { latar belakang: #595959; } #baymax{ /* diatur ke tengah*/ margin: 0 otomatis; /*tinggi*/ tinggi: 600px; /*sembunyikan luapan */ luap: tersembunyi; } #head{ tinggi: 64px; lebar: 100px; /*Tentukan bentuk sudut membulat sebagai persentase*/border-radius: 50%; /*latar belakang*/ latar belakang: #fff; margin: 0 otomatis; margin-bawah: -20px; /*Atur gaya batas bawah*/ border-bottom: 5px solid #e0e0e0; /*mengatur urutan penumpukan elemen; Elemen dengan urutan tumpukan yang lebih tinggi akan selalu berada di depan elemen dengan urutan tumpukan yang lebih rendah*/ z-index: 100; /*Hasilkan elemen yang diposisikan relatif*/ posisi: relatif; } #eye, #eye2{ lebar: 11px; tinggi: 13px; latar belakang: #282828; jari-jari perbatasan: 50%; posisi: relatif; atas: 30px; kiri: 27px; /*putar elemen*/transformasi: putar (8deg); } #eye2{ /*Buat berputar secara simetris*/ transformasi: putar (-8 derajat); kiri: 69px; atas: 17px; } #mouth{ lebar: 38px; tinggi: 1.5px; latar belakang: #282828; posisi: relatif; kiri: 34px; atas: 10px; } /*Batang tubuh dan perut*/ #torso, #belly{ margin: 0 otomatis; } tinggi: 200px; lebar: 180px; latar belakang: #fff; jari-jari perbatasan: 47%; /*Atur batas*/ batas: 5px solid #e0e0e0; border-top: tidak ada; z-indeks: 1; } #belly{ tinggi: 300px; lebar: 245px; margin-atas: -140px; z-indeks: 5; } #cover{ lebar: 190px; latar belakang: #fff; tinggi: 150px; margin: 0 otomatis; posisi: relatif; atas: -20px; jari-jari perbatasan: 50%; } /*hati*/ #heart{ lebar:25px; tinggi: 25px; jari-jari batas: 50%; posisi:relatif; /*Tambahkan efek bayangan di sekitar batas*/ box-shadow:2px 5px 2px #ccc sisip; kanan:-115px; atas: 40px; z-indeks:111; border:1px solid #ccc; } /*arm*/ #left-arm, #right-arm{ tinggi: 270px; lebar: 120px; jari-jari perbatasan: 50%; latar belakang: #fff; margin: 0 otomatis; posisi: relatif; atas: -350px; kiri: -100px; mengubah: putar (20 derajat); z-indeks: -1; } #right-arm{ transformasi: putar (-20deg); kiri: 100px; atas: -620px; } /*jari*/ #l-bigfinger, #r-bigfinger{ tinggi: 50px; lebar: 20px; jari-jari perbatasan: 50%; latar belakang: #fff; posisi: relatif; atas: 250px; kiri: 50px; mengubah: putar (-50 derajat); } #r-bigfinger{ kiri: 50px; Transformasi: putar (50 derajat); } #l-smallfinger, #r-smallfinger{ height: 35px; lebar: 15px; jari-jari perbatasan: 50%; latar belakang: #fff; posisi: relatif; atas: 195px; kiri: 66px; mengubah: putar (-40 derajat); } #r-smallfinger{ latar belakang: #fff; transformasi: putar (40 derajat); atas: 195px; kiri: 37px; } /*paha*/ #left-kaki, #right-kaki{ tinggi: 170px; lebar: 90px; jari-jari batas: 40% 30% 10px 45%; latar belakang: #fff; posisi: relatif; atas: -640px; kiri: -45px; mengubah: putar (-1 derajat); z-indeks: -2; margin: 0 otomatis; } #right-leg{ latar belakang: #fff; jari-jari batas: 30% 40% 45% 10px; margin: 0 otomatis; atas: -810px; kiri: 50px; mengubah: putar (1 derajat); </style><body> } <div id="baymax"> <!-- Tentukan kepala, termasuk dua mata, mulut --> <div id="head"> <div id="eye"></div> <div id="eye2"></div> <div id="mouth"></div> </div> <!-- Tentukan batang, termasuk jantung --> <div id="torso"> <div id="jantung"></div> </div> <!-- Tentukan perut, perut, termasuk penutup (dan persimpangan batang tubuh) --> <div id="perut"> <div id="penutup"></div> </div> <!-- Tentukan lengan kiri, termasuk dua jari, satu besar dan satu jari kecil --> <div id="left-arm"> <div id="l-bigfinger"></div> <div id="l-smallfinger"></div> </div> <!-- Tentukan lengan kanan, yang juga mencakup satu jari besar dan satu jari kecil --> <div id="right-arm"> <div id="r-bigfinger"></div> <div id="r-smallfinger"></div> </div> <!-- menentukan kaki kiri --> <div id="left-leg"></div> <!-- menentukan kaki kanan --> <div id="kaki kanan"></div> </div></body><html>![]()
|
Diposting pada 04/12/2017 20.24.39
|
|
|
|
Diposting pada 05/12/2017 09.10.05
|
Diposting pada 05/12/2017 09.21.19
