按钮边框椭圆效果，不用图片，用css或js怎么做

html-css021

按钮边框椭圆效果，不用图片，用css或js怎么做,第1张

<style type="text/css">

#xsnazzy h1, #xsnazzy h2, #xsnazzy p {margin:0 10pxletter-spacing:1px}

#xsnazzy h1 {font-size:2.5emcolor:#fff}

#xsnazzy h2 {font-size:2emcolor:#06aborder:0}

#xsnazzy p {padding-bottom:0.5em}

#xsnazzy h2 {padding-top:0.5em}

#xsnazzy {background: transparentmargin:1em}

.xtop, .xbottom {display:blockbackground:transparentfont-size:1px}

.xb1, .xb2, .xb3, .xb4 {display:blockoverflow:hidden}

.xb1, .xb2, .xb3 {height:1px}

.xb2, .xb3, .xb4 {background:#cccborder-left:1px solid #08cborder-right:1px solid #08c}

.xb1 {margin:0 5pxbackground:#08c}

.xb2 {margin:0 3pxborder-width:0 2px}

.xb3 {margin:0 2px}

.xb4 {height:2pxmargin:0 1px}

.xboxcontent {display:blockbackground:#cccborder:0 solid #08cborder-width:0 1px}

</style>

<div id="xsnazzy">

<b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>

<div class="xboxcontent">

<h1>Snazzy Borders</h1>

<p>Based on Nifty Corners By Alessandro Fulciniti<br />http://pro.html.it/esempio/nifty/</p>

<h2>Rounded borders without images</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh

euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim

ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl

ut aliquip ex ea commodo consequat.</p>

<p>Duis autem vel eum iriure dolor in hendrerit

in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla

facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent

luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>

</div>

<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>

</div>

用CSS代码设定按钮的圆角样式，这个在css3中才能实现，通过使用border-radius来实现这个效果，不过有浏览器的兼容性问题，-moz(例如 -moz-border-radius)用于Firefox；-webkit(例如：-webkit-border-radius)用于Safari和Chrome；border-radius:5px 15px 20px 25px它的意思就是上的圆角5px，右的圆角15px，下的圆角20px，左的圆角25px，通过例子来实际看下：

<div id="round"></div>

#round {

   padding:10pxwidth:300pxheight:50px

   border: 5px solid #dedede

   -moz-border-radius: 15px     /* Gecko browsers */

   -webkit-border-radius: 15px  /* Webkit browsers */

   border-radius:15px           /* W3C syntax */

}

效果如图：

CSS画正方形长方形很简单，本文就不说了。

一、三角形

1、CSS画等腰三角形

2、画直角三角形：

二、画圆形

注意：border-radius是width/height的一半（50%）。

画半圆：

半圆的画法是把高度设为宽度的一半，并且也只设置左上角和右上角的半径，且半径为宽度的一半。

画四分之一圆：是把高度和宽度设置为相等，只设置一个圆角，其半径等于高度或宽度。

三、画椭圆

斜杠前面的一组四个值分别表示四个角的水平半径；斜杠后面的一组四个值分别表示四个角的垂直半径。

四、平行四边形

margin-left是为了使得平行四边形可以全部在浏览器中显示出来

五、梯形

高度为0。有宽度没高度。

六、五边形、六边形