讲师中心 微信公众号
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机游戏
最近更新
首页 > web前端 > css教程 > 正文

css3实现气球样式的代码

小云云
发布： 2017-12-23 13:29:17
原创
2174人浏览过

本文主要介绍了用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%;

}
登录后复制

相关推荐：

立即学习“前端免费学习笔记（深入）”；

纯CSS3实现漂亮的价格表样式代码
纯CSS3实现漂亮的价格表样式代码

纯CSS3实现漂亮的价格表样式代码

纯CSS3实现漂亮的价格表样式代码 92
查看详情 纯CSS3实现漂亮的价格表样式代码

仅用CSS 创建各种不同的图形形状

详解css实现的各种形状的代码

Css3新特性应用之形状

以上就是css3实现气球样式的代码的详细内容，更多请关注php中文网其它相关文章！

相关标签：
css3 css

大家都在看：

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

下载
来源：php中文网
收藏 点赞
上一篇：纯CSS3实现网页中常见的小箭头实例 下一篇：6种解决CSS图片下面有间隙的方法
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
cssflex布局一行放不下元素怎么办_通过flex-wrap控制换行规则 Flex容器默认不换行，需用flex-wrap控制：wrap启用换行，wrap-reverse反向换行，nowrap禁止换行；换行后align-content控制多行对齐，justify-content控制每行内对齐。
2025-12-23 13:35:02
165
css白色也能设置透明吗_通过rgba控制白色透明度 rgba()通过第四个alpha参数控制白色透明度，取值0（全透明）到1（不透明），实现白色与背景融合；常用于半透遮罩、柔和按钮背景等场景，且不影响子元素透明度。
2025-12-23 13:29:07
621
css浮动布局嵌套后样式错乱怎么办_逐层清除浮动避免影响父级 根本原因是子元素浮动脱离文档流导致父容器高度塌陷；解决关键是为每层浮动父容器主动触发BFC或使用清除技术，逐层隔离影响，而非仅清最外层浮动。
2025-12-23 13:24:02
116
cssfixed定位按钮被输入法遮挡怎么办_移动端需避免底部fixed 移动端底部fixed按钮被软键盘遮挡的本质是浏览器对fixed定位在键盘弹出时行为不一致；推荐用sticky替代、监听键盘状态、利用env(keyboard-inset-bottom)变量或嵌入输入框内布局来解决。
2025-12-23 13:12:09
433
css盒模型中子元素突破容器怎么办_css突破问题用overflow隐藏溢出 子元素突破父容器通常因尺寸超限、绝对定位、内边距或边框导致盒模型溢出，可通过设置overflow:hidden裁剪溢出内容，但需注意隐藏阴影等副作用，建议结合box-sizing、max-width和Flex/Grid布局优化结构。
2025-12-23 12:47:10
467
css背景图片重复显示怎么关闭_通过background-repeat控制平铺方式 关闭CSS背景图片重复显示需设background-repeat为no-repeat；可单独控制横向（repeat-x）或纵向（repeat-y）平铺；常配合background-position、background-size等实现精确定位与适配。
2025-12-23 12:27:08
158
CSS背景图片位置如何响应变化_background-position百分比或关键字 background-position的百分比和关键字值通过点对齐机制实现响应式定位，30%40%表示背景图内对应点与容器点对齐，关键字如center等同50%50%，配合background-size可确保不同设备下视觉焦点一致。
2025-12-23 12:07:11
853
CSS选择器能选择空元素吗_使用:empty伪类实现精准控制 :empty伪类可精准选中无内容元素，用于隐藏空容器或添加占位样式，需注意空格和换行会使其失效，现代浏览器均支持。
2025-12-23 12:02:02
419
cssabsolute定位适合哪些场景使用_适用于装饰性与悬浮元素 position:absolute适合脱离文档流且需精准定位的元素，如右上角标签、悬浮按钮、覆盖层、提示气泡等，依赖相对定位父容器提供上下文，配合z-index和transform实现层级控制与动画优化。
2025-12-23 11:45:08
285
css图标旋转动画怎么写_利用animation和transform rotate CSS图标旋转动画需定义@keyframes旋转帧并用animation应用，注意元素display兼容性、避免overflow裁剪，支持方向控制、cubic-bezier节奏调节及hover暂停，图标与文字应分层以确保仅图标旋转。
2025-12-23 11:36:09
286
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部