Online notes favinavi - online bookmark

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

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

Demo

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

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

CSSCopy codes

.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一致的背景色即可。

htmlCopy codes

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

2040

favinavi - for heavy web user Online notes

使用certbot申请泛域名证书以及手动续期
泛域名的证书申请或手动续期需要在dns解析服务器设置相应的txt记录。申请或续期使用同样的certbot命令，如下，记录以备用。
网络收藏夹网站开发过程中PHP正则表达式忘记使用非贪婪模式带来的一次教训
新版favinavi人性化网络收藏夹网站建设初期，还没有开始宣传，就发现访问量开始8小时内达到了大几千，有点喜出望外。可是再看看又发现不对，统计的关键页面的访问...
favinavi为什么会选择微软的bing搜索作为默认的搜索引擎？
这个选择初看有点奇怪，因为论搜索，谷歌是当然的第一选择，而中文搜索，百度又是当仁不让的中文搜索老大，微软的bing虽然做得还不错，但无论从哪方面说，它似乎都不该...
更全面匹配UTF-8中文汉字的正则表达式
网上搜索得到的匹配汉字的正则表达式有一部分并不全面，只匹配了Unicode字符集中\u4E00-\u9FA5范围，并不包含\uF900-\uFA2D这些后期添加...
javascript捕获缺省的组合快捷键，比如CTRL+F
有时候我们需要在网页上捕获用户的按键动作，然后避免执行缺省动作，替换成我们想要执行的程序。下面我们以拦截并接管“ctrl+f”组合键为例，代码如下：
网站开发测试环境启用https，使用自签发ssl证书不是个好主意
如题，即使你折腾了一圈把自签发证书安装好了，最后一步还是会遇到浏览器不认证书的问题（比如最新版的chrome），即便你已经添加了“信任此根证书颁发机构”。带着“...