CSS圆角效果 Snazzy Borders

最新推荐文章于 2025-08-15 10:51:23 发布

hwh4729

最新推荐文章于 2025-08-15 10:51:23 发布

阅读量427

点赞数

分类专栏： css 文章标签： css class border c

css 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用CSS创建圆角边框的技术，无需使用图片，仅通过简单的代码实现，展示了如何利用HTML和CSS来创建美观的页面布局元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果展示：

#xsnazzy h1, #xsnazzy h2, #xsnazzy p {margin:0 10px; letter-spacing:1px;} #xsnazzy h1 {font-size:2.5em; color:#fff;} #xsnazzy h2 {font-size:2em;color:#06a; border:0;} #xsnazzy p {padding-bottom:0.5em;} #xsnazzy h2 {padding-top:0.5em;} #xsnazzy {background: transparent; margin:1em;}</p> <p>.xtop, .xbottom {display:block; background:transparent; font-size:1px;} .xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;} .xb1, .xb2, .xb3 {height:1px;} .xb2, .xb3, .xb4 {background:#ccc; border-left:1px solid #08c; border-right:1px solid #08c;} .xb1 {margin:0 5px; background:#08c;} .xb2 {margin:0 3px; border-width:0 2px;} .xb3 {margin:0 2px;} .xb4 {height:2px; margin:0 1px;}</p> <p>.xboxcontent {display:block; background:#ccc; border:0 solid #08c; border-width:0 1px;}</p>

Snazzy Borders

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

Rounded borders without images

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.

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.

代码：

.xtop, .xbottom {display:block; background:transparent; font-size:1px;}
.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}
.xb1, .xb2, .xb3 {height:1px;}
.xb2, .xb3, .xb4 {background:#ccc; border-left:1px solid #08c; border-right:1px solid #08c;}
.xb1 {margin:0 5px; background:#08c;}
.xb2 {margin:0 3px; border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 {height:2px; margin:0 1px;}

.xboxcontent {display:block; background:#ccc; border:0 solid #08c; border-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>