不使用border-radius实现圆角框

转载 2015年11月20日 20:49:07

原文:基本的圆角框
实现原理:
纯CSS方式实现圆角框的原理在网络上已经有很多人详细解说了,下面这个示意图是我将其中的一个圆角进行放大后的效果。

这里写图片描述

从上面效果图中我们可以看到其实这种圆角框是靠一个个容器堆砌而成的,每一个容器的宽度不同,这个宽度是由margin外边距来实现的,如:margin:0 5px;就是左右两侧的外边距5像素,从上到下有5条线,其外边距分别为5px,3px,2px,1px,依次递减。因此根据这个原理我们可以实现简单的html结构和样式。

1、Html结构层:

<div class="sharp color1">
    <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
    <div class="content">
        <p>number 1</p>
    </div>
    <b class="b5"></b><b class="b6"></b><b class="b7"></b><b class="b8"></b>
</div>

b1~b4构成上面的左右两个圆角结构体,而b5~b8则构建了下面左右两个圆角结构体。而content则是内容主体,将这些全部放在一个大的容器中,并给它的一个类名sharp,用来设置通用的样式。再给它叠加了一个color1类名,这个类名用来区别不同的颜色方案,因为可能会有不同颜色的圆角框。

2、CSS样式:

<style>
    .sharp{width:20%;margin:0 auto;}
    .content{height:180px;}
    .b1,.b2,.b3,.b4,.b5,.b6,.b7,.b8{display:block;height:1px;font-size:1px;overflow:hidden;}
    .b1,.b8{margin:0 5px;}
    .b2,.b7{margin:0 3px;border-left:2px solid;border-right:2px solid;}
    .b3,.b6{margin:0 2px;border-left:1px solid;border-right:1px solid;}
    .b4,.b5{margin:0 1px;border-left:1px solid;border-right:1px solid;height:2px;}
    .content{border-right:1px solid;border-left:1px solid;overflow:hidden;}
    .b2,.b3,.b4,.b5,.b6,.b7,.content{border-color:#96C2F1;}
    .b1,.b8{background:#96C2F1;}
    .b2,.b3,.b4,.b5,.b6,.b7,.content{background:#EFF7FF;}
</style>

将每个b标签都设置为块状结构,并定义其高度为1像素,超出部分溢出隐藏。从上面样式中我们已经看到margin值的设置,是从大到小减少的。而b1和b8的设置是一样,已经将它们合并在一起了,同样的原理,b2和b7、b3和b6、b4和b5都是一样的设置。这是因为上面两个圆和下面的两个圆是一样,只是顺序是相对的,所以将它合并设置在一起。有利于减少CSS样式代码的字符大小。后面三句和第二句有点不同的地方是多设置了左右边框的样式,但是在这儿并没有设置边框的颜色,这是为什么呢,因为这个边框颜色是我们需要适时变化,所以将它们分离出来,在下面的代码中单独定义。
也是只设置左右边框线,但是不设置颜色值,它和上面八个b标签一起构成圆角框的外边框轮廓。

.b2,.b3,.b4,.b5,.b6,.b7,.content{border-color:#96C2F1;}
.b1,.b8{background:#96C2F1;}

注意:需要将这两句的颜色值设置为一样的,第二句中虽说是设置的background背景色,但它同样是上下边框线的颜色,这一点一定要记住。因为b1和b8并没有设置border,但它的高度值为1px,所以用它的背景色就达到了模拟上下边框的颜色了。

现在已经将一个圆角框描述出来了,但是有一个问题要注意,就是内容区的背景色,因为这儿是存载文字主体的地方。所以还需要加入下面这句话,也是群集选择符来设置圆角内的所有背景色。

.b2,.b3,.b4,.b5,.b6,.b7,.content{background:#EFF7FF;}

这儿除了b1和b8外,其它的标签都包含进来了,并且包括content容器,将它们的背景色全部设置一个颜色,这样除了线框外的所有地方都成为一种颜色了。

如图:

这里写图片描述

使用border-radius无效,能看到背景还是方形的,边框变成圆角了的解决方案

解决方案: 1、设置border:none; 去掉边框;2、设置border-radius:40px; 若遇到浏览器兼容的​问题,可加上兼容的css代码;3、最后,使用box-shadow: 0px...
  • qq_17505335
  • qq_17505335
  • 2017年06月15日 15:25
  • 2771

解决border-radius失效问题

  • 2016年12月09日 19:21
  • 129KB
  • 下载

border-radius遇到transform,overflow:hidden失效

在做加速球时遇到问题,在使用border-radius样式元素的子元素使用transform,overflow会失效.效果如下: 网络上查找的解决方案多为 mask-image, ...
  • w20101310
  • w20101310
  • 2016年08月24日 11:27
  • 2352

CSS3 圆角属性 border-radius和-webkit-border-radius使用

CSS3 圆角属性 border-radius 在 CSS3 中新增了一个 border-radius 边框半径属性,即大家常用的圆角效果。这使得制作圆角将不再麻烦,只需对所用对象加一个 bord...
  • jilongliang
  • jilongliang
  • 2014年04月17日 13:10
  • 2884

不使用border-radius实现圆角框

原文:基本的圆角框 实现原理: 纯CSS方式实现圆角框的原理在网络上已经有很多人详细解说了,下面这个示意图是我将其中的一个圆角进行放大后的效果。从上面效果图中我们可以看到其实这种圆角框是靠一个个容...
  • cindy_rain
  • cindy_rain
  • 2015年11月20日 20:49
  • 1301

CSS3 圆角属性 border-radius和-webkit-border-radius使用

CSS3 圆角属性 border-radius 在 CSS3 中新增了一个 border-radius 边框半径属性,即大家常用的圆角效果。这使得制作圆角将不再麻烦,只需对所用对象加...
  • wuxiaopeng_1986
  • wuxiaopeng_1986
  • 2016年09月22日 12:32
  • 123

CSS3 border-radius实现边框圆角

border-radius实现边框圆角   这是css3的属性 border-radius:3px; -webkit-border-radius:3px; -moz-border-radius...
  • wangnanwlw
  • wangnanwlw
  • 2016年08月09日 14:48
  • 882

css3:border-radius圆角边框详解

前言 今天来聊聊这个 border-radius 属性,radius的英文意思是弧度的意思,而国人更喜欢称之为圆角,因为它可以使得我们的边框有棱有角。当年前辈们都是用图片君搞定圆角的年代或用一条...
  • alex8046
  • alex8046
  • 2015年03月28日 17:14
  • 2097

html中实现圆角特效的几种方法

  • 2014年03月13日 22:29
  • 19KB
  • 下载

使用border-radius画圆并使字位于字的中心

需求:使用html画一个圆,圆中有个字进行说明,并且使字居中。分析:首先画圆,我第一个想法是用图片,,被骂了一顿,然后想难道用canvas画,又被骂了一顿,这才注意到CSS存在一个属性border-r...
  • zdavb
  • zdavb
  • 2015年09月17日 21:43
  • 3136
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:不使用border-radius实现圆角框
举报原因:
原因补充:

(最多只允许输入30个字)