html - Bagaimana untuk menulis grafik jenis ini dengan css3
Rumah > Soal Jawab > teks badan
PHP中文网2017-05-24 11:34:06
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<style type="text/css">
*,body{ margin: 0; padding: 0; background: #fff; border: none; }
.bg{width: 500px; height: 500px; background: rgba(253,181,43,1); padding: 12px; }
.bg .write_box{ width: 500px; height: 250px; position: relative;background: #fff; overflow: hidden; }
.bg .write_box .round{ width: 40px; height: 40px; background: rgba(253,181,43,1); position:absolute; border-radius: 100% }
.bg .write_box .lft{ left: -20px; }
.bg .write_box .rgh{ right: -20px; }
.bg .write_box .botm{ bottom: -20px; }
.bg .write_box .tp{ top: -20px; }
</style>
<p class="bg">
<p class="write_box">
<p class="round lft tp"></p>
<p class="round rgh tp"></p>
<p class="round lft botm"></p>
<p class="round rgh botm"></p>
</p>
<p class="write_box">
<p class="round lft tp"></p>
<p class="round rgh tp"></p>
<p class="round lft botm"></p>
<p class="round rgh botm"></p>
</p>
</p>
</body>
</html>巴扎黑2017-05-24 11:34:06
Secara ringkasnya, anda perlu mencapainya melalui jejari sempadan elemen p bulat dan limpahan bungkusan Bagi oren yang lebih dalam, ia sepatutnya bayang
習慣沉默2017-05-24 11:34:06
Saya benar-benar minta maaf, saya selalu menggunakan firefox, tetapi saya tidak sangka ia berbeza antara radial-gradientdan chrome. Ia juga kerana saya tidak cukup memahaminya.
Saya telah mengubah suai pautan di bawah sekali lagi.
================
Menggunakan pembolehubah CSS3 untuk mengawal saiz jejari, saya tidak dapat memikirkan cara yang lebih mudah buat masa ini
Saya akan pergi lebih jauh ke arah yang tidak serasi secara menurun...
DEMO-Baharu
================================================================
Sila lihat DEMO untuk mendapatkan butiran Ia adalah pelaksanaan CSS3 yang tulen tanpa menambah tag tambahan Walaupun saya rasa skalabilitinya tidak tinggi, ia masih boleh dimasukkan ke dalam pengeluaran dengan peningkatan yang berterusan.
Terdapat banyak keajaiban dalam CSS3 Jika anda memikirkannya dengan lebih mendalam, anda akan menghasilkan banyak fungsi yang menarik. Sama seperti pengarang "CSS Revealed".
DEMO