< HTML LANG = "EN" > < 頭> < メタ文字コード= "UTF-8" > < メタ名= "ビューポート" コンテンツ= "幅=装置幅、初期の規模= 1.0" > < メタHTTP-当量= "X-UA-互換性のある" コンテンツ= "IE =エッジ" > < タイトル>ドキュメント</ タイトル> < スタイル> * { マージン：0 ; パディング：0 ; } .clearfix { ズーム：1 。/ * 为IE6,7的兼容性设置* / } .clearfix：後{ 内容：'' ; 表示：ブロック; 高さ：0 ; 明確な：両方。 可視性：隠されました; } ULのリチウム{ リストスタイル：なし。 フロート：左; マージン：は50px 0は50px 20ピクセル; テキスト整列：センター; } のLi { 背景：赤。 } H2 { マージントップ：20ピクセル。 } .circle1 { 幅：100pxに。 高さ：は50px ; 境界半径：は50pxは50px 0 0 。 行の高さ：は50px ; } .circle2 { 幅：は50px 。 高さ：100ピクセル; 境界半径：0は50pxは50px 0 。 行の高さ：100pxに。 } .circle3 { 幅：100pxに。 高さ：は50px ; 境界半径：0 0PXは50pxは50px 。 行の高さ：は50px ; } .circle4 { 幅：は50px 。 高さ：100pxに。 国境半径：は50px 0 0は50px; 行の高さ：100pxに; } .circle5 { 幅：100ピクセル、 高さ：100pxに、 ボーダーRADIUS ：は50px ; 行の高さ：100pxに; } .demo { / * 左半円* / 位置：絶対; / * クリッププロパティ仕立て絶対配置要素。換言すれば、唯一の位置：絶対時間は有効です。* / 幅：100ピクセル; 高さ：100pxに; ボーダーRADIUS ：は50px ; / * 行の高さ：は50px; * / クリップ：RECT（は50px 100pxに0PX 0PX）; / * のみ正当形状値は：RECT（上、右、下、左）* / } 。右円{ / * 右半円* / 左：200pxの、 クリップ：RECT（0PX 100pxに100pxには50px）; / * のみ正当形状値である：RECT（上、右、下、左）* / } </ スタイル> </ ヘッド> < 身体> <DIV > < H2 >ボーダーRADIUSで実現半円</ H2 > < ULのクラス= "clearfix" > < 李クラス= "CIRCLE1" >上部円</ 李> < 李クラス= "CIRCLE2" >円形の左</ 李> < 李クラス= "circle3行う" >下部円</ 李> < 李クラス= "circle4" >円形の左</ > < クラス= "circle5" >完全な円</ 李> </ UL > < HR > < H2 > CSS3半円達成するために、調整のクリップ方法</ H2 > < Pのスタイル= "色：赤;" >絶対位置決め要素を調整するクリップのプロパティを。換言すれば、唯一の位置：絶対時間は有効です。形状のみが有効な値である：RECT（上、右、下、左）</ P > < ULのクラス= "clearfix" スタイル= "位置：相対;" > < 李クラス= "デモ" >左半円< 李クラス= "右の円のデモ" >右半圆</ 李> < 李> </ 李> </ UL > </ DIV > </ ボディ> </ HTML >
レンダリング：
興味のある友人は、それが調理しようと行くことができます！！！