闲来无事，写写图形。当时巩固一下css3吧.。前端小白，写的不好还请前辈多指教。 三角形 圆形 梯形 平行四边形 菱形（实现方法有很多，这里只是两个三角形合并，也就是正三角和倒三角） 椭圆形 ...

效果图: ...

半圆： #circle1 { width: 100px; height: 200px; background-color: #a72525; -webkit-border-radius: 100 ...

我们经常使用一些excel表格来处理数据，在html中，我们可以用table来制成表格。今天来看一下一些不同的方法。 方法一：使用CSS3的background的linear-gradient属性 linear-gradient表示一种线性渐变，指定好开始的坐标，以及线性渐变的参数，就可以实现 ...

一、实现思路 需求：画n个20 x 20的方格，作为元素div的背景图片 思路：利用CSS3的linear-gradient。 首先设置元素的background-size为20px 20px；利用linear-gradient为元素设置渐变的背景图片，分别向上下左右四个方向画0.5px的线 ...

...

目标：实现对号动画，慢慢画出来的感觉； 原理：外层div的背景是一个对号图片，用一个div做遮罩，让遮罩div层从左到右做运动一次即可实现动画，需要注意的是遮罩div的初始位置应该在外层div的外面 ...

border-radius制作半圆与制作圆形的方法是一样的，只是元素的宽度与圆角方位要配合一致，不同的宽度和高度比例，以及圆角方位，可以制作上半圆、下半圆、左半圆和右半圆效果。例如： .semi ...