css的圆角代码是什么

2023-04-17 10:14:02html-css027

css的圆角代码是什么,第1张

图片的话需要用PS做成圆角

不过纯CSS也可以做出圆角效果

给个代码参考下<html>

<head>

<meta

http-equiv="Content-Type"

content="text/html

charset=gb2312"

<title>CSS圆角</title>

</head>

<style

type="text/css">

body

{

background:

#fff

font-family:

"Lucida

Grande",

Helvetica,

Arial,

sans-serif

font-size:

11px

}

#container

{background:#d8d8ee

width:600px

margin:15px

padding:20px}

.xsnazzy

h1,

.xsnazzy

h2,

.xsnazzy

{margin:0

10px

letter-spacing:1px}

.xsnazzy

{font-size:2.5em

color:#fc0}

.xsnazzy

{font-size:2em

color:#234

border:0}

.xsnazzy

{padding-bottom:0.5em

color:#eee}

.xsnazzy

{padding-top:0.5em

padding-left:10px}

.xsnazzy

{background:

transparent

margin:1em}

www.codefans.net

.xsnazzy

{display:block

width:0

height:0

color:#d8d8ee

overflow:hidden

border-top:12px

solid

#fff

border-left:12px

dotted

transparent

border-right:12px

dotted

transparent

margin-left:50px}

html

.xsnazzy

{width:24px

height:12px

w\idth:0

hei\ght:0}

.xsnazzy

span

{display:block

width:0

height:0

color:#fff

overflow:hidden

border-top:10px

solid

#7f7f9c

border-left:10px

dotted

transparent

border-right:10px

dotted

transparent

margin-left:52px

margin-top:-15px}

html

.xsnazzy

span

{width:20px

height:10px

w\idth:0

hei\ght:0}

.xb1,

.xb2,

.xb3,

.xb4,

.xb5,

.xb6,

.xb7

{display:block

overflow:hidden

font-size:0}

.xb1,

.xb2,

.xb3,

.xb4,

.xb5,

.xb6

{height:1px}

.xb4,

.xb5,

.xb6,

.xb7

{background:#ccc

border-left:1px

solid

#fff

border-right:1px

solid

#fff}

.xb1

{margin:0

8px

background:#fff}

.xb2

{margin:0

6px

background:#fff}

.xb3

{margin:0

4px

background:#fff}

.xb4

{margin:0

3px

background:#7f7f9c

border-width:0

5px}

.xb5

{margin:0

2px

background:#7f7f9c

border-width:0

4px}

.xb6

{margin:0

2px

background:#7f7f9c

border-width:0

3px}

.xb7

{margin:0

1px

background:#7f7f9c

border-width:0

3px

height:2px}

.xboxcontent

{display:block

background:#7f7f9c

border:3px

solid

#fff

border-width:0

3px}

#picture

{width:600px

height:400px

background:url()

center

top

padding:80px

20px

margin:15px}

</style>

<body>

<div

id="container">

<div

class="xsnazzy">

class="xb1"></b><b

class="xb2"></b><b

class="xb3"></b><b

class="xb4"></b><b

class="xb5"></b><b

class="xb6"></b><b

class="xb7"></b>

<div

class="xboxcontent">

<h1>Chunky

Borders</h1>

<h2>3

pixel

rounded

borders

without

images</h2>

</div>

class="xb7"></b><b

class="xb6"></b><b

class="xb5"></b><b

class="xb4"></b><b

class="xb3"></b><b

class="xb2"></b><b

class="xb1"></b>

</div>

<div

class="xsnazzy">

class="xb1"></b><b

class="xb2"></b><b

class="xb3"></b><b

class="xb4"></b><b

class="xb5"></b><b

class="xb6"></b><b

class="xb7"></b>

<div

class="xboxcontent">

<p>sdfssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</p>

</div>

class="xb7"></b><b

class="xb6"></b><b

class="xb5"></b><b

class="xb4"></b><b

class="xb3"></b><b

class="xb2"></b><b

class="xb1"></b>

</div>

<div

id="picture">

<div

class="xsnazzy">

class="xb1"></b><b

class="xb2"></b><b

class="xb3"></b><b

class="xb4"></b><b

class="xb5"></b><b

class="xb6"></b><b

class="xb7"></b>

<div

class="xboxcontent">

<h1>For

non-IE6

browsers</h1>

<h2>Csfsfsfsdfdsf</h2>

<h1>AND

NOW

FOR

IE6

WELL</h2>

<p>sfsdfsdfsdfsdfdsfsfsdfsdfsf。</p>

</div>

class="xb7"></b><b

class="xb6"></b><b

class="xb5"></b><b

class="xb4"></b><b

class="xb3"></b><b

class="xb2"></b><b

class="xb1"></b>

</div>

</body>

</html>

方法一：CSS3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns=" http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" /><meta http-equiv="Content-Language" content="utf-8" /><meta name="robots" content="all" /><meta name="author" content="Tencent-ISRD" /><meta name="Copyright" content="Tencent" /><title>Border-radius</title></head><body><div style="border-width: 1pxborder-style: solid-moz-border-radius: 11px-khtml-border-radius: 11px-webkit-border-radius: 11pxborder-radius: 11pxpadding:5px">在Firefox和Safari 3的浏览器里能看到圆角效果</div></body></html>方法二：CSS2 先做好四个圆角背景图，再定义四个角的类，如：.TL .TR .BL .BR。四个角使用绝对定位，定位在层的左上、右上、左下、右下位置

有几个例子分割线隔开

html>

<head>

<title>css圆角效果</title>

div.RoundedCorner{background: #9BD1FA}

b.rtop, b.rbottom{display:blockbackground: #FFFFFF}

b.rtop b, b.rbottom b{display:blockheight: 1pxoverflow: hiddenbackground: #9BD1FA}

b.r1{margin: 0 5px}

b.r2{margin: 0 3px}

b.r3{margin: 0 2px}

b.rtop b.r4, b.rbottom b.r4{margin: 0 1pxheight: 2px}

</style>

</head>

<body>

无图片实现圆角框

</div>

<br>

<br>无图片实现圆角框<br><br>

</div>

........................................................

.b1 {height:1pxfont-size:1pxoverflow:hiddendisplay:blockbackground:#9BD1FAmargin:0 5px}

.b2 {height:1pxfont-size:1pxoverflow:hiddendisplay:blockbackground:#fff

border-right:2px solid #9BD1FAborder-left:2px solid #9BD1FAmargin:0 3px}

.b3 {height:1pxfont-size:1pxoverflow:hiddendisplay:blockbackground:#fff

border-right:1px solid #9BD1FAborder-left:1px solid #9BD1FAmargin:0 2px}

.b4 {height:2pxfont-size:1pxoverflow:hiddendisplay:blockbackground:#fff

border-right:1px solid #9BD1FAborder-left:1px solid #9BD1FAmargin:0 1px}

</style>

接着看页面代码：

<br>ssadfsadfsdfdf</br>

当然你也可以用其他的标签<div>或者<span><a>之类，应该也是可以的

.............................................................................

div#nifty{margin: 0 10%background: #9BD1FAwidth: 300pxword-break:break-all}

b.rtop, b.rbottom{display:blockbackground: #FFF}

b.rtop b, b.rbottom b{display:blockheight: 1pxoverflow: hiddenbackground: #9BD1FA}

b.r1{margin: 0 5px}

b.r2{margin: 0 3px}

b.r3{margin: 0 2px}

b.rtop b.r4, b.rbottom b.r4{margin: 0 1pxheight: 2px}

</style>

家穷人丑一米四九，<br>

小学文化农村户口。<br>

破屋三间病猪一头，<br>

冷锅热灶老婆没有。<br>

今日上网广征女友，<br>

革命道路并肓携手。

</span>

..........................................

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

<p>看看吧<br />http://www.ebookit.cn/index.html</p>

<h2>不使用图片的边框</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>

</div>

//网络转载…

.........................................................

<!--

#ibox01 {

overflow: hidden

height: 1px

margin-right: 5px

margin-left: 5px

background-color: #CC0000

}

#ibox02 {

height: 1px

margin-right: 3px

margin-left: 3px

border-right-width: 2px

border-left-width: 2px

border-right-style: solid

border-left-style: solid

border-right-color: #CC0000

border-left-color: #CC0000

overflow: hidden

}

#ibox03 {

height: 1px

margin-right: 2px

margin-left: 2px

border-right-width: 1px

border-left-width: 1px

border-right-style: solid

border-left-style: solid

border-right-color: #CC0000

border-left-color: #CC0000

overflow: hidden

}

#ibox04 {

overflow: hidden

height: 1px

margin-right: 1px

margin-left: 1px

border-right-width: 1px

border-left-width: 1px

border-right-style: solid

border-left-style: solid

border-right-color: #CC0000

border-left-color: #CC0000

}

#ibox05 {

overflow: hidden

height: 1px

margin-right: 1px

margin-left: 1px

border-right-width: 1px

border-left-width: 1px

border-right-style: solid

border-left-style: solid

border-right-color: #CC0000

border-left-color: #CC0000

}

#boxcon {

border-right-width: 1px

border-left-width: 1px

border-right-style: solid

border-left-style: solid

border-right-color: #CC0000

border-left-color: #CC0000

}

.testlayer {

height: 200px

width: 300px

}

.testboxbg {

background-color: #666666

}

.testboxcon {

height: 190px

background-color: #666666

position: relative

}

-->

</style>

</div>

</body>

</html>

词库加载错误未能找到文件“E高铁采集器内存溢出ConfigurationDictStopwordstxt”

# 上一篇：长期对着电脑怎么护肤

# 下一篇：css中，照网站做的，想知道，为什么原网页用的背景图片可以显示出来，但我做的显示不出来

推荐阅读

热门文章

最新发布

标签列表

css的圆角代码是什么

给您推荐相同类型的内容：