閑來無事，寫寫圖形。當時鞏固一下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 ...