效果展示背景效果实现效果展示在这里插入图片描述HTML结构直接使用的body作为整个内容的大背景 <body>
</body>
CSS样式<body>元素具有一个从顶部到底部渐变的背景，并且这个渐变背景会在水平方向上循环移动，从而创建一个动态的效果。 body {
displ
......
46
0
0
2024-11-27
我可能不是唯一一个对浏览器的默认设置感到沮丧的开发人员<input type="checkbox">。首先：它不可扩展。在此示例中，字体大小已放大至200%，但复选框仍保持其根大小，即13.333333px：在本教程中，我们将剖析浏览器的默认复选框，看看是否可以做得更好。首先，我们需要使用清除默认样式appearance:none并设置初始大小
......
77
0
0
2024-10-22
目录：
1、自适应椭圆的绘制
2、平行四边形的绘制
3、切角效果
4、梯形标签页
1、自适应椭圆的绘制问题描述：我们知道只要给border-radius设定固定值或百分比就能实现圆角的效果，但椭圆要如何实现呢？实际上我们可以用border-radius单独设定指定水平和垂直半径，形成椭圆角的效果，如下代码的效果就是四个角度是椭圆的角。width:
......
76
0
0
2024-10-21
accent-color 是从 Chrome 93 开始被得到支持的一个不算太新属性。之前一直没有好好介绍一下这个属性。直到最近在给一些系统整体切换主题色的时候，更深入的了解了一下这个属性。简单而言，CSS accent-color 支持使用几行简单的 CSS 为表单元素着色，是的，只需几行代码就可以将主题颜色应用到页面的表单输入。表单元素一直被吐槽很难自定
......
182
0
0
2024-08-17
BEM基本概念BEM — Block Element Modifier is a methodology that helps you to create reusable components and code sharing in front-end development. BEM 是一种命名方法，能够帮助你在前端开发中实现可复用的组件和代码共享。BE
......
212
0
0
2024-08-01
一、基本语法规范选择器 + {一条/N条声明} 选择器决定针对谁修改 (找谁) 声明决定修改什么.。(干什么) 声明的属性是键值对.。使用 ： 区分键值对， 使用 ： 区分键和值。<!DOCTYPE html>
<html lang="en">
<head>
<meta c
......
199
0
0
2024-07-31
引子① VsCode 集成 Sass ✅1.1 安装 Live Sass Compiler 插件Live Sass Compiler 是一个用于实时编译和自动刷新 SCSS 文件的 VS Code 插件。1.2 点击该页的设置按钮1.3 进行配置"liveSassCompile.settings.autoprefix": [
"> 1%",
......
241
0
0
2024-07-03
前端面试实录CSS篇1. CSS 选择器以及优先级?• CSS 选择器 选择器格式优先级权重id 选择器#id100类选择器.classname10属性选择器[title]/[title="one"]10伪类选择器div:hover10标签选择器div1伪元素选择器input::after1子选择器ul>li0后代选择器li a0通配符选择器*0• C
......
344
0
0
2024-06-06
一、 目的通过本文，让大家可以明白清除浮动的原理和几种方法，最后得出一种本文认为最好用的方法。 本文也会同步到我的个人网站。二、 内容简介1、 引入，还原浮动本来的意义
2、 说明，实际开发中常用浮动来做什么
3、 提问，为什么要清除浮动
4、 回答，如何清除浮动以及常用的几种方法
5、 结论，得出本文认为最好用的方法
三、 正文1、 浮动本来的意
......
353
0
0
2024-05-29
摘要本文是一篇关于如何设计优秀的CSS网页布局框架的文章，提供了一些设计指南和具体的代码示例，以帮助读者快速搭建出优秀的网站。文章重点介绍了选择合适的CSS框架、创建网格系统、使网站响应式以及一些其他设计考虑因素。选择合适的CSS框架在设计一个CSS网页布局框架之前，需要先选择一个合适的CSS框架。有许多CSS框架可供选择，例如Bootstrap、Found
......
558
0
0
2024-04-23
各位追求技术的小伙伴们，今天要给大家介绍的是一篇来自.cult的精彩文章，作者Luis Minvielle。.cult是一个位于柏林的开发者社区平台，他们专注于分享职业相关内容，制作原创纪录片，以及分享来自全球开发者的未被讲述的故事。对于那些终于找到了自己热爱的编程工作的开发者们来说，他们常常会遇到一个难题：用编程谋生固然美妽，但当你不得不反复做着相同的任务
......
494
0
0
2024-04-02
写在前面今天写一篇关于tailwindcss 的文章，其实这个css技术已经出现很久了，在一些大型项目很多人也已经在用了，虽然不是说必须要会吧，但是没听说过肯定是不行的，他的操作逻辑应该是和unocss差不多，但是今天我们不写unocss，因为我也没咋看，没有具体的demo给到你们，今天我们就简单的写一个demo看一下tailwindcss的实现优势到底是
......
541
0
0
2024-03-30
在 23 年的 CSS 新特性中，有一个非常重要的功能更新 -- 相对颜色。简单而言，相对颜色的功能，让我们在 CSS 中，对颜色有了更为强大的掌控能力。其核心功能就是，让我们能够基于一个现有颜色 A，通过一定的转换规则，快速生成我们想要的颜色 B。其功能能够涵盖：精简调暗饱和度降低饱和度色度增强调整不透明度反转补充转换对比度调色板完整的教程，你可以看这里
......
507
0
0
2024-03-23
前置知识：要想完成这个特效，就必须要知道一些前置的属性，简单介绍一下吧：animation 、 transform 和 filter 这三个就不多做介绍了，基本上所有的动画都会用到这两个属性。box-shadowbox-shadow：阴影用法：box-shadow: h-shadow v-shadow blur spread color inset ;h-s
......
518
0
0
2024-03-18
原理其实很简单，找一张loading的静态图 旋转即可！ 知识点：transform<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width
......
489
0
0
2024-02-25