html编写气泡对话框,纯css手写圆角气泡对话框微信小程序和web都适用

嗯……我们设计师强烈要求一定要圆角！圆角的气泡对话框，不要那种尖角的。这其中还遇上了个尴尬的问题，z-index不生效

无非就是两种方法，一种是使用图片再定位拼接起来使用，太简单了具体就不详细的说了。另一种方法就是border来写了，虽然怎么写都是尖角的，可是我想尝试一下。纯手写写出设计师想要的圆角吧

什么是圆角的？什么是尖角的？以下图片可以对比出来:

这种是尖角：

这种是圆角：

尖角的方法网上一搜也是一大堆，其中有我最喜欢的阮大神的方法，阮大神博文在此(可点击)：

而圆角的一个思路是使用边框加上背景色使用

html

aaaaaaaaaa

web端把view标签修改为div标签即可

css

.dialog{

position: relative;

display: inline-block;

width: 250px;

background-color: green;

padding: 30px;

z-index: 2;

}

.u-tri::before{

position: absolute;

left: -4px;

top: 4px;

content: '';

width: 50px;

height: 50px;

border-style:solid;

border-width:2px;

border-color: red ;

border-radius:6px;

background-color: red;

transform:rotate(45deg);

z-index: -1;

}

这里的 z-index 有个需要注意的地方，父必须得设置 z-index。如果不设置，那么 u-tri 会直接不见

效果

真机预览和微信开发工具的一样，把背景颜色都调成一样的，调整下位置和大小即可解除设计师的怨念,

另外注意一下，小程序使用可以根据需要将px单位改成rpx单位。我这边只做简单演示，小程序端最好是使用rpx单位哈

html编写气泡对话框,纯css手写圆角气泡对话框微信小程序和web都适用相关推荐

html编写气泡对话框,HTML+CSS入门纯CSS手写圆角气泡对话框
本篇教程介绍了HTML+CSS入门纯CSS手写圆角气泡对话框,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 嗯--我们设计师强烈要求一定要圆角!圆角的气泡对话框,不要那 ...
uniapp开发写了key 但微信小程序时警告-Now you can provide attr `wx:key` for a `wx:for` to improve performance.
我这里碰见了两种造成这个问题的错误第一种 :key="Ditem.did" 给了key值,但是变量写错,key值是undefined, 解决方案,给一个正确的值,而且值唯一第二 ...
Html5手机端网址封装成微信小程序的教程
导读: 微信用户数早已超越10亿(中国使用微信的人已经超过80%),微信小程序也备受用户喜爱,如果你的网站已有H5手机端,可以将H5手机网站直接封装成微信小程序,除了不能使用微信支付功能外,其他类似分 ...
微信小程序（看文档写实例二）微信小程序课堂宝APP
全程记录APP的开发过程,项目完结公上传Github. 一.需求由于老板让做一个课堂信息化APP,想想在移动端开发,小程序不分Android和IOS,所以就选择了微信小程序,软件的需求不多,但整体内 ...
微信小程序css内边距能么调,微信小程序中CSS的内边距和圆框
问题描述在制作小程序的时候会经常用到浮动来设计各种组件的排版,微信小程序对排版的要求很高.光有浮动是远远不够的,如果一个板块内的组件过多就会变得混乱.所以就需要用设置内边框来调整位置.微信小程序中会 ...
微信小程序（看文档写实例三）微信小程序课堂宝APP实现整体界面框架及首页布局
一.首页布局简单思路回顾上一篇博文,首页的内容主要有轮播图,横向滑动菜单以及菜单对应的view,横向滑动菜单有签到.课堂测试.模拟测试.课堂提问.答问记录五个选项,当点击选项时更新显示view.由于 ...
纯css svg 改变图片颜色 ios android 小程序
本文出自: http://blog.csdn.net/wyk304443164 使用的是 filter drop-shadow 如果你只想兼容 Chrome 那么请看: http://www.zhan ...
微信小程序（看文档写实例十一）微信小程序课堂宝APP完结总结及github地址
一.总结国庆假期偷懒了几天,从接到任务到分析到实现总共花了20天左右,终于完成了,点名功能由于要实时监听需要收费,所以没有给出代码,需要完成的可以自己动手实现.用一张导图来结束: 二.源码地址所有 ...
微信小程序（看文档写实例六）微信小程序课堂宝APP实现签到逻辑
继上篇博文,这篇写下签到实现的逻辑. 一.实现逻辑发起签到 1.先上传当前自己的定位经纬度 2.学生查询老师的最后一次签到记录,如果发现签到记录signComplete为false说明有新的签到 3 ...

html编写气泡对话框,纯css手写圆角气泡对话框微信小程序和web都适用

html编写气泡对话框,纯css手写圆角气泡对话框微信小程序和web都适用相关推荐

最新文章

热门文章

html编写气泡对话框,纯css手写圆角气泡对话框 微信小程序和web都适用

html编写气泡对话框,纯css手写圆角气泡对话框 微信小程序和web都适用相关推荐

最新文章

热门文章

html编写气泡对话框,纯css手写圆角气泡对话框微信小程序和web都适用

html编写气泡对话框,纯css手写圆角气泡对话框微信小程序和web都适用相关推荐