Einführung in das Schreiben einer Sprechblase mit CSS3-CSS-Tutorial-php.cn

Einführung in das Schreiben einer Sprechblase mit CSS3

巴扎黑

Freigeben： 2017-09-14 09:33:41

Original

2283 Leute haben es durchsucht

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 Editor und werfen wir einen Blick darauf.

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>

Nach dem Login kopieren

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

}

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonEinführung in das Schreiben einer Sprechblase mit CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!