Verwenden Sie CSS3, um Ballonbildstile zu erstellen

Dieses Mal zeige ich Ihnen, wie Sie mit CSS3 einen Ballon-Bildstil erstellen. Was sind die Vorsichtsmaßnahmen, um mit CSS3 einen Ballonbildstil zu erstellen? Schauen wir uns das einmal an.

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

Ich glaube, das haben Sie Ich habe es gesehen Sie beherrschen die Methode in diesem Artikel. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Verwendung der Pseudoelemente::before und::after

Detaillierte Erläuterung der Verwendung von Zeigerereignissen in CSS3

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