一起CSS

当前位置:一起CSS > CSS > 文章正文

3D效果CSS圆角

日期:2008-12-7 分类:CSS

先看效果吧:

CSS圆角

这种3D效果CSS圆角和《流行的CSS圆角》制作方法是一样的,只是左右上下边框颜色不一样,左上浅,右下深,看上去有阴影,因此就产生了这种3D效果。

既然制作方法和《流行的CSS圆角》一样,这里就不啰嗦了,下面给出相应的代码。

XHTML代码:

<div class="box">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="content">
<h1>3D效果CSS圆角</h1>
</div>
<b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b>
</div>

CSS代码:

*{
margin:0;
padding:0;
}
.box{
width:400px;
margin:20px auto;
}
h1{
font-size:2em;
color:#fff;
padding:20px;
text-align:center;
}
b{
display:block;
overflow:hidden;
height:1px;
background:#96C2F1;
border-width:0 1px;
border-style:solid;
}
.b1{
margin:0 5px;
background:#fff;
border:none;
}
.b2{
border-right:#eee;
}
.b3{
border-right:#ddd;
}
.b4{
border-right:#aaa;
}
.b4b{
border-left:#eee;
}
.b3b{
border-left:#ddd;
}
.b2b{
border-left:#aaa;
}
.b2,.b3,.b4{
border-left-color:#fff;
}
.b4b,.b3b,.b2b{
border-right-color:#999;
}
.b2,.b2b{
margin:0 3px;
border-width:0 2px;
}
.b3,.b3b{
margin:0 2px;
}
.b4,.b4b{
height:2px; margin:0 1px;
}
.b1b{
margin:0 5px;
background:#999;
border:none;
}
.content{
background:#96C2F1;
border-left:1px solid #fff;
border-right:1px solid #999;
}

查看效果

由于不同的边框要设置不同的颜色,所以 CSS 代码较多,容易混淆,请多看几遍。

更多例子:

查看:1,077 评论:4 标签:,

相关日志

共有 4 条评论

  • operafans 说:

    这个不是很实用,还是用图片来做好。

  • xiao3 说:

    你好,我想问个问题,就是我想给我博客上文章的图片自动进行圆角,就是说图片原本是方形的,而放到博客上面后能不能通过CSS的方法让图片显示出来的时候是圆角的?
    要是可以的话,要添加什么代码?这些代码分别放在什么地方?
    谢谢!

    • qingse 说:

      CSS 不能做到你所说的那样。CSS3 的圆角属性和其他几种浏览器的私有圆角属性也不对 img 起作用。

发表留言

请言之有物,无意义留言或只为留链接留言一律不予通过!

提示: 您可以使用一些简单的标签: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

分类

最新日志

最新评论

存档

链接

  • 亚当学院
  • CSS视频教程下载
  • 前沿视频教室
  • 前端爱好者
  • GoodText
  • Kily`s Blog
  • mymickey
  • 秦丰网站策划
  • 奥想创意
  • 我的职业生涯
  • 蜗爱CSS
  • 蜈蚣's Blog
  • web标准学习—小辉博客
  • 十字花匠

© Copyright 2010 一起CSS All Rights Reserved