LENTON'S BLOG
[29天] 再探CSS3D
第29天了，不知道再写些什么了。就再复习复习CSS 3D吧。了解下基本的3D概念，就是二维变三维。从x,y坐标到x,yz坐标。CSS 3D采用左手坐标系伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上。其余的手指指向前方，这样就建立了一个左手坐标系。其中，拇指、食指和其余手指分别代表x，y，z轴的正方向
2022-06-14 18:32:25
839
0
[28天] CSS渐变深度学习
CSS渐变有两种线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向 径向渐变（Radial Gradients）- 由它们的中心定义由于<gradient>数据类型系<image>的子数据类型，<gradient>只能被用于<image>可以使用的地方。因此，linear-gradient() 并不适用于background-color以及类似的使用 <color>数据类型的属性中。
2022-06-13 15:40:45
852
0
[27天] 一条分割线能耍什么花样
这是一条普通的HTML分割线
<hr class="line1">
两条实线
.line1{
border: 0;
border-bottom: 3px double;
}
一条虚线
.line1{
border: 0;
border-bottom: 1px dotted;
}
一条可控线段长度与间距的虚线
.line1{
border: 0;
padding-top: 1px;
background: re
2022-06-12 17:27:50
896
0
[25天] 巧用border-radius实现波浪加载
先看看只用了一个div加上css实现的效果：由于录制gif体积较大，所以只录了加载到一半的效果。先帖上完整代码，如果不好读后面有大致的思路说明：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv=&qu
2022-06-10 16:55:10
887
0
[24天] background-clip实现文字遮罩效果
前言这真是一个屌炸天的新属性，可以发挥想像实现各种镂空效果。目前还没有被所有浏览器支持，Chrome需要添加-webkit-前辍。开胃小菜全文颜色渐变代码超简单：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-
2022-06-09 16:58:12
821
0
[22天] CSS冷门实用特性
一、毛玻璃效果backdrop-filter 可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。下例为一个毛玻璃效果：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
&nbs
2022-06-07 14:53:53
721
0
[20天] 上手Markdown语法
前言
Markdown 是一种轻量级标记语言。 它允许人们使用易读易写的纯文本格式编写文档，然后转换成有效的 XHTML（或者HTML）文档。
由于 Markdown 的轻量化、易读易写特性，并且对于图片，图表、数学式都有支持，许多网站都广泛使用 Markdown 来撰写帮助文档或是用于论坛上发表消息。 如 GitHub、Reddit、Diaspora、Stack Exchange、OpenStreetMap 、SourceForge、简书等，甚至
2022-06-05 14:49:54
900
0
[09天]惊艳的CSS交互动效
很多提高体验的交互效果，CSS就够了。一、加载进度完整代码：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content=&quo
2022-05-25 10:49:47
813
2
[07天]CSS grid布局
一、什么是网格布局CSS 网格布局擅长于将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系（前提是HTML生成了这些区域）。像表格一样，网格布局让我们能够按行或列来对齐元素。 然而在布局上，网格比表格更可能做到或更简单。 例如，网格容器的子元素可以自己定位，以便它们像CSS定位的元素一样，真正的有重叠和层次。二、基本概念2.1 网格容器我们通过在元素上声明 display：grid 或 display：inline-grid 来创建一个
2022-05-23 14:24:00
631
0
CSS选择器x-child,x-of-type系列摘要
:nth-child(an+b) 首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从1开始排序，选择的结果为CSS伪类:nth-child括号中表达式（an+b）匹配到的元素集合（n=0，1，2，3...）。示例：0n+3 或简单的 3 匹配第三个元素。1n+0 或简单的 n 匹配每个元素。（兼容性提醒：在 Android 浏览器 4.3 以下的版本 n 和 1n 的匹配方式不一致。
2019-11-22 09:53:08
2424
0