我們的網(wǎng)頁因?yàn)?CSS 而呈現(xiàn)千變?nèi)f化的風(fēng)格。這一看似簡單的樣式語言在使用中非常靈活，只要你發(fā)揮創(chuàng)意就能實(shí)現(xiàn)很多比人想象不到的效果。特別是隨著 CSS3 的廣泛使用，更多新奇的 CSS 作品涌現(xiàn)出來?！禖SS 魔法系列》繼續(xù)給大家?guī)?CSS 在網(wǎng)頁中以及圖形繪制中的使用。這篇文章給大家?guī)淼氖羌?CSS 繪制基本圖形（圓、橢圓等）。

您可能感興趣的相關(guān)文章

• 35個讓人驚訝的 CSS3 動畫效果演示
• Web 前沿：一組極其絢麗的 CSS3 效果
• Web 前沿：那些讓人驚嘆的 CSS3 應(yīng)用
• 十款精心挑選的在線 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; }

　　

您可能感興趣的相關(guān)文章

• CSS3 在網(wǎng)頁設(shè)計(jì)中的20佳驚艷應(yīng)用
• 推薦12個漂亮的 CSS3 按鈕實(shí)現(xiàn)方案
• 推薦10個非常優(yōu)秀的 CSS3 開發(fā)工具
• 分享50個漂亮的 CSS3 最佳應(yīng)用示例
• 24款非常實(shí)用的 CSS3 工具終極收藏

?

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

編譯來源：夢想天空 ◆ 關(guān)注前端開發(fā)技術(shù) ◆ 分享網(wǎng)頁設(shè)計(jì)資源

轉(zhuǎn)載于:https://www.cnblogs.com/lhb25/p/css-and-css3-shapes.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。