html - Comment écrire ce genre de graphiques avec CSS3
某草草
某草草 2017-05-24 11:32:06
0
4
888

某草草
某草草

répondre à tous(4)
为情所困

Il existe un travail appelé chanfreinage en CSS3

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

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

.
習慣沉默

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

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal