在线笔记 favinavi - 人性化网络收藏夹

纯CSS3做一个带箭头指向的漂亮的带阴影提示框

分类标签：全部 CSS html javascript php/other IT

by: fanshome 2023-05-29 15:01(UTC)

纯CSS3，不使用图片。先看下最终实现的效果图：

这里以指向右侧的尖形小箭头为例，其它方向请自行修改。

CSS复制代码

.helper{
padding:16px;right:100px;top:200px;border-radius:4px;min-width:80px;
position:fixed;z-index:10;background:#333;color:#fff;
box-shadow:2px 2px 6px 4px rgb(0 0 0 / 34%)
}
.helper-arrow{
width:12px;height:12px;right:-6px;top:calc(50% - 6px);display:block;position:absolute;
background:#f00;transform:rotate(45deg);
box-shadow:2px 2px 6px 4px rgb(0 0 0 / 34%)
}

其中，小箭头部分其实是使用了一个小正方形旋转45°实现的（transform:rotate(45deg);），演示时为了表现的更清楚，特意使用红色突出显示。

实际使用时，把小方块背景色改成和helper一致的背景色即可。

html复制代码

<div class='helper'>
	<div class='helper-arrow'></div>
	<h3>提示/帮助用</h3>
</div>

953

favinavi - 重度网络用户必备在线笔记

CSS背景图片分割之大图小用
为了提高页面加载速度，我们往往需要把一些小图标合并成一个图片文件，然后采用图片分割的方法来呈现，这很容易实现，使用background-position来设定图...
发现一只有趣的蜘蛛——“BSbot”
最近发现有一个有趣的蜘蛛来访，它的User Agent是这么写的： BSbot 1.1 (monthly copyright check - html/js/...
CSS实现倾斜绶带式45°标签
有时候页面需要在某个元素上设置一个醒目的标志，比如“审核中”、“热卖中”、“HOT”等等，此时本样式比较合适。先上图看最终效果。 [img]
几种CSS字体描边和阴影效果
基本方法： 1、-weblit-text-strok：字体描边，非标准方法，浏览器兼容性存在一些问题。好处是这种方法不扩展字体本身，属于在字体内部描出边界，所以...
自用小工具：正则表达式测试是否能匹配字符串
正则表达式写起来不难，但是要做到准确无误却是一个不小的挑战，经常因为一个小疏忽，导致貌似正常而实际上却有bug。尤其是域名或url相关的，特别容易出错，出错...
An example of increasing productivity with the Favinavi web favorites sharing feature
Favinavi’s humanized network favorites provides a sharing function, that is, u...