cari

Rumah  >  Soal Jawab  >  teks badan

html - Bagaimana untuk menulis grafik jenis ini dengan css3

某草草某草草2859 hari yang lalu947

membalas semua(4)saya akan balas

  • 为情所困

    为情所困2017-05-24 11:34:06

    Terdapat tugas yang dipanggil chamfering dalam css3

    balas
    0
  • PHP中文网

    PHP中文网2017-05-24 11:34:06

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    35

    <code><!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></code>

    balas
    0
  • 巴扎黑

    巴扎黑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

    balas
    0
  • 習慣沉默

    習慣沉默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

    balas
    0
  • Batalbalas