CSS3绘图实例代码<br>*{<br> margin:0;<br>padding:0;<br>}<br>body {<br>背景: #fff;<br>}<br>.color1{<br> 背景: #ffb400;<br>}<br>.color2{<br> 背景: #e78500;<br>}<br>.color3{<br> 背景: #bd5d00;<br>}<br>.color4{<br> 背景: #9e3300;<br>}<br>.color5{<br> 背景: #772400;<br>}<br>div{<br> オーバーフロー: 非表示;<br>}<br>.wrapper{<br> 幅:450px;<br> 高さ:450px;<br> 左:50%;<br> 上: 50%;<br> margin:-225px 0 0 -225px;<br> 位置: 絶対;<br>}<br>.top{<br> 幅:48px;<br> 高さ:62px;<br> 上:9px;<br> 左:232px;<br> 位置: 絶対;<br> }<br>.top .right{<br> width:48px;<br> height:62px;<br> border-radius: 35px 40px 0px 0px/15px 70px 10px 0px;<br> z-index: 1;<br> Position:Absolute;<br>}<br>.top . left{<br>幅:160px;<br>高さ:320px;<br>top:7px;<br>left:-93px;<br>z-index:2;<br>border-radius:160px/320px;<br>position:absolute;<br>}<br>.top 。マスク1{<br>幅:40px;<br>高さ:100px;<br>境界半径:40px/100px;<br>背景:#fff;<br>z-index:3;<br>上:0px;<br>左:-32px;<br>位置:絶対; <br>}<br>.top .mask2{<br>幅:200px;<br>高さ:200px;<br>ボーダー半径:200px;<br>背景:#fff;<br>z-index:4;<br>上:55px;<br>左:-92px;<br>位置: 絶対;<br>}<br>.center{<br> width:340px;<br> height:192px;<br> margin:79px 0 0 57px;<br>}<br>.center .box1{<br> width:360px;<br> height:360px;<br> border-radius :180px;<br> margin:0 0 0 -20px;<br>}<br>.center .box1 .box1_1{<br> width:300px;<br> height:400px;<br> border-radius: 200px/300px;<br> margin:-40px 0 0 -20px ;<br>}<br>.center .box2{<br>幅:900px;<br>高さ:900px;<br>背景:#fff;<br>マージン:-265px 0 0 -383px;<br>ボーダー半径:900px;<br>}<br>.bottom{<br>幅:550px;<br>高さ:330px;<br>ボーダー半径:550px/330px;<br>マージン:-75px 0 0 -122px;<br>transform:回転(6度);<br> -webkit-transform:回転(6度);<br> -moz-変換: 回転(6度);<br> -o-変換: 回転(6度); /*Opera*/<br>}<br>.bottom .box1{<br> width:320px;<br> height:600px;<br> border-radius: 320px/600px;<br> margin:-380px 0 0 180px;<br>transform:rotate(5deg);<br> -webkit-transform: 回転(5度);<br> -moz-transform: 回転(5度);<br> -o-transform: 回転(5度); /*Opera*/<br>}<br>.bottom .box2{<br> width:320px;<br> height:600px;<br> border-radius: 320px/600px;<br> margin:35px 0 0 -35px;<br> 変換: 回転(3度);<br> -webkit-transform: 回転(3度);<br> -moz-transform: 回転(3度);<br> -o-transform: 回転(3度); /*Opera*/<br>}<br>.bottom .box3{<br> width:320px;<br> height:600px;<br> border-radius: 320px/600px;<br> margin:30px 0 0 -30px;<br>}<br> http://www.999jiijiu.com/ < div class="box1_1 color1">
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
