html5用css做样式边框,纯CSS3实现自定义Tooltip边框 涂鸦风格
本文作者html5tricks，转载请注明出处
这是一款用纯CSS3打造的自定义Tooltip边框的应用，之前我们讨论过如何用CSS3来实现不同样式的Tooltip，今天的这款Tooltip却可以用CSS3来自定义边框，边框呈涂鸦风格。用CSS3实现自定义边框的好处是可以自适应边框内部的文字数量大小。
下面我们来分享一下实现的方法，主要由HTML代码和CSS代码组成。
HTML代码：
HTML代码结构非常简单，仅仅是3个div组成，当然后面的CSS代码才是关键，我们一步步来解说一下。
CSS代码：
.wrap {
padding:35px 25px;
width:450px;
margin:40px auto;
background:#586786;
border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
color:#eee;
box-shadow:1px 1px 0px rgba(0, 0, 0, .75)
}
这个CSS代码定义了最外面的边框，利用border-radius实现边框的圆角效果，同时利用了box-shadow实现类微微的阴影效果，不是很明显，你也可以修个属性值来让阴影变得更加明显一点。
.box {
position:relative;
background:#fff;
border:solid 5px #fff;
width:200px;
height:100px;
margin:0 auto;
border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
padding:10px;
color:#666;
box-shadow:2px 3px 1px rgba(0, 0, 0, .75)
}
.box:before {
content: "";
position: absolute;
bottom: -20px;
left: 60px;
border: 0;
border-right-width: 30px;
border-bottom-width: 20px;
border-style: solid;
border-color: transparent #fff;
display: block;
width: 0;
}
这个box类和之前的类似，不过多了一个特性，就是利用CSS3的:before属性实现了下边框的小三角效果，这样就有tooltip的效果了。
.box .box {
position:absolute;
top:5px;
left:5px;
width:180px;
height:80px;
border-color:#593207;
box-shadow:none;
}
.box .box:before {
left: 45px;
border-color: transparent #593207;
}
这是最内部的box，和它外面那层box实现一样，同样利用before属性实现小三角效果。
其他就是一些边框线颜色和背景颜色的设置，就非常简单了。
html5用css做样式边框,纯CSS3实现自定义Tooltip边框 涂鸦风格相关推荐
- css 圆形背景icon_纯CSS3制作精美的圆形扁平风格图标
这是一组使用纯CSS3制作的精美的扁平风格的圆形图标.这些圆形图标都是使用CSS的伪元素来制作,是一套以家居为主题的图标,包括门窗,邮箱,浴室,台灯书柜等等10个图标. 制作方法 HTML结构 图标的 ...
- 预警展示样式html,纯css3 Tooltip工具提示样式
microtip.css是一款纯css3 Tooltip工具提示样式.microtip.css不用依赖任何js文件,就可以生成时尚的Tooltip效果.它是轻量级的,压缩后的版本小于1kb. 安装 可 ...
- css 边缘闪光_纯css3闪烁动画《发光的边框效果》
纯css3闪烁动画 /* 动画闪烁颜色 */ @-webkit-keyframes greenPulse { from { background-color: #749a02; -webkit-box ...
- html纯css页面滑动效果,纯css3滑动按钮动画效果
android系统的滑动按钮相信大家都使用过.这款插件就是使用纯css3制作出类似android系统的滑动按钮效果. HTML html代码十分简单.使用一个大的div作为包裹容器,给它一个class ...
- css滑动星星评分,纯css3滑动星星打分动画特效
特效描述:纯css3 滑动星星打分动画.纯css3滑动星星打分动画特效 代码结构 1. 引入CSS 2. HTML代码 基本样式: Basic star rating: 5 stars 4 stars ...
- html5 圆形加载进度条,纯css3超酷圆形Loading加载进度条特效
这是一款效果炫酷的纯css3圆形Loading加载进度条特效插件.该loading特效使用:before和:after伪元素来制作动画d的不同部分,然后给他们设置absolute定位和CSS tran ...
- 全屏响应式html5+jquery幻灯片轮播特效,纯CSS3超酷全屏响应式幻灯片特效
这是一款效果非常炫酷的纯CSS3全屏幻灯片特效.该幻灯片特效的效果类似于全屏水平方向的单页滚动效果.该幻灯片效果使用纯CSS3制作,代码仅有100多行,非常的小巧. 制作方法 HTML结构 整个幻灯片 ...
- html5加载文字特效免费,纯CSS3创意loading文字特效
这是一款非常有创意的纯CSS3 loading加载文字动画特效.该loading文字特效中,字母O的内圆会不停的放大缩小,使用这个动画效果来提示用户当前的页面或任务正在加载中. 使用方法 HTML结构 ...
- css元素发光效果图,纯CSS3实现圆圈动态发光特效动画的示例代码
本文主要介绍了纯CSS3实现圆圈动态发光特效动画的示例代码,分享给大家,具体如下: 效果图: 代码: 纯CSS3实现圆圈动态发光特效动画 body { background-color: #00000 ...
最新文章
- 如何评价CVPR 2021的论文接收结果？
- 搭建LAMP环境示例
- 51nod1092(lcs简单运用/dp)
- 二分查找法---java实现
- objective-c 编程总结（第六篇）运行时操作 - 方法交换
- 魔兽世界阿拉索人数最多服务器,魔兽世界8.3哪个区人多_wow8.3服务器人数统计介绍_3DM网游...
- java中scanner与hashmap_Java中HashMap的使用练习
- python乐观锁代码实现_Django的乐观锁与悲观锁实现
- vivo6.0系统怎么样不用root激活XPOSED框架的方法
- 诺基亚首款5G手机正式发布！还有Nokia 5310经典再现
- C++设计模式详解之抽象工厂模式解析
- iphone天行连接不上服务器未响应,天行连接不上 - 卡饭网
- SQLServer 可更新订阅数据冲突的一个原因
- CI框架主题切换的功能
- HG8240电信光猫禁用TR069之修改配置法
- Java初学者可以实现的简单小程序（建议收藏学习）
- Android中读取图片EXIF元数据之metadata-extractor的使用
- html链接屏蔽了,js屏蔽广告/屏蔽网站元素/屏蔽网站超链接
- 【安卓小程序】仿微信页面
- 搭建tileserver-gl地图服务