html编写气泡对话框,HTML+CSS入门纯CSS手写圆角气泡对话框

本篇教程介绍了HTML+CSS入门纯CSS手写圆角气泡对话框，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。

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

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

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

这种是尖角：

这种是圆角：

尖角的方法网上一搜也是一大堆，其中有我最喜欢的阮大神的方法，阮大神博文在此(可点击)：http://www.ruanyifeng.com/blog/2010/04/css_speech_bubbles.html

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

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

本文由职坐标整理发布，欢迎关注职坐标WEB前端HTML/CSS频道，获取更多HTML/CSS知识！

html编写气泡对话框,HTML+CSS入门纯CSS手写圆角气泡对话框相关推荐

html编写气泡对话框,纯css手写圆角气泡对话框微信小程序和web都适用
嗯--我们设计师强烈要求一定要圆角!圆角的气泡对话框,不要那种尖角的.这其中还遇上了个尴尬的问题,z-index不生效无非就是两种方法,一种是使用图片再定位拼接起来使用,太简单了具体就不详细的说了. ...
[css] 使用纯CSS代码实现动画的暂停与播放
[css] 使用纯CSS代码实现动画的暂停与播放一个属性:animation-play-state 取值:paused(暂停)|running(播放) hover取代点击 .stop:hover~. ...
[css] 使用纯css来创建一个滑块
[css] 使用纯css来创建一个滑块 .checke{position: relative;-webkit-appearance: none;width:90px;height: 44px;line ...
[css] 使用纯css能否监控到用户的一些信息？怎么实现？
[css] 使用纯css能否监控到用户的一些信息?怎么实现? 利用:active 伪类实现监控用户的点击 .button-1:active::after {content: url(./pixel.g ...
【PytorchLearning】NLP入门笔记之手写Transformer Encoder内部机制
NLP入门笔记之手写Transformer Encoder内部机制本文主要从Transformer Encoder中Word embedding生成.Position embedding机制和sel ...
CSS入门（css 基本教程）
CSS入门 CSS简介 v 概念 Cascading Style Sheets ,层叠样式表 v 功能 v 基本语法 CSS的定义是由三个部分构成:选择符(se ...
制作css开关,纯css实现开关效果
大家好,我又来了,这次给大家表演使用纯css实现开关效果首先是构思我们使用标签来实现这个效果. checkbox的选中.未选中的特性,刚好对应开关的打开.关闭 on:打开 off:关闭未选中,则 ...
【CSS】纯css实现立体摆放图片效果
1. 元素的 width/height/padding/margin 的百分比基准设置一个元素 width/height/padding/margin 的百分比的时候,大家可知道基准是什么? 举 ...
php下拉框css样式,纯CSS实现的下拉菜单
实现效果实现代码 html Home WordPress Themes Plugins Tutorials Web Design Resources Links Tutorials HTML/CSS ...

html编写气泡对话框,HTML+CSS入门纯CSS手写圆角气泡对话框

html编写气泡对话框,HTML+CSS入门纯CSS手写圆角气泡对话框相关推荐

最新文章

热门文章

html编写气泡对话框,HTML+CSS入门 纯CSS手写圆角气泡对话框

html编写气泡对话框,HTML+CSS入门 纯CSS手写圆角气泡对话框相关推荐

最新文章

热门文章

html编写气泡对话框,HTML+CSS入门纯CSS手写圆角气泡对话框

html编写气泡对话框,HTML+CSS入门纯CSS手写圆角气泡对话框相关推荐