用css3做出气球图片样式-css教程-PHP中文网

用css3做出气球图片样式

php中世界最好的语言

发布： 2018-03-21 13:07:12

原创

1856人浏览过

这次给大家带来用css3做出气球图片样式，用css3做出气球图片样式的注意事项有哪些，下面就是实战案例，一起来看一下。

气球效果图：

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

登录后复制

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

伪元素::before与::after使用详解

wordpress主题：格子商铺主题

这是易秀购主题网转载的一款原创来至web主题公园的一款wordpress cms主题，非常适合做图片展示，或婚纱摄影类wordpress主题，采用了大气的网格化无缝设计，使列表以格子铺的方式排列，鼠标悬停的可以出现文章的简介。网站上方可以书写自己的广告语，图片也是可以替换掉的，图片会随着鼠标的移动而轻移，并且在鼠标滚动的时候，下面的模块会直接遮盖这个区域，这款wordpress cms主题视觉效果