Rumah  >  Artikel  >  hujung hadapan web  >  分享border-radius以外的CSS圆角边框制作方法

分享border-radius以外的CSS圆角边框制作方法

高洛峰
高洛峰asal
2017-03-09 17:14:012971semak imbas

用CSS3的border-radius属性来制作圆角边框相当顺手,然而浏览器的兼容问题并不是太好处理,这里我们就来总结一下border-radius以外的CSS圆角边框制作方法.

CSS3的border-radius
利用p+CSS生成圆角边框,在很多情况下都会用到,目前p+CSS的圆角边框,一种是利用CSS3,一种是利用布局模拟出圆角。
先说第一种,利用CSS3,前提是您的浏览器必须支持CSS3,Firefox3是支持的,我看到的很多网站圆角也是利用CSS3直接生成的,无非就是ie下依然显示直角而已,让ie固执去吧。

利用CSS3,你可以指定4个角都是圆角,或者某一个角是圆角非常方便,代码如下:

#round {     
    background-color: #000;     
    border: 1px solid #000;     
    -moz-border-radius: 10px;     
    -webkit-border-radius: 10px;     
    color:#fff;     
}     

#indie {     
    background-color: #000;     
    border: 1px solid #000;     
    -moz-border-radius-topright: 10px;     
    -moz-border-radius-bottomright: 10px;     
    -webkit-border-top-left-radius: 10px;     
    -webkit-border-bottom-left-radius: 10px;     
    color:#fff;     
}


66bb68ed33173dd994947ee3d74c0c774a249f0d628e2318394fd9b75b4636b1圆角边框473f0a7621bec819994bb5020d29372a94b3e26ee717c64999d7867364b1b4a3 
4bf6987c7b52ccb6d99c432bb4061fb24a249f0d628e2318394fd9b75b4636b1部分圆角473f0a7621bec819994bb5020d29372a94b3e26ee717c64999d7867364b1b4a3 
 

不使用 border-radius 实现圆角
CSS3中,利用属性 border-radius 可以很方便的设置出圆角矩形,但是在IE8及以下版本却不支持这个属性,为了在旧版本的浏览器中实现宽高自适应的圆角矩形,可以采用以下三种方法。

1.使用背景图片制作圆角

使用背景图片制作宽、高自适应的圆角矩形,首先需要切出4个圆角图片,然后把4个圆角图片放在矩形的四个角上就大功告成了,这一共需要5个p标签,1个容器p和4个圆角背景p。是不是很好理解。

具体实现来说,需要注意一些细节。对于矩形容器p:

上下内边距的大小至少设置为圆角的高度。
position设置为相对定位。
放置内容。
对于4个圆角背景p:

分别设置各个圆角背景图片。
绝对定位于容器矩形的四个角。
需要设置宽高值才能显示背景图片。
假设圆角图片的宽高是5px,具体代码如下:

<p class="content">
    <p class="top-left"></p>
    <p class="top-right"></p>
    <p class="btm-left"></p>
 <p class="btm-right"></p>
</p>

.content {   
 position: relative;   
 padding: 5px;   
}   
.top-left,   
.top-rightright,   
.btm-left,   
.btm-rightright {   
 position: absolute;   
 width: 5px;   
 height: 5px;   
}   
.top-left {   
 top: 0;   
 left: 0;   
 background: url(imgs/top-left.png) no-repeat top left;   
}   
.top-rightright {   
 top: 0;   
 rightright: 0;   
 background: url(imgs/top-rightright.png) no-repeat top left;   
}   
.btm-left {   
 bottombottom: 0;   
 left: 0;   
 background: url(imgs/btm-left.png) no-repeat top left;   
}   
.btm-rightright {   
 bottombottom: 0;   
 rightright: 0;   
 background: url(imgs/btm-rightright.png) no-repeat top left;   
}

2.纯 CSS+p 制作圆角矩形

这种方法的原理是利用像素点绘制弧线来模拟圆角。简单起见,这里我用圆角半径为3px的例子讲解,其中圆角矩形的背景色为粉色,矩形的边框为黑色。左上角圆角放大后如下图所示:
分享border-radius以外的CSS圆角边框制作方法

这里矩形上下各需要3个高度为1px、垂直罗在一起的p才能模拟出圆角。具体实现如下:

