1000字范文,内容丰富有趣,学习的好帮手!
1000字范文 > html编写气泡对话框 纯css手写圆角气泡对话框 微信小程序和web都适用

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

时间:2023-01-13 15:58:19

相关推荐

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单位哈

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。