Demo
subject 几种CSS字体描边和阴影效果
基本方法：
1、-weblit-text-strok：字体描边，非标准方法，浏览器兼容性存在一些问题。好处是这种方法不扩展字体本身，属于在字体内部描出边界，所以字体完全不走样。
2、text-shadow：字体阴影，符合标准规范，现代浏览器普遍支持。重点：可以用重复多次不同偏移量阴影来实现描边效果。但是假如用这种方法来做纯包围式描边（不模糊blur）的话，效果不完美，如果描边宽度比较大的话，斜边的尖角部分会出现“锯齿、缺角”等。
语法：{text-shadow: h-shadow v-shadow blur color;}
4个参数分别表示：水平偏移、垂直偏移、模糊（扩散）、描边的颜色。
我们可以根据实际需要选择，效果如下图：
[img]
by: fanshome
visibility 3501
2023-05-29 14:57 (UTC)
subject 网络收藏夹网站开发过程中PHP正则表达式忘记使用非贪婪模式带来的一次教训
新版favinavi人性化网络收藏夹网站建设初期，还没有开始宣传，就发现访问量开始8小时内达到了大几千，有点喜出望外。可是再看看又发现不对，统计的关键页面的访问量少的可怜，那么访问量都是哪儿来的呢？
没办法，只能老老实实添加详细统计代码来企图发现问题。果然，详细分析后发现了2个重大问题：
1、异常流量主要来自垃圾蜘蛛爬网；
2、异常流量集中在登录页面“https://favinavi.com/login?o=xxx”。
这就奇了怪了，一个登录页面你个蜘蛛要重复爬几千次是几个意思？！
再仔细分析，发现其实每次垃圾蜘蛛访问的url其实不完全相同，参数o后面的内容非常花样繁多，不属于正常情况下应该出现的。
这里解释一下，参数o是为了记录用户登陆前所在页面，万一用户要干点什么的时候却登录超时了的话，一旦登录成功可以立即跳转到登录前的页面，这样做完全是为了用户能有更良好的体验。问题到底出在哪里呢？
最终分析发现，问题出在提取文件名的正则表达式上。
php代码：
$fn=preg_replace("/^(.*)\?.*$/","$1",$_SERVER['REQUEST_URI']);
其本意是想记录用户登录超时前所访问的页面，去掉问号后面不必要的参数，得到一个“纯净”的文件名，初看其实好像也没啥问题。但其实这个正则表达式是有个大问题的。因为登录前所访问页面的参数中是可能包含参数的，说得有点绕，就是uri中问号后面可能还有问号。虽然经过了urlencode，但问号本质上还是问号。那么问题就来了，上面的正则没有使用非贪婪匹配，就会匹配到最后一个问号，前面的$fn就会变成一个已经带了参数的乱七八糟的文件名，由于网站有多个地方需要处理这个纯净$fn，最后再加上原有的访问参数提交。不光是php，还有JavaScript参与，所以最后的结果是login后面的参数越变越多，越来越长，并且绕不出来。爬虫又不是人，会折腾几次发现不对就放弃，它不断地爬啊爬，每次都当成是爬到了一个新的链接，所以就继续爬喽...
这个bug解决起来其实很简单，把正则表达式括号里的内容改成非贪婪模式就对了：
$fn=preg_replace("/^(.*?)\?.*$/","$1",$_SERVER['REQUEST_URI']);
星号后面再跟一个问号，就成了非贪婪匹配，只留下第一个问号前面的内容，就是我想要的“纯净”的文件名了。
by: fanshome
visibility 1897
2023-06-09 13:43 (UTC)
subject Apache2网站安装开通https协议SSL证书
比较简单实用的一种做法是使用certbot，签发证书、安装、配置web服务器（apache/nginx等）、自动更新一条龙。详细介绍请访问cerbot官网：https://certbot.eff.org/
这里简单介绍主要步骤：（以Ubuntu linux server为例）
先安装snapd
sudo apt install snapd
确保安装的是最新版本内核
sudo snap install core; sudo snap refresh core;
使用snapd安装certbot
sudo snap install --classic certbot
sudo ln -s /snap/bin/certbot /usr/bin/certbot
最后，运行cerbot并自动配置apache运行https
sudo certbot --apache
其中，certbot会要求输入域名、email等信息，基本上照做就行。
成功后cerbot会返回如下信息
Successfully received certificate.
Certificate is saved at: /etc/letsencrypt/live/favinavi.com/fullchain.pem
Key is saved at: /etc/letsencrypt/live/favinavi.com/privkey.pem
This certificate expires on 2023-06-26.
These files will be updated when the certificate renews.
Certbot has set up a scheduled task to automatically renew this certificate in the background.
包含证书和密钥文件保存路径，证书过期日期等，并且告诉您可以让certbot在后台自动更新证书。
by: fanshome
visibility 1839
2023-05-21 07:24 (UTC)
Demo
subject 一个纯CSS的最小干扰的渐变色彩虹loading bar
Loading图标，又称“加载中”图标，以往是用gif格式动图来实现。但是gif有一个比较明显的问题，不易调整大小，然后图片一般比较粗糙，颗粒感严重。
现在流行纯css的loading效果，比如不断转圈式、不断跳动式，网上有很多。这里不多做介绍，搜索一下会有很多。
给大家介绍一款动态横条式彩虹loading效果，类似谷歌风格，又超越谷歌的单一颜色Loading Bar，既充分利用了容器顶部的“无用”空间，又不失醒目，用户体验比较好，干扰的感觉最小，同时又感觉酷炫、美观。点击本页红色的“演示”按钮看看吧。
css代码参考自：https://codepen.io/lister/pen/mdrrYJQ
这不是进度条，进度条一般是逐渐填满的形式，有另外的实现方式。
by: fanshome
visibility 2115
2023-05-20 08:35 (UTC)
Demo
subject HTML5时代，使用同一个背景图片的多个链接自动适配不同屏幕宽度的一种方法
在很久很久以前，没有智能手机的时代，写网站只要考虑PC显示屏幕，基本上任何页面元素都只要固定的宽度和高度，比较好处理。
为了提高页面的加载速度，讲究点的方法是：
假如某个页面有多个小图片（比如二十个小图标）需要显示，可以把这二十个小图片合并到一张大图，然后通过背景图片切片的方法（background-position:）来显示不同的小图片，从而极大地提高页面加载速度。
当今时代，适配大大小小各类屏幕成了某种必需，最好能适配超过分辨率的pc大屏幕、普通笔记本电脑、pad、手机等等。虽然网速比从前提高了很多，但是，尽量减少网页图片使用数量依然是提高网页加载速度的必要手段。
有些时候，我们需要为同一类型、同样大小的链接配上不同的图片，此时，假如能够只使用一张图片来解决问题就更好了。例如，某些场合要用户选择不同的浏览器来进行下一步，假设用到以下这一张图片中的5种浏览器：
[img]
需求是：图片能自动适配不同屏幕宽度，使用背景图片方式来分割出5个链接，缩放窗口大小时，图片自动跟着缩放，同时宽高比不变，即保持图片不变形；与此同时，对应的5个链接也要随着背景图片的缩放而同比例缩放。
那么要怎么实现呢？请看以下CSS代码，任何用到宽度、高度的地方都使用百分比，保证缩放比例不变形。
by: fanshome
visibility 1969
2023-06-03 06:09 (UTC)
Demo
subject css实现图标或图片等元素镜像翻转（水平镜像、垂直镜像）
有时候会发现现成的图标很美观，但是和一般习惯不同（或者纯粹不符合个人喜好），比如“分享”图标，一般是一个箭头，但是箭头方向感觉和习惯的相反，这时就需要来个水平镜像。
与其化精力重新画图或寻找合适的图标都太麻烦，不如用css的transform来实现镜像。
正好favinavi的logo非常适合来说明镜像效果，请点击“演示”按钮查看效果。
favinavi.com的logo: [img]
by: fanshome
visibility 3548
2023-05-25 17:06 (UTC)