css样式布局的椭圆

<div>方形框</div>

<div class="rounded">圆角形框</div>

<div class="asymmetric-radius">椭圆边形框</div>

<div class="asymmetric-corners">半圆形框</div>

<div class="percentages">圆形框</div>

<div class="sub-properties">单圆角形框</div>

<div class="brackets">小括号形框</div>

<div class="brackets"><span class="inner-brackets">双小括号形框</span></div>

<div class="squarebrackets">中括号形框</div>

 

<style>

    div {

  width:150px;

  /* you can add backround style by yourself */

  height: 150px;

  margin: 10px;

  float: left;

  text-align:center;

  line-height:150px;

  font-size: 24px; color:#FF7B3A;font-family:Microsoft JhengHei;

  border: 10px solid #F54;

}

 

/*

Specify the readius for all corners.

*/

.rounded {

  border-radius: 30px;

}

 

/*

You can use assymetric radius. Just provide horizontal / vertical.

*/

.asymmetric-radius {

  border-radius: 30px / 90px;

}

 

/*

You can specify a distinct radius by corner.

*/

.asymmetric-corners {

  border-radius: 90px 60px 30px 5px;

}

 

/*

You can use percentages...

Hey! It's a circle!

*/

.percentages {

  border-radius: 50%;

}

 

/*

And you can provide them with sub properties.

*/

.sub-properties {

  border-top-left-radius: 10px;

  /* Note there is no / symbol here! */

  border-bottom-right-radius: 80px 40px;

}

 

/*

border-radius is not only used for rounding corners.

*/

.brackets {

  border-top: none;

  border-bottom: none;

  border-radius: 30px / 90px;

}

.inner-brackets {

  border-top: none;

  border-bottom: none;

  border-radius: 20px / 70px;

}

span{

  width:120px;  

  height: 130px;

  margin: 7px;

  float: left;

  border: 8px solid #F54;

  font-size: 18px; color:#FF7B3A;font-family:Microsoft JhengHei;

}

.squarebrackets {

    border: none;

    position: relative;

    width: 150px;

    height: 150px;

    padding: 0;

    margin: 1em;

}

.squarebrackets:before, .squarebrackets:after{

    content: '';

    display: block;

    height: 100%;

    width: 15px;

    border: 8px solid #F54;

    position: absolute;

    top: -5px;

}

.squarebrackets:before{ left: 0; border-right: 0; }

.squarebrackets:after{ right: 0; border-left: 0; }

</style>