给你一个类似的吧,我学CSS3时候的小练习,画云的
效果图:
代码:
* {margin: 0
padding: 0
}
body {
background: #ccc
}
#cloud {
width: 330px
height: 120px
background: #f2f9fe
background: -webkit-linear-gradient(top, #f2f9f3 5%, #d6f0fd 100%)
background: -moz-linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%)
background: -ms-linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%)
background: -o-linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%)
background: linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%)
border-radius: 100px
position: relative
margin: 120px auto 20px
}
#cloud:after, #cloud:before {
content: ""
position: absolute
background: #f2f9fe
z-index: -1
}
#cloud:after {
width: 100px
height: 100px
top: -50px
left: 50px
border-radius: 100px
}
#cloud:before {
width: 180px
height: 180px
top: -90px
right: 50px
border-radius: 200px
}
.shadow {
width: 350px
position: absolute
bottom: -10px
background: #000
z-index: -1
box-shadow: 0 0 25px 8px rgba(0, 0, 0, 0.4)
border-radius: 50%
-webkit-border-radius: 50%
} <div id="cloud"><span class='shadow'></span></div>
我们在 外贸建站 教程中介绍过:如何在 WordPress托管主机 (譬如 SiteGround )中一键开通Cloudflare CDN,以便增加 网站安全 和 提升网站访问速度 ,但是,如果你的主机不提供 一键开通Cloudflare CDN 功能怎么办呢?跟着本篇教程做,一点也不难。
本篇教程适合这类网站:你的网站所在的主机不提供免费CDN功能,譬如Cloudways主机,但你又想开通Cloudflare CDN。
步骤概要:
举几个实际案例,可能有跟你一样的情况,如果不想看就跳到下文看教程
注册Cloudflare
账户创建完成后,请添加你的网站域名到cloudflare中
添加站点
接下来我们选择免费计划并继续,免费计划就包含了DDOS共计缓解、全球内容分发网络(cdn)。
开通免费计划
然后系统会自动扫描你的站点查找已有的DNS记录,也就是解析记录,并导入到Cloudflare中,免去你重复配置的功夫。
扫描已有的DNS记录
当扫描完成后,进入如下界面,会呈现你已有的解析记录,但是由于我的演示网站是个全新的域名,所以下图中没有解析记录。如果你看到解析记录的代理状态是橙色云朵,表示开启了CDN;如果是灰色云朵,表示仅做解析用途,不会给予保护和CDN。我们点击继续按钮
在接下来的弹出窗中,由于我没有添加任何记录,系统提示我以后要添加解析记录,这样才能顺利访问网站,我们点击确认继续。
最后,Cloudflare告诉你如何修改名称服务器,也就是域名服务器(NS)。请登录到你现有的域名注册处,将已有的NS删除,新增Cloudflare提供给你的NS,通常更换NS全部生效需要24h,一旦生效,Cloudflare也会给你发送邮件通知。
我的域名是在阿里云注册的,以阿里云为例,我们来学习如何修改域名服务器。如果你在porkbun、namesilo注册的域名,可以查看这篇教程: 如何使用NS进行域名解析
首先,在域名管理页面,点击域名右侧的管理按钮
进入域名基本信息界面,找到修改DNS,点击进入
继续点击修改DNS服务器
然后填入cloudflare提供给你的两条NS记录并确认保存
保存成功后,你将看到当前DNS服务器已经成功修改了。
如果你想查看域名解析是否生效,可以通过网站 https://www.whatsmydns.net/#NS/ ,输入域名查看NS生效与否。
如果域名成功添加到cloudflare,你会收到邮件通知。
完成域名服务器修改后,回到cloudflare,点击下图所示的完成,检查名称服务器按钮继续。
接下来有个快速入门指南
第1项,提高安全性。
这是与HTTPS相关的,当你给网站安装SSL证书后,可以启用自动HTTPS重写,以避免网站里有http和https混合的情况,如果你的网站还安装SSL证书,那就不要开启了。
第2项,优化性能。
通常我们使用 WordPress建站 的话,建议安装诸如 WP Rocket 缓存插件,它们都提供了js、css、html文件缩小功能,所以可以不勾选。
第3项,摘要。这是对前面两项配置的总结,确认无误后,点击完成即可。
此时你将跳转到这几个域名的配置管理界面,请点击图中的DNS去配置解析记录。
由于我的域名是一个崭新的、未曾做任何解析记录的域名,所以,在DNS页面,没有任何解析记录。如果你的域名在原解析处有解析记录,那么将会自动同步过来。
接下来,如果我们要将域名指向网站所在的服务器,来添加一条A记录,如下图所示,我将配置loyseo.top指向到cloudways服务器
同理,如果你的邮箱是网易、腾讯或阿里企业邮箱,你也将获得邮箱解析记录,将他们添加到Cloudflare中即可。
最后,如果你的网站安装了SSL,启用了https,那么如下图所示,将SSL/TLS页面中的模式设为完全(严格)。
相关教程: