前端开发

首页 > 前端开发 > css教程 > CSS的一些圆角图形实例分享

CSS的一些圆角图形实例分享

分享到：

【字体：大中小】

2017-08-04
来源：网络
389
0
13

导读：
[导读] 这是比较流行的CSS圆角，制作方法和理解都有困难，但看完这篇文章，就能掌握这种方法。先看效果：制作方法为了更好的理解，先用简单的代码为例。 XHTML代码： bclass=topbclass=b1/...

这是比较流行的CSS圆角，制作方法和理解都有困难，但看完这篇文章，就能掌握这种方法。

先看效果：

制作方法

为了更好的理解，先用简单的代码为例。

XHTML代码：

CSS代码：

b{   
display:block;   
}   
.b1,.b2,.b3,.b4{   
overflow:hidden;   
height:1px;   
border-left:1px solid #000;   
border-right:1px solid #000;   
}   
.b1{   
margin:0 5px;   
background:#000;   
}   
.b2{   
margin:0 3px;   
border-width:0 2px;   
}   
.b3{   
margin:0 2px;   
}   
.b4{   
height:2px;   
margin:0 1px;   
}

这段代码效果如下图：

.top 是一个容器，.b1 是圆角顶部的横线，.b2 .b3 .b4 分别是设置递减的左右 margin 和相应的 border ，他们便组成了圆角圆弧中的几个点。合在一起，就组成了上半部分的圆角。看下面的动态图就能很好的理解了。

为了看的更清楚，图中用了较粗的“线”和“点”，看起来锯齿比较明显，而网页上设置的 1px、2px 就不容易看出锯齿了。

下半部分和上半部分的原理是一样的，只是“倒”过来了。

完整的代码

XTHML代码：

CSS代码：

b{   
display:block;   
}   
.b1,.b2,.b3,.b4{   
overflow:hidden;   
height:1px;   
border-left:1px solid #000;   
border-right:1px solid #000;   
}   
.b1{   
margin:0 5px;   
background:#000;   
}   
.b2{   
margin:0 3px;   
border-width:0 2px;   
}   
.b3{   
margin:0 2px;   
}   
.b4{   
height:2px;   
margin:0 1px;   
}   
#content{   
border:solid #000;   
border-width:0 1px;   
}

3D效果CSS圆角

先看效果吧：

下面给出相应的代码。

XHTML代码：

  
  
  
3D效果CSS圆角

深入理解css中vertical-align属性
一、为什么要写这篇文章今天看到一个问题：两个div 都设置 display：inline-block，正常显示；但是在第二个div中加一个块级元素或者内联元素，显示就变了个样，为什么？ div{ width: 100px; height: 100px; border:1px solid red; display: inline-block; } .align{ /*...

CSS中overflow清除浮动的用法详细解答
CSS中overflow清除浮动的用法详细解答 #container{ width:1000px; overflow:hidden; background:#999999; } #left{ width:70%; height:500px; float:left; background:#ff0000; } #right{ width:28%; he...

前端开发

CSS的一些圆角图形实例分享

3D效果CSS圆角

Tags

About