使用CSS画出“鹰嘴”消息框

最新推荐文章于 2022-05-14 09:33:25 发布
最新推荐文章于 2022-05-14 09:33:25 发布
阅读量659 收藏
点赞数
分类专栏： JavaScript 文章标签： CSS 消息框 鹰嘴 border-radius :before
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32331073/article/details/83995095
版权

必须明白radius可以设置为两个值，宽半径、高半径，如果只设置为一个值，则宽半径 = 高半径

<!DOCTYPE html>
<
    
    
     
     html
    
    >
<
    
    
     
     head
    
    >
<
    
    
     
     meta
    
     
    
    
     
     charset
    
    ="utf-8"> 
<
    
    
     
     title
    
    >菜鸟教程(runoob.com)</
    
    
     
     title
    
    > 
<
    
    
     
     style
    
    > 
#parent{
	 
    
    
     
     position
    
    :
   
   
    
    absolute
   
   ;
     top:100px;
	 
    
    
     
     left
    
    :100px;
     
    
    
     
     right
    
    :0px;
}
#content{
	 
    
    
     
     display
    
    :
   
   
    
    inline
   
   -
   
   
    
    block
   
   ;
	 
    
    
     
     background
    
    -
    
    
     
     color
    
    :
   
   
    
    blue
   
   ;
	 
    
    
     
     border
    
    -
    
    
     
     radius
    
    :5px;
	 
    
    
     
     padding
    
    :20px
}
#content::
    
    
     
     before
    
    
{   
	
    
    
     
     content
    
    :'';
    
    
    
     
     border
    
    -
    
    
     
     bottom
    
    : 15px 
   
   
    
    solid
   
    
   
   
    
    blue
   
   ;
    
    
    
     
     border
    
    -
    
    
     
     left
    
    : 0px 
   
   
    
    solid
   
    
   
   
    
    blue
   
   ;
    
    
    
     
     border
    
    -
    
    
     
     bottom
    
    -
    
    
     
     left
    
    -
    
    
     
     radius
    
    : 20px 20px;	
	
    
    
     
     height
    
    :20px;
	
    
    
     
     width
    
    :20px;
	
    
    
     
     position
    
    :
   
   
    
    absolute
   
   ;
	top:5px;
    
    
    
     
     left
    
    :-15px;
}	
</
    
    
     
     style
    
    >
</
    
    
     
     head
    
    >
<
    
    
     
     body
    
    >
	<div id="
    
    
     
     parent
    
    ">
		<div id="
    
    
     
     content
    
    ">asd</div>
	</div>
</
    
    
     
     body
    
    >
</
    
    
     
     html
    
    >

在这里插入图片描述

qq_32331073
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery+css点击弹出信息框特效代码
08-15
jquery+css点击弹出信息框特效代码
使用css3实现消息框
想要全栈chris的博客
03-18 2262
原理：使用css3中的transform：rotate旋转，通过定位改变位置。.out{ width: 300px; height: 150px; background-color: pink; margin:200px; position: relative; }
CSS画对话框
qq_30409135的博客
06-19 161
小程序 mpvue CSS画对话框 无图片 <div class="dangerDiv"> <div class="danger" > <p class="three"></p> <div class="centent fs26">{{dangerContent}}</div> </div>
css画一个提示框
weixin_30372371的博客
11-05 272
用css画一个如下图的提示框： 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .dialog{ di...
css伪元素制作消息框
xmyf
07-25 960
直接上代码      css如下:            .msg{                 width:200px;height:50px;                 margin-bottom: 20px;                 background: #20B2AA;color:#fff;                 text-align: cen
鹰嘴无菌性假性关节炎：流行病学特征和治疗评估
06-05
材料和方法：这是一项回顾性研究，涉及2006年1月至2016年12月在本科接受治疗的鹰嘴假性关节炎患者。在骨折处理后至少6个月对假性关节炎进行了诊断。 男16例，女5例。 我们分析了流行病学因素，假性关节炎的治疗和...
鹰嘴豆芽素A的太赫兹光谱研究
03-04
运用太赫兹时域光谱（THz-TDS）技术与理论模拟相结合的方法研究了鹰嘴豆芽素A在太赫兹(THz)波段的光谱特性。在室温真空环境中得到样品在0.5~2.4 THz波段的功率吸收谱，特征吸收峰分别位于0.86，1.15，1.60，1.74，...
鹰嘴岩、大红袍导游词.doc
03-08
【鹰嘴岩、大红袍导游词】 欢迎各位朋友，今天我将带领大家游览天心景区的精华景点，包括章堂涧、天车架、鹰嘴岩、流香涧、大红袍茶树、永乐禅寺以及杜辖岩。让我们一同领略武夷山的自然与人文之美。 首先，我们...
行业文档-设计装置-用于鹰嘴瓶的纸包装结构.zip
09-11
"行业文档-设计装置-用于鹰嘴瓶的纸包装结构"这个标题表明了文档的主要内容，即探讨如何利用纸材料来设计一个适合鹰嘴瓶的包装结构。这种包装结构不仅需要保护瓶子，防止在运输和销售过程中破损，同时也要考虑到展示...
鹰嘴纳豆复合压片糖果（食品安全企业标准）.pdf
11-23
鹰嘴纳豆复合压片糖果（食品安全企业标准）.pdf
利用css实现消息提示框效果
weixin_45606890的博客
07-20 1545
* 消息提示框1-start *//* 消息提示框2-start *//* 消息提示框1-end *//* 消息提示框2-end */
CSS 实现 选项卡消息框 和 固定列表消息盒子
cell的博客
04-03 822
选项卡消息框 源码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>position案例</title> <style> html { ...
用CSS实现对话气泡框！
热门推荐
孙婷婷的博客
12-12 2万+
用气泡框图片直接插入即可，但是，图片每次都需要加载，可以用CSS来实现！ 首先，得弄明白，气泡框是怎么实现的。知道了原理之后就可以无限变通啦！！！！ 先来一个基本的气泡框图！ 第一步，首先要有个框！很简单，一个div就可以啦！然后对其div设置相对定位。 HTML： &lt;div class="div"&gt;&lt;/div&gt; CSS: .div{ wid...
css制作网页咨讯框,CSS设计网页边框的几个实例
weixin_36352719的博客
08-03 186
掌握css网页布局技术，网页边框效果的定义是基础内容，其中也涉及到css盒模型知识以及css属性简写知识。相关文章阅读：css设计网页时的一些常用规范实例一：css：p {padding: 15px; border: 1px solid black; }h5{padding: 0px; border: 1px solid red;}xhtml：this is a paragraph that ha...
CSS实现PC端简单的聊天消息气泡样式
qq_41757660的博客
05-14 1809
CSS实现PC端简单的聊天消息气泡样式
css-左三角
qq_41670147的博客
10-31 861
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
纯CSS画一只简单的小鸟
start_XUEBA的博客
07-16 561
用css简单画了一只小鸟，效果图如下： 代码如下： HTML： <div class="box-canvas"> <div class="body"> <div class="head"></div> <div class="wing"></div> </div> <div class="mout
纯CSS制作各种各样的网页图标（三角形、暂停按钮、下载箭头、加号等）
weixin_30730053的博客
03-26 296
三角形 <div class="box"></div> <style>.box{ width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid ...
CSS3 实现未读消息小红点
Wonder233的学习博客
06-07 1万+
&lt;!DOCTYPE html&gt; &lt;html lang="zh-CN"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt; &lt;style&gt; .red-point{
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值