我們的網頁因為 CSS 而呈現千變萬化的風格。這一看似簡單的樣式語言在使用中非常靈活，只要你發揮創意就能實現很多比人想象不到的效果。特別是隨著 CSS3 的廣泛使用，更多新奇的 CSS 作品涌現出來。《CSS 魔法系列》繼續給大家帶來 CSS 在網頁中以及圖形繪制中的使用。這篇文章給大家帶來的是純 CSS 繪制基本圖形（圓、橢圓等）。

您可能感興趣的相關文章

• 35個讓人驚訝的 CSS3 動畫效果演示
• Web 前沿：一組極其絢麗的 CSS3 效果
• Web 前沿：那些讓人驚嘆的 CSS3 應用
• 十款精心挑選的在線 CSS3 代碼生成工具
• 年度盛宴：2012年最精彩的 CSS3 教程

?

Square

#square {width: 100px;height: 100px;background: red; }

　　

Rectangle

#rectangle {width: 200px;height: 100px;background: red; }

　　

Circle

#circle {width: 100px;height: 100px;background: red;-moz-border-radius: 50px;-webkit-border-radius: 50px;border-radius: 50px; }/* Cleaner, but slightly less support: use "50%" as value */

　　

Oval

#oval {width: 200px;height: 100px;background: red;-moz-border-radius: 100px / 50px;-webkit-border-radius: 100px / 50px;border-radius: 100px / 50px; }/* Cleaner, but slightly less support: use "50%" as value */

　　

Trapezoid

#trapezoid {border-bottom: 100px solid red;border-left: 50px solid transparent;border-right: 50px solid transparent;height: 0;width: 100px; }

　　

Parallelogram

#parallelogram {width: 150px;height: 100px;-webkit-transform: skew(20deg);-moz-transform: skew(20deg);-o-transform: skew(20deg);background: red; }

　　

您可能感興趣的相關文章

• CSS3 在網頁設計中的20佳驚艷應用
• 推薦12個漂亮的 CSS3 按鈕實現方案
• 推薦10個非常優秀的 CSS3 開發工具
• 分享50個漂亮的 CSS3 最佳應用示例
• 24款非常實用的 CSS3 工具終極收藏

?

本文鏈接：CSS 魔法系列：CSS 繪制基本圖形（圓、橢圓等）

編譯來源：夢想天空 ◆ 關注前端開發技術 ◆ 分享網頁設計資源

轉載于:https://www.cnblogs.com/lhb25/p/css-and-css3-shapes.html

總結

以上是生活随笔為你收集整理的CSS 魔法系列：纯 CSS 绘制基本图形（圆、椭圆等）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。