CSS3-Code zur Implementierung des Ballonstils

In diesem Artikel wird hauptsächlich der Beispielcode zum Schreiben von Ballonstilen mit CSS3 vorgestellt. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Ballon-Rendering:

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

}

Verwandte Empfehlungen:

Erstellen Sie eine Vielzahl verschiedener grafischer Formen nur mit CSS

Detaillierte Erläuterung der von CSS implementierten Codes verschiedener Formen

Formanwendung neuer Funktionen von CSS3

Das obige ist der detaillierte Inhalt vonCSS3-Code zur Implementierung des Ballonstils. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!