用CSS 制作边框圆角线

html-css079

用CSS 制作边框圆角线,第1张

不是的。 一般是通过圆角的图片来完成的。 不过也有纯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>

给你个完整页面，你可以看下效果

------------------------------------------------

<html>

<head>

<title>

Rounded Box Demo

</title>

<style type="text/css">

body {

background-color: #FFF

margin: 0px

padding: 0px

font-size: 16px

font-family: Georgia

}

div.rounded-box {

position:relative

width: 9em

background-color: #C0C0C0

margin: 3px

}

/*********************

GLOBAL ATTRIBUTES

*********************/

div.top-left-corner, div.bottom-left-corner, div.top-right-corner, div.bottom-right-corner

{position:absolutewidth:20pxheight:20pxbackground-color:#FFFoverflow:hidden}

div.top-left-inside, div.bottom-left-inside, div.top-right-inside, div.bottom-right-inside {position:relativefont-size:150pxfont-family:arialcolor:#C0C0C0line-height: 40px}

/*********************

SPECIFIC ATTRIBUTES

*********************/

div.top-left-corner { top:0pxleft:0px}

div.bottom-left-corner {bottom:0pxleft:0px}

div.top-right-corner {top:0pxright:0px}

div.bottom-right-corner {bottom: 0pxright:0px}

div.top-left-inside {left:-8px}

div.bottom-left-inside {left:-8pxtop:-17px}

div.top-right-inside {left:-25px}

div.bottom-right-inside {left:-25pxtop:-17px}

div.box-contents {

position: relativepadding: 8pxcolor:#000

}

</style>

</head>

<body>

<div class="rounded-box">

<div class="top-left-corner"><div class="top-left-inside">•</div></div>

<div class="bottom-left-corner"><div class="bottom-left-inside">•</div></div>

<div class="top-right-corner"><div class="top-right-inside">•</div></div>

<div class="bottom-right-corner"><div class="bottom-right-inside">•</div></div>

<div class="box-contents">

Text goes here<br>

Text goes here<br>

Text goes here<br>

Text goes here<br>

Text goes here<br>

Text goes here<br>

</div><!-- end div.box-contents -->

</div><!-- end div.rounded-box -->

</body>

</html>

有四种方法可以实现圆角。

第一、直接写CSS代码：border-radius

第二、四个圆角贴图；制作四个圆角的图片，然后用css定义

第三、直接制作整个圆角矩形背景

第四、定义12个背景色：左上角4个，右上角4个，右下角4个，左下角4个。