`
lingzcl_168
  • 浏览: 22988 次
  • 性别: Icon_minigender_2
  • 来自: 江苏
最近访客 更多访客>>
Mr_cheng
社区版块
存档分类
最新评论

网页设计——如何做纯CSS圆角

CSS
阅读更多
方法1：

简洁型css圆角矩形

code1:


<style type="text/css">
.b1,.b2,.b3,.b4,.b1b,.b2b,.b3b,.b4b,.b{}{display:block;overflow:hidden;}
.b1,.b2,.b3,.b1b,.b2b,.b3b{}{height:1px;}
.b2,.b3,.b4,.b2b,.b3b,.b4b,.b{}{border-left:1px solid #999;border-right:1px solid #999;}
.b1,.b1b{}{margin:0 5px;background:#999;}
.b2,.b2b{}{margin:0 3px;border-width:2px;}
.b3,.b3b{}{margin:0 2px;}
.b4,.b4b{}{height:2px;margin:0 1px;}
.d1{}{background:#F7F8F9;}
.k {}{height:300px;}
</style>
</head>

<body>
<div>
<b class="b1"></b><b class="b2 d1"></b><b class="b3 d1"></b><b class="b4 d1"></b>
<div class="b d1 k">
<font style="font-size:26px;color:red; margin:0px 10px;">简洁型css圆角矩形</font>
</div>
<b class="b4b d1"></b><b class="b3b d1"></b><b class="b2b d1"></b><b class="b1b"></b>
</div>

方法2：



无图片实现圆角框

code2:


<style type="text/css">
div.RoundedCorner{}{background:#9BD1FA; width:400px;}
b.rtop, b.rbottom{}{display:block;background: #FFF}
b.rtop b, b.rbottom b{}{display:block;height: 1px;overflow: hidden; background: #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 1px;height: 2px}
</style>
<div class="RoundedCorner">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<br>无图片实现圆角框<br><br>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>

3D圆角矩形:


3D圆角矩形
CODE:


<style type="text/css">
.raised{}{background:transparent;width:40%;}
.raised h1,.raised p{}{margin:0 10px;}
.raised h1{}{font-size:2em;color:#fff;}
.raised p{}{padding-bottom:0.5em;}
.raised .b1,.raised .b2,.raised .b3,.raised .b4,.raised .b1b,.raised .b2b,.raised .b3b,.raised .b4b{}{display:block;overflow:hidden;font-size:1px;}
.raised .b1,.raised .b2,.raised .b3,.raised .b1b,.raised .b2b,.raised .b3b{}{height:1px;}
.raised .b2{}{background:#ccc;border-left:1px solid #fff;border-right:1px solid #eee;}
.raised .b3{}{background:#ccc;border-left:1px solid #fff;border-right:1px solid #ddd;}
.raised .b4{}{background:#ccc;border-left:1px solid #fff;border-right:1px solid #aaa;}
.raised .b4b{}{background:#ccc;border-left:1px solid #eee;border-right:1px solid #999;}
.raised .b3b{}{background:#ccc;border-left:1px solid #ddd;border-right:1px solid #999;}
.raised .b2b{}{background:#ccc;border-left:1px solid #aaa;border-right:1px solid #999;}
.raised .b1{}{margin:0 5px;background:#fff;}
.raised .b2, .raised .b2b{}{margin:0 3px;border-width:0 2px;}
.raised .b3, .raised .b3b{}{margin:0 2px;}
.raised .b4, .raised .b4b{}{height:2px; margin:0 1px;}
.raised .b1b{}{margin:0 5px; background:#999;}
.raised .boxcontent{}{display:block;background:#ccc;border-left:1px solid #fff;border-right:1px solid #999;}
</style>
</head>

<body>

<div class="raised">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="boxcontent">
<h1>3D圆角矩形</h1>
</div>
<b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b>
</div>

反向css圆角矩形:


反向css圆角矩形
CODE:


<style type="text/css">
.serif {}{
   background: transparent; width:40%;
   }
.serif h1, .serif p {}{
   margin:0 10px;
   }
.serif h1 {}{
   font-size:2em; color:#fff;
   }
.serif p {}{
   padding-bottom:0.5em;
   }
.serif .b1, .serif .b2, .serif .b3, .serif .b4 {}{
   display:block;
   overflow:hidden;
   font-size:1px;
   }
.serif .b1, .serif .b2, .serif .b3 {}{
   height:1px;
   }
.serif .b2, .serif .b3 {}{
   background:#fc0;
   border-left:1px solid #fff;
   border-right:1px solid #fff;
   }
.serif .b4 {}{
   background:#fc0;
   border-left:1px solid #fff;
   border-right:1px solid #fff;
   }
.serif .b1 {}{
   margin:0; background:#fff;
   }
.serif .b2 {}{
   margin:0 1px;
   border-width:0 2px;
   }
.serif .b3 {}{
   margin:0 3px;
   }
.serif .b4 {}{
   height:2px;
   margin:0 4px;
   }
.serif .boxcontent {}{
   display:block; 
   background:#fc0;
   border-left:1px solid #fff;
   border-right:1px solid #fff;
   margin:0 5px;
   }

</style>

<div class="serif">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="boxcontent">
<h1>反向css圆角矩形</h1>
</div>
<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
</div>

略带菱形的css圆角:


略带菱形的css圆角矩形
CODE:


<style type="text/css">
.curved {}{
   background:transparent;
   width:40%;
   }
.curved h1, .curved p {}{
   margin:0 10px;
   }
.curved h1 {}{
   font-size:2em;
   color:#fff;
   }
.curved p {}{
   padding-bottom:0.5em;
   }
.curved .b1, .curved .b2, .curved .b3, .curved .b4 {}{
   display:block;
   overflow:hidden;
   height:1px;
   font-size:1px;
   }
.curved .b2, .curved .b3, .curved .b4 {}{
   background:#e0cea3;
   border-left:1px solid #fff;
   border-right:1px solid #fff;
   }
.curved .b1 {}{
   margin:0 4px;
   background:#fff;
   }
.curved .b2 {}{
   margin:0 4px;
   height:2px;
   }
.curved .b3 {}{
   margin:0 3px;
   }
.curved .b4 {}{
   margin:0;
   height:1px;
   border-width:0 3px 0 3px;
   }
.curved .boxcontent {}{
   display:block;
   background:#e0cea3;
   border:0 solid #fff;
   border-width:0 1px;
   }
</style>

<div class="curved">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="boxcontent">
<h1>略带菱形的css圆角矩形</h1>
</div>
<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
</div>

特殊CSS圆角：


特殊css圆角矩形
CODE：


<style type="text/css">
.pillar {}{
   background:transparent;
   width:40%;
   }
.pillar h1, .pillar p {}{
   margin:0 10px;
   }
.pillar h1 {}{
   font-size:2em;
   color:#fff;
   }
.pillar p {}{
   padding-bottom:0.5em;
   }
.pillar .b1, .pillar .b2, .pillar .b3, .pillar .b4 {}{
   display:block;
   overflow:hidden;
   font-size:1px;
   }
.pillar .b1, .pillar .b2, .pillar .b4 {}{
   height:1px;
   }
.pillar .b2, .pillar .b3 {}{
   background:#d66;
   border-left:1px solid #fff;
   border-right:1px solid #fff;
   }
.pillar .b4 {}{
   background:#d66;
   border-left:4px solid #fff;
   border-right:4px solid #fff;
   }
.pillar .b1 {}{
   margin:0 2px;
   background:#fff;
   }
.pillar .b2 {}{
   margin:0 1px;
   border-width:0 1px;
   }
.pillar .b3 {}{
   height:2px;
   margin:0;
   }
.pillar .b4 {}{
   margin:0 2px;
   }
.pillar .boxcontent {}{
   display:block;
   background:#d66;
   border-left:1px solid #fff;
   border-right:1px solid #fff;
   margin:0 5px;
   }
</style>

<div class="pillar">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b2"></b><b class="b4"></b>
<div class="boxcontent">
<h1>特殊css圆角矩形</h1>
</div>
<b class="b4"></b><b class="b2"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
</div>        
分享到：
FCKeditor编辑器
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    curvycorner——纯javascript的圆角边框设计

    纯javascript的圆角边框设计，通杀主流的浏览器(FF,IE,Safri,Chrome)，比纯CSS实现的圆角来得更简单。

    可变高宽的圆角框————html+css

    可变高宽的圆角框，html+css！圆角技术

    《CSS设计彻底研究》光盘源码

    　2.6　日与夜——包含圆角的设计　 　2.7　Si6—— 包含倾斜的设计　 　2.8　清茶时光——装饰性设计　 　2.9　爱之空气——流体布局　 　2.10　谷香——食品主题设计　 　2.11　城市——建筑主题设计　 　2.12　...

    css设计彻底研究 源代码

    　2.1　“CSS禅意花园”简介　2.2　郊野——两列布局　2.3　像素画——三列布局　2.4　百合池塘——三列布局变体　2.5　郁金香——多列布局　2.6　日与夜——包含圆角的设计　2.7　Si6——包含倾斜的设计　2.8　清茶...

    网页设计与制作——Flash.Dreamweaver.Firework

    中文名: 网页设计与制作——Flash Dreamweaver Firework 作者: 吴超英 资源格式: PDF 版本: 文字版 出版社: 高等教育出版社书号: 9787040151572发行时间: 2004年01月 地区: 大陆 语言: 简体中文 简介: 内容简介...

    《CSS设计彻底研究》【中文PDF＋源代码】

    《CSS设计彻底研究》适合需要使用CSS的Web设计人员和开发人员阅读，最好具备一定的HTML和网页设计制作基础。 CSS：像艺术家一样浪漫，像工程师一样严谨； 核心原理、技巧与设计实战； 剖析CSS原理4大核心：盒子...

    让IE兼容css3圆角

    如果要想在IE浏览器中实现圆角的效果，我们一般都会采用圆角图片的方式。...让IE支持CSS 3的解析方法有很多种，下面介绍一种实用的让IE支持CSS 3解析的方法——IE利用VML矢量可标记语言作为画笔绘出圆角：

    joesleung#Growing#I Give You My CSS3 Heart——CSS3绘制心型1

    使用CSS3强大的圆角（border）属性，配合CSS中的:before伪元素就可以轻松绘制一个“心”型图案，省去了加载图片，并且可以自定义颜色等。在不支持CS

    CSS网站布局实录 （第二版）PDF版

    1.6.10 使用CSS设计只能做出简单的网页吗 1.7 面向现在与未来的设计 1.7.1 Web标准与Web 2.0 1.7.2 用户体验技术 1.7.3 用户体验设计的发展趋势 第2章 XHTML与CSS基础 2.1 XHTML基础 2.2 选择合适的DTD 2.3 选择合适...

    CSS3中border-radius属性设定圆角的使用技巧

    border-radius CSS3中的代表——第一个在社区中得到广泛使用新属性。这意味着，除去Internet Explorer 8及更低版本，所有的浏览器可以显示圆角。为了使样式能正确应用，需要为Webkit和Mozilla内核添加前缀。 CSS ...

    js+css实现的圆角边框TAB选项卡滑动门代码分享（2款）

    实例包含两款CSS圆角代码，可鼠标点击，也可鼠标移动上去显示效果，分享给大家供大家参考。具体如下： 运行效果图：——————-查看效果——————- 小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。...

    web开发-css完整笔记

    边框样式设置——圆角边框，内边距演示，边框的样式，对每一条边框设置样式 基本选择器——before&after,first_line,first_letter,selection,基本选择器 结构伪类选择器——empty,first_child,nth_child&nth_last_...

    CSS3 text shadow字体阴影效果

    最近在整理学习CSS3的一些小知识，现在已经整理了CSS3选择器，CSS3圆角和CSS3元素阴影属性的使用方法了。今天为大家整理一下CSS3中的文字阴影——text-shadow的使用方法。希望能对大家有所帮助吧。 一、text-shadow...

    CSS3教程(1):什么是CSS3

    尽管把玩CSS3是很有趣的事情——就像接下来我要演示的几篇教程中表现的那样，但是需要了解的是，CSS3并没有被当前浏览器完全的支持。也就是说，如果你要在你的网站中使用CSS3，请确认有针对不支持CSS3的浏览器的兼容...

    javascript经典效果示例

    02:___CSS使用图片完美修饰的全兼容圆角框 03:___CSS制作的类似相册浏览的功能 04:___CSS完成神奇创意的相框 05:___CSS实现自适应的图片背景边框 06:___CSS将图片自动变为圆角 07:___CSS强制等比例缩小图片 08:___...

Magicbox
Global site tag (gtag.js) - Google Analytics