第一个p就是上面图中矩形的黑色上边框,因为模拟的圆角半径为3px,所以该p的左右外边距设为3px,背景色设为黑色。
第二个p的左右外边距设为2px,左右边框为1px的黑线,背景色为粉色。
第三个p的左右外边距设为1px,左右边框为1px的黑线,背景色为粉色。
圆角矩形下面的两个圆角是以上三个p反序排列。
矩形内容区域的p只需要设置左右边框和背景色即可。
具体代码如下

<p class="wrapper">
    <p class="r1"></p>
 <p class="r2"></p>
 <p class="r3"></p>
 <p class="content">aaaaa</p>
 <p class="r3"></p>
 <p class="r2"></p>
 <p class="r1"></p>
</p>

.r1 {   
 height: 1px;   
 margin: 0 3px;   
 background-color: #111;   
}   
.r2 {   
 height: 1px;   
 margin: 0 2px;   
 background-color: #f4b4b4;   
 border-left: 1px solid #111;   
 border-right: 1px solid #111;   
}   
.r3 {   
 height: 1px;   
 margin: 0 1px;   
 background-color: #f4b4b4;   
 border-left: 1px solid #111;   
 border-right: 1px solid #111;   
}   
.content {   
 background-color: #f4b4b4;   
 border-left: 1px solid #111;   
 border-right: 1px solid #111;   
}

此方法优缺点分析:

不使用背景图片,减少了HTTP请求数。
后期维护性好,但是圆角矩形像素增加,无意义的p代码将成倍增加。
实现的圆角矩形有局限性。
只能实现纯色圆角。

3.使用CSS border 画出梯形模拟圆角

通过设置border属性,可以得到梯形和三角形,效果如下图所示:
分享border-radius以外的CSS圆角边框制作方法

当给p的四个边框设置比较大的宽度值时,就能得到四个梯形,如上图中的第一个图案;
在此基础上,当把p的高度值设为0后,就能得到梯形和等腰三角形了,如上图中的第二个图案;
当把p的宽、高都设为0,且只设置上、左的两个边框时,就能得到两个直角三角形,图中的第三个图案就是这种情况;
在此基础上,把其中的一个边框的颜色设置为透明,就能像第四个图案一样得到一个直角三角形。
代码如下:

<p class="box1"></p>
<p class="box2"></p>
<p class="box3"></p>
<p class="box4"></p>

.box1 {   
 height: 20px;   
 width: 20px;   
 border-top: 20px solid red;   
 border-right: 20px solid green;   
 border-bottom: 20px solid blue;   
 border-left: 20px solid yellow;   
}   
.box2 {   
 height: 0;   
 width: 20px;   
 border-top: 20px solid red;   
 border-right: 20px solid green;   
 border-bottom: 20px solid blue;   
 border-left: 20px solid yellow;   
}   
.box3 {   
 height: 0;   
 width: 0;   
 border-top: 50px solid red;   
 /* border-right: 20px solid green; */
 /* border-bottom: 20px solid blue; */
 border-left: 50px solid yellow;   
}   
.box4 {   
 height: 0;   
 width: 0;   
 border-top: 50px solid red;   
 /* border-right: 20px solid green; */
 /* border-bottom: 20px solid blue; */
 border-left: 50px solid transparent;   
}

已经知道了如何通过 border 画出梯形了,那又该如何利用梯形模拟圆角矩形呢?很简单,只要在矩形的上面和下面各放上一个梯形,就能得到圆角矩形了。原理嘛就是利用梯形的左右两个斜边模拟圆角啦,直接上效果图:
分享border-radius以外的CSS圆角边框制作方法

具体代码如下:

<p class="wrapper">
    <p class="top"></p>
 <p class="content">
     <p>利用border画出梯形,模拟圆角</p>
 </p>
 <p class="bottom"></p>
</p>
p {   
 box-sizing: border-box;   
}   
.top {   
 height: 0;   
 border-top: 3px solid transparent;   
 border-bottom: 3px solid #111;   
 border-left: 3px solid transparent;   
 border-right: 3px solid transparent;   
}   
.bottombottom {   
 height: 0;   
 border-top: 3px solid #111;   
 border-bottom: 3px solid transparent;   
 border-left: 3px solid transparent;   
 border-right: 3px solid transparent;   
}   
.content {   
 color: #fff;   
 background-color: #111;   
}   
.wrapper {   
 width: 200px;   
 margin: 0 auto;   
}

Atas ialah kandungan terperinci 分享border-radius以外的CSS圆角边框制作方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn