在css中怎样让边角具有弧度

html-css023

在css中怎样让边角具有弧度,第1张

在css中，让边角具有弧度只需要用border-radius这个属性。

如图，这是一个测试页面，它们的边角分别为25PX和50PX半径的圆角。

写法像这样：

border-radius:25px

测试代码如下

<div style="border-radius:25px"></div>

<div style="border-radius:50px"></div>

div{

width:200px

height:130px

background-color:wheat

margin-bottom:10px

}

拓展资料-css3简介

在CSS3推出前，圆角效果需要用图片实现，下面简要介绍CSS3。

CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。

CSS演进的一个主要变化就是W3C决定将CSS3分成一系列模块。浏览器厂商按CSS节奏快速创新，因此通过采用模块方法，CSS3规范里的元素能以不同速度向前发展，因为不同的浏览器厂商只支持给定特性。但不同浏览器在不同时问支持不同特性，这也让跨浏览器开发变得复杂。

不是的。 一般是通过圆角的图片来完成的。 不过也有纯CSS代码制作的圆角边框，不过不如圆角图片来的自然。

给你参考一个这样的代码，你可以试试看效果。

<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>