Verwenden Sie CSS3, um einen Balloneffekt zu erzielen

In diesem Artikel wird hauptsächlich der Beispielcode zum Schreiben von Ballonstilen mit CSS3 vorgestellt. Ich werde ihn jetzt mit Ihnen teilen und als Referenz verwenden.

In diesem Artikel wird der Beispielcode zum Schreiben eines Ballonstils mit CSS3 vorgestellt und mit allen geteilt. Die Details lauten wie folgt:

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

}

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Lernen aller hilfreich ist. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website !

Verwandte Empfehlungen:

Verwenden Sie CSS3, um WeChat-ähnliche Chat-Blasen zu implementieren

Verwenden Sie CSS, um den automatischen Zeilenumbruch von zu implementieren reine englische Zahlen

Mitteilen, wie man den Hintergrund mit CSS steuert

Das obige ist der detaillierte Inhalt vonVerwenden Sie CSS3, um einen Balloneffekt zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!