本文目标：1、掌握text-shadow的用法问题：使用纯div+css实现以下效果附加说明：1、文字总共有4个分别是：Belive Yourself You Can2、文字大小为86px3、右边文字和左边文字的间距为20px4、图片大小 宽为：100px5、阴影的水平平移量为15px,垂直平移量为2，模糊度为20，颜色为#333333具体操作如下：1、准备素材，新建images目录,将图片文件存于此目录，方便管理，素材有2、创建好index.html，写好架构，架构如何分析呢思路分析：1、架构分成上下两
本文目标：1、掌握background-origin背景原点的使用问题：1、实现以下效果，使用纯DIV+CSS，必须使用背景原点background-orgin附加说明：1、每个相框宽500px,高500px，其中border宽20px,里面文字padding为20，边框的大小为20px2、里面的照片必须按照背景图片实现现在来具体操作1、准备素材：根目录创建images文件夹，把相关素材图片都存放与此，素材有2、创建好index.html，写好架构，架构如何分析呢思路分析：1、目标分成上下2部分，每个部分
本文目标：1、掌握background-clip背景裁切的3种实现问题：要求实现以下效果，使用纯DIV+CSS，必须使用background-clip附加说明：1、相框宽度为500px,高500px，其中border宽20px,里面文字padding为20，边框的大小为20px2、里面的图片是当做div的背景图片使用现在来具体操作1、准备素材：根目录创建images文件夹，把相关素材图片都存放与此，素材有2、创建好index.html，写好架构，架构如何分析呢思路分析：1、目标分成上下3部分，每个部分其实
本文目标：1、掌握background-size背景图片大小的几种设置方法问题：1、实现以下效果，使用纯DIV+CSS，必须使用background-size附加说明：1、背景图片大小本身是500*300大小2、div容器宽度600*300大小3、要求整体居中显示现在来具体操作1、准备素材：根目录创建images文件夹，把相关素材图片都存放与此，素材有2、创建好index.html，写好架构，架构如何分析呢思路分析：1、目标由5个div组成，每个div的背景图片都是一样的，只不过背景图片的呈现方式不同2、
本文目标：1、掌握background-image多背景的实现问题：1、实现以下效果，使用纯DIV+CSS，必须使用background-image附加说明：1、整体宽度是1000px，高300px，要求页面居中显示2、背景图片宽，高均为300px3、每张图片都是当做背景图片来呈现的现在来具体操作1、准备素材：根目录创建images文件夹，把相关素材图片都存放与此，素材有2、创建好index.html，写好架构，架构如何分析呢思路分析：1、目标由3个div组成，每个div的背景图片都是一样的，都是3张照片
本文目标：1、掌握CSS中结构性伪类选择器―nth-child的用法问题：1、实现以下效果，且使用纯DIV+CSS，必须使用结构性伪类选择器―first-of-type附加说明：1、整体宽为5002、每个名言标签的间距为20，内部间距为25，字体为cursive现在来具体操作1、准备素材：新建images目录，将素材存放与此，方便管理，该案例中素材为一张文件图片2、创建好index.html，写好架构，架构如何分析呢思路分析：1、目标分为3个部分，每个部分其实就是展示一段名言，左边带一个边框，但是第一个部
实现思路：网格背景，由css3的线性渐变来实现。纸上的打孔，由圆和圆柱组成，多个打孔，可以由box-shadow的平铺来实现。实际代码：12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758<!DOCTYPE html><htm
项目过程中，开始使用了js的requestAnimationFrame方法实现进度条，但是在数据超级多的时候非常影响性能，如此改用css去实现，优化。先贴代码：123456789101112131415161718192021222324252627282930313233343536373839404142<!DOCTYPE html><html lang="en"><head