code CSS3 pour implémenter le style de ballon

Cet article présente principalement l'exemple de code pour écrire des styles de ballons en utilisant CSS3. L'éditeur pense que c'est assez bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.

Rendu des ballons :

html:

<p class="ballon"></p>

css:

.balloon{

         width: 160px;

         height: 160px;

         background: #faf9f9;

          /*css3 圆角属性*/

          border-radius: 50% 50% 25% 50%;

           /*顺时针旋转45度*/

           transform: rotate(45deg);

           /*盒子阴影 x位移 y位移 羽化 半径 颜色 */

           box-shadow: -8px -8px 80px -8px #873940 inset;

}

/*after  before 伪元素*/

.balloon::after{

           position: absolute;

            bottom: 5px;

            right: 5px;

            content:"";

             display: block;

             /*width: 18px;

             height: 18px;*/

             /*background: #873940;*/

            /*transform: rotate(45deg);*/

             border: 8px solid transparent;

             border-right-color: #873940;

             transform: rotate(45deg);

             border-radius: 50%;

}

Recommandations associées :

Créez une variété de formes graphiques différentes en utilisant uniquement CSS

Explication détaillée des codes des différentes formes implémentées par CSS

Application Shape des nouvelles fonctionnalités de CSS3

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!