recherche

Maison  >  Questions et réponses  >  le corps du texte

html - Comment écrire ce genre de graphiques avec CSS3

某草草某草草2745 Il y a quelques jours861

répondre à tous(4)je répondrai

  • 为情所困

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

    Il existe un travail appelé chanfreinage en CSS3

    répondre
    0
  • PHP中文网

    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>

    répondre
    0
  • 巴扎黑

    巴扎黑2017-05-24 11:34:06

    Pour faire simple, vous devez y parvenir à travers le rayon-bordure de l'élément p circulaire et le débordement de l'emballage. Quant à l'orange plus profond, ce devrait être l'ombre

    .

    répondre
    0
  • 習慣沉默

    習慣沉默2017-05-24 11:34:06

    Je suis vraiment désolé, j'ai toujours utilisé Firefox, mais je ne m'attendais pas à ce que ce soit différent entre radial-gradientet Chrome. C’est aussi parce que je ne le comprends pas assez bien.

    J'ai à nouveau modifié le lien ci-dessous.

    ================

    En utilisant des variables CSS3 pour contrôler la taille du rayon, je ne peux pas penser à un moyen plus simple pour l'instant
    Je vais de plus en plus loin sur la voie de ne pas être incompatible vers le bas...

    DEMO-Nouveau

    ====================================

    Veuillez consulter la DÉMO pour plus de détails. Il s'agit d'une implémentation CSS3 pure sans ajout de balises supplémentaires. Bien que j'estime que l'évolutivité n'est pas élevée, elle devrait toujours pouvoir être mise en production avec une amélioration continue.

    Il existe bien d'autres magies de CSS3 Si vous y réfléchissez plus profondément, vous découvrirez de nombreuses fonctions intéressantes. Tout comme l'auteur de "CSS Revealed".

    DÉMO

    répondre
    0
  • Annulerrépondre