前言
“等风来不如追风去，追逐的过程就是人生的意义”。
借朋友吉言，“2018在头条，2019成为头条”，这就是我2019的目标，我已经在追风的路上。你呢？不要停下脚步，继续前行吧。
今天来个实用的小知识，看下图：
很多人看到左右的波浪边框，第一想法，应该是用图片实现。现在我们就打破这一想法，用CSS搞定这个效果。
radial-gradient()
radial-gradient()
2024年10月22日
“等风来不如追风去，追逐的过程就是人生的意义”。
借朋友吉言，“2018在头条，2019成为头条”，这就是我2019的目标，我已经在追风的路上。你呢？不要停下脚步，继续前行吧。
今天来个实用的小知识，看下图：
很多人看到左右的波浪边框，第一想法，应该是用图片实现。现在我们就打破这一想法，用CSS搞定这个效果。
radial-gradient()
2024年10月22日
在我们的日常生活中，各种各样的条纹图案随处可见，那么我们用CSS又该怎样实现呢？
假设我们有一条基本的垂直线性变化，颜色由red过渡到green。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>条纹背景</title>
<style>
.box{
width: 300px;
height: 300px;
background: linear-gradient(red, blue);
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>2024年10月22日
本文将使用CSS3动画keyframes创建一个页面加载器，加载时带着三个黄色圆点破浪形移动。它将向您展示如何为加载页面设计HTML样式，创建动画的keyframes，并使用keyframes的动画延迟。
以下是你将在本教程结束时制作的内容。
图中的三个黄色圆点，在页面加载过程中，呈现波浪形的跳动。
首先，先创建一个基本的html文件：
<p>A simple representation of an animated bouncing loader!</p>
2024年10月22日
使用css的border边框属性和宽度高度可以实现各种形状的图形，如下：
html:
<div class="trapezoid"></div>2024年10月22日
一 css盒模型
所有html元素都可以被认为是盒子. css盒模型代表网站的设计和布局.它由边距(margin),边框(border),填充(padding)和实际内容组成.
属性以相同的顺序工作:顶部(top),右侧(right),底部(bottom)和左侧(left)
二 认识盒模型
网页的每个元素都是一个盒子.
css通过盒模型来确定一个元素的大小以及如如何放置它们.
2024年10月22日
今天学习下css的盒子模型，这是一种布局模式，所谓盒子模型，就是将所有元素表示为一个个矩形的盒子（box）。CSS 决定这些盒子的大小、位置以及属性（例如颜色、背景、边框尺寸）。
一个CSS盒子模型主要由以下几个部分组成：
2024年10月22日
2024年10月22日
CSS3在原有CSS的基础上，为背景添加了三个属性，这三个属性可以调整背景图像的大小，设置背景图像的显示原点，设置背景图像的显示区域。本文小海前端（头条号）就带领大家一同学习与背景有关的CSS3属性。
承接文章：CSS3中取值为颜色的属性，系统了解颜色的原理，轻松掌握颜色取值
技术等级：中级 | 适合有一定的CSS基础的人士阅读。