3.3 (案例)圆角练习

2017-06-07  本文已影响0人  柒月柒日晴7
圆角练习.png
<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title> New Document </title>
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style type="text/css">
    /*CSS reset*/
    html{color:#000;background:#FFF;}
    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{padding:0;margin:0;}
    table{border-collapse:collapse;border-spacing:0;}
    fieldset,img{border:0;}
    address,caption,cite,code,dfn,em,strong,th,var, optgroup{font-style:inherit;font-weight:inherit;}
    del,ins,a{text-decoration:none;}
    li{list-style:none;}
    caption,th{text-align:left;}
    h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
    q:before,q:after{content:'';}
    abbr,acronym{border:0;font-variant:normal;}
    sup{vertical-align:baseline;}
    sub{vertical-align:baseline;}
    legend{color:#000;}
    input,button,textarea,select,optgroup,option{font-family:inherit; font-size:inherit;font-style:inherit;font-weight:inherit;}
    input,button,textarea,select{*font-size:100%;}
    /*CSS reset*/

    body{margin:0 auto;}
    p{margin:25px auto 0;width:50px;height:50px;background:#d5d2c1;line-height:50px;text-align:center;font-weight:bold;}
    .p1{
/*border-radius:3px;*/
border-top-left-radius:10px 20px;
/*border-top-right-radius:20px ;
border-bottom-left-radius: 30px;*/
/*border-bottom-right-radius: 40px/30px;*/
/*border-radius: 10px 20px 40px 30px;*/
/*border-radius: 10px 20px;*/

    }
    /*
    border-top-right-radius:水平偏移量 垂直偏移量;
    border-radius:水平偏移量/垂直偏移量;
    */
    .p2{border-radius:20px/40px}
    .p3{border-radius:25px 0;}
    .p4{border-radius:25px 0 25px 25px;}
    .p5{border-radius:0 0 0 25px;}
    .p6{width:100px;border-radius:50px/25px;}
    .p7{width:0;height:0;background:transparent;border:25px solid #d5d2c1;border-radius:25px;border-right-color:transparent;}
    .p8{width:0;height:0;background:transparent;border:25px solid transparent;border-radius:25px/10px;border-top-color:red;border-bottom-color:yellow;}
    .p9{
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
    }
    .p10{
        width: 0;
        height: 0;
        background: transparent;
        /*border:25px solid #ccc;*/
        border-style: solid;
        border-width: 25px;
        border-radius: 50%;
        border-right-color:transparent;
        border-top-color:orange;
        border-bottom-color:pink;
        border-left-color:transparent;
    }
  </style>
  <link href="" style="text/css" rel="stylesheet"/> 
 </head>
 <body>
  <p class='p1'>A</p>
  <p class='p2'>B</p>
  <p class='p3'>C</p>
  <p class='p4'>D</p>
  <p class='p5'>E</p>
  <p class='p6'>F</p>
  <p class='p7'>G</p>
  <p class='p8'>H</p>
  <p class='p9'>J</p>
  <p class='p10'>J</p>
 </body>
</html>
上一篇下一篇

猜你喜欢

热点阅读