CSS Border (边框)

历时10个多月，学习了这132 个CSS 特效，还不来学习

这132个特效，是我历时10个多月在油管一个一个跟着敲出来的，为了加强记忆，每个练习，我都录制了视频，在这里分享出来给大家。大家可能又会调侃了，你是工作不饱和吧，有时间做这些。其实，我目前工作还是挺饱和的，都是挤出来的。我们是9点上班，我基本7点半就到公司自学了，这样我就有一个半小时的时间来做这些了...

让CSS flex布局最后一行左对齐的N种方法

作者：张鑫旭https://www.zhangxinxu.com/wordpress/2019/08/css-flex-last-align/前言小伙伴们是否还记得，之前小编也发布了几篇关于CSS相关文章不妨一起来回顾回顾：《手把手整理CSS3知识汇总【思维导图】》《关于前端CSS写法104个知识点...

CSS 奇思妙想 background-clip

作者：SbCoco来源：iCSS前端趣闻说起background-clip，可能很多人都很陌生。Clip的意思为修剪，那么从字面意思上理解，background-clip的意思即是背景裁剪。我曾经在从条纹边框的实现谈盒子模型[1]一文中谈到了这个属性，感兴趣的可以回头看看。简单而言，ba...

CSS简单圆角框实现方法

先看下效果图对基于CSS的设计最初的批评意见之一是CSS太死板了，只能建立方框，因此本次我们需要用图形软件创建下面两个图形，一个用于顶部，一个用于底部。接下来我们详细介绍它的实现方法：1.创建一个简单的框标记并输入相关内容<divclass="box"><h2>笑话<...

文档声明:HTML文档的基石

在前端开发的世界里，文档声明虽是一个看似不起眼的细节，却在网页的解析和渲染过程中扮演着至关重要的角色。今天，就让我们深入探讨文档声明的奥秘，揭开它背后的原理和重要性。一、文档声明的定义与作用文档声明，顾名思义，是HTML文档的起始声明，它位于HTML文档的第一行，且必须顶格显示。它的主要作用是告知浏...

CSS 单位指南

在前端开发中，CSS单位的选择直接影响着页面的布局效果和响应式表现。本文将系统介绍CSS中各种单位的特性、使用场景和最佳实践，帮助你做出更明智的选择。一、CSS单位分类全景图CSS单位可分为两大阵营：绝对单位和相对单位，各有其适用场景。以下是它们的分类结构：二、绝对单位：固定且精确（一）像...

CSS3 遮罩

在网页设计中，我们经常需要实现一些特殊的视觉效果来增强用户体验。CSS3遮罩（mask）允许我们通过控制元素的可见区域来创建各种精美的视觉效果。本文将带你全面了解CSS3遮罩的功能和应用。什么是CSS3遮罩？CSS3遮罩是一种通过定义元素的可见区域来控制元素显示的技术。遮罩属性最早出现在...

用css如何实现三角形

在实际编程中我们经常会遇到下拉菜单的下三角和一些特殊的图形，那么这些如何用css来实现呢？例1例2例3原理：仔细想想，原理非常简单，利用CSS的border以及它的属性值transparent来实现三角形,其中最主要的是要明白由于div的高度跟宽度都为0，margin，padding也为0，所以元素...

css 实现各种多边形图案

使用css的border边框属性和宽度高度可以实现各种形状的图形，如下：梯形html:<divclass="trapezoid"></div>css:/*梯形*/.trapezoid{width:80px;height:0;bo...

用css制作头像渐变边框

之前有一个头像渐变边框的需求，当时是全部用的切图，但是不同的地方可能头像大小不一样，切图适配性太差，正好这几日学了下css渐变的各种妙用，想到之前的头像边框其实可以用渐变来实现。当时用到的头像切图：目前想到有两种实现方式：用一个父盒子直接背景线性渐变，然后字里面的头像图片定位在内部就可以了直接用b...