Utilisez CSS3 pour obtenir des effets de style ballon

Cet article présente principalement l'exemple de code pour écrire des styles de ballon en utilisant CSS3. Le contenu est assez bon, je vais le partager avec vous maintenant et le donner comme référence.

Cet article présente l'exemple de code pour écrire un style de ballon en utilisant CSS3 et le partage avec tout le monde. Les détails sont les suivants :

Rendu de ballon :

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

}

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez prêter attention à. le site PHP chinois !

Recommandations associées :

Utilisez CSS3 pour implémenter des bulles de discussion de type WeChat

Utilisez CSS pour implémenter un retour à la ligne automatique de chiffres anglais purs

Partage sur la façon de contrôler l'arrière-plan avec CSS

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!