使用css3怎么实现一个气球样式

使用css3怎么实现一个气球样式?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

我们提供的服务有:成都网站设计、做网站、微信公众号开发、网站优化、网站认证、东兰ssl等。为数千家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的东兰网站制作公司

html:

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

}

关于使用css3怎么实现一个气球样式问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注创新互联行业资讯频道了解更多相关知识。


网页名称:使用css3怎么实现一个气球样式
分享URL:http://scyanting.com/article/gpghpc.html

其他资讯