简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
html - Bagaimana untuk menulis grafik jenis ini dengan css3
某草草
某草草 2017-05-24 11:32:06
0
4
832

某草草
某草草

membalas semua(4)
为情所困
为情所困2017-05-24 11:34:06 Tingkat 4

Terdapat tugas yang dipanggil chamfering dalam css3

Suka +0
Tambah Balasan
Ty80
Ty802017-05-24 11:34:06 Tingkat 3 
<!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>
Suka +0
Tambah Balasan
巴扎黑
巴扎黑2017-05-24 11:34:06 Tingkat 2

Secara ringkasnya, anda perlu mencapainya melalui jejari sempadan elemen p bulat dan limpahan bungkusan Bagi oren yang lebih dalam, ia sepatutnya bayang

Suka +0
Tambah Balasan
習慣沉默
習慣沉默2017-05-24 11:34:06 Tingkat 1

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

Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！