欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
    大都知道border属性有四个参数,那么border-radius必然也是有四个参数
    我们知道border属性的四个参数分别是border-top,border-right,border-bottom,border-left.(按顺时针方向)
    那么border-radius四个参数是什么了?
    border-radius:上左,上右,下右,下左;
    下面我们利用border-radius绘制一些大家平时常见的图片。
    1.简单的圆形
    <!DOCTYPEhtml>
    <html>
    <head>
    <metacharset="utf-8">
    <title></title>
    <styletype="text/css">
    #div{
    width:200px;
    height:200px;
    background:red;
    border-radius:50%;
    }
    </style>
    </head>
    <body>
    <divid="div">
    </div>
    </body>
    </html>
    效果图:
   
1.png


 
    2.椭圆
    <!DOCTYPEhtml>
    <html>
    <head>
    <metacharset="utf-8">
    <title></title>
    <styletype="text/css">
    #div{
    width:100px;
    height:200px;
    background:red;
    border-radius:50%;
    }
    </style>
    </head>
    <body>
    <divid="div">
    </div>
    </body>
    </html>

2.png


 

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/css3-style/c57198.shtml