Utilisez CSS3 pour créer des styles d'image de ballon

Cette fois, je vais vous montrer comment utiliser CSS3 pour créer un style image de ballon Quelles sont les précautions pour utiliser CSS3 pour créer un style d'image de ballon. cas pratique. Jetons un coup d'oeil une fois.

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%;
}

Je crois que vous avez vu Vous maîtrisez la méthode dans le cas de cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée de l'utilisation des pseudo-éléments ::avant et ::après

Explication détaillée de l'utilisation des événements de pointeur en 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!