CSS Border用法详解 - junruchen/junruchen.github.io GitHub Wiki

常见的边框用法。

目录

  • 透明边框的实现
  • 多层边框的几种实现方法
  • border-radius 圆角的使用
  • border-image 边框背景详解
  • box-shadow 邻边投影、单侧投影、对边投影以及一些虚线边框等特殊元素的不规则阴影使用

透明边框的实现

要求: 给内部盒子设置一个透明边框, 可以看到外层盒子的背景。

dom结构:

<div class="border-box">
    <div class="border-item">内部盒子区</div>
</div>

先看效果图:

透明边框

浏览器默认从边框外沿剪裁背景图, 所以为了使边框透明, 需将浏览器的剪裁范围缩小到内边距的外沿, 而 background-clip 属性正好可以实现此效果。

background-clip 属性的默认值为 border-box , 即浏览器默认剪裁背景到边框外边框, 可将它的值设为 padding-box , 这样浏览器就会从内边距的外沿来剪裁背景。

代码示例

.border-box{ 
    backrgound-image: url(image.png) ;
}
.border-item{ 
    border: 15px solid rgba(255,255,255,0.5) ;
    background: white ;
    background-clip: padding-box ;
}

多层边框的几种实现方法

以下效果均只使用一个元素实现。

常见的实现方法有两种, box-shadow 方案以及 outline 方案。

效果图:

多层边框

利用 box-shadow 实现多重边框, 不会影响布局, 不受 box-sizing 影响, 可通过内外边距来模拟边框所需占据的空间。

代码示例：

border: 5px solid #fb3 ;
outline: 5px solid #58a ;
box-shadow: 0 0 0 5px #58a, 0 0 0 5px #fb3 ;

注意: outline 描边绝大多数情况下都是矩形, 所以如果想实现带圆角的多重边框, 可以选择使用 box-shadow 。

圆角情况下outline描边效果图:

outline描边

border-radius 圆角的使用

属性说明

IE9+、Firefox 4+、Chrome、Safari 5+ 以及 Opera 支持 border-radius 属性。

border-radius是一个简写属性, 分别指定左上角[border-top-left-radius]、右上角[border-top-right-radius]、右下角[border-bottom-right-radius]、左下角[border-bottom-left-radius]的圆角半径。

border-radius 可以分别设置水平半径和垂直半径, 以 "/" 分隔, 水平和垂直半径都可以设置1-4个值,分别指定四个角的半径, 可以是具体的长度值也可以是百分比。 如: border-radius: 50% / 20%; 斜线"/"之前的表示四个角的水平半径均为50%, 之后的表示四个角的垂直半径均为20%。

不论是水平半径还是垂直半径都遵循以下规则:

  • 如果只设置一个值，将用于全部的四个角;
  • 如果设置两个值，第一个用于左上角、右下角，第二个用于右上角、左下角;
  • 如果设置三个值，第一个用于左上角，第二个用于右上角和左下角，第三个用于右下角。[可以联想margin]

自适应椭圆的实现

这里需要使用百分比。

代码示例:

border-radius: 50% /50% ;
或者
border-radius: 50% ;

注意: 这里设置的百分比不论是单独指定水平半径、垂直半径还是统一指定, 均是根据百分比, 分别相对 border box 的宽度和高度进行计算。也就是说相同的百分比可能会计算出不同的水平和垂直半径。

比如设置 border-radius: 50% , border box的宽度高度分别是200px 100px, 则根据50%计算出的水平半径为100px, 垂直半径为50px。

效果图:

椭圆

自适应半椭圆以及自适应四分之一椭圆

效果图: 半椭圆 1/4椭圆

上图中半椭圆水平对称, 所以左上角和左下角的半径相等, 右上角和右下角的半径相等;

图中整个左侧是一条曲线且占据了整个宽度, 也就是说左上角和左下角的垂直半径之和等于整个形状的高度, 水平半径应该为整个形状的宽度; 而右侧没有任何圆角, 所以右上角的右下角的垂直半径之和也应该为整个形状的高度, 水平方向为0。

观察上图中的四分之一椭圆, 很容易可以看出整个圆角都集中在左上角, 而其他三个角都没有圆角。

代码示例：

半椭圆 border-radius: 100% 0 0 100% / 50%;
1/4椭圆border-radius: 100% 0 0 0;

其他形状多变的圆角效果图:

圆角效果图

代码示例

1、 border-radius: 50% / 100%;
2、 border-radius: 10% / 50%;
3、 border-radius: 10% 50% / 100%;
4、 border-radius: 100% 10% 10% 10%;
5、 border-radius: 40% 40% 20% 20% / 100% 100% 50% 50%;

注意: 当任意两个相邻圆角的半径之和超过border box的尺寸时, 用户代理必须按比例减小各个边框所使用的值, 直到它们不会相互重叠为止。拿上图中最后一个图形举例说明。

假设盒子的宽高分别为: 800px 400px, 按照border-radius设置的百分比半径, 分别计算:

左上角半径：320px 400px 右上角半径：320px 400px

左下角半径：160px 200px 右下角半径：160px 200px

很明显, 此时左上角和左下角的垂直半径之和[400px+200px]大于盒子的高度[400px], 同理右上角和右下角的垂直半径之和也大于盒子的高度。

根据上述理论, 用户代理必须按比例减小各个边框所使用的值, 直到它们不会相互重叠为止。当然按比例缩小这一步操作是由浏览器完成, 下面只是模拟浏览器绘制圆角边框的过程。

缩小后的半径为:

左上角半径：320px 267px 右上角半径：320px 133px

左下角半径：160px 133px 右下角半径：160px 267px

左上角和左下角根据新的半径, 画圆效果如下图所示:

圆角1

最终效果图:

圆角2

当然, 除了可以实现各类圆角按钮, 还可以做一些更有意思的事情, 比如一个小黄人, 再或者一个萌萌的大叔。

border-image 边框背景详解

border-image属性可指定边框样式使用图像来填充, 图像可以是绝对或相对地址引入的图片, 也可以是渐变色。使用时, 需指定 border-style 指定边框样式。

IE11+、Firefox 3.5+、Chrome、Safari 以及 Opera 支持 border-image 属性。为支持低版本, 最好增加带有-moz-以及-webkit-前缀的写法。

border-image为简写属性, 可分别设置以下5个属性的值: border-image-source、border-image-slice、border-image-width、border-image-outset、border-image-repeat。 属性间用"/"分隔。

1、border-image-source

取值: none | image ; 当值为none时, 会自动使用 border-style 的值。

2、border-image-slice 指定图片分隔的长度

取值: {1,4} [number | %] && fill ; 注意, 使用number时, 默认单位为像素, 所以不需要加上单位, 另外百分比是分别相对盒子的宽和高。

border-image-slice属性指定从上，右，下，左方位来分隔图像，将图像分成4个角，4条边和中间区域共9份，中间区域始终是透明的（即没图像填充），除非加上关键字 fill, 此时中间区域会覆盖背景。

slice属性

3、border-image-width 指定边框背景的宽度

取值: {1,4} number | % | length | auto ; 注意, 这里的number是相对于 border-width 的倍数, 如 border-image-width: 1 ; 如果没有指定 border-image-width 的值, 则取 border-wdith 的值。

4、border-image-outset 指定偏移距离

取值: {1,4} number | length ; number是相对于 border-width 的倍数。

outset属性

5、border-image-repeat 指定边框背景的平铺方式

取值: {1,2} 拉伸stretch | 重复repeat | 环绕round ;

可1-2个值, 两个值表示水平[只对上下中起作用]和垂直方向[只对左右中起作用], 平铺可能会改变图片的大小, 而重复不会改变图片的大小。 四个角上的角边框图片是没有任何展示效果的, 不会平铺, 不会重复, 也不会拉伸。

效果图：

repeat属性

代码示例

第一个效果图代码: 
border-image: url("border-image.png");
border-image-slice: 60;
border-image-width: 20px;
border-image-outset: 10px;
border-image-repeat: repeat;

第二个效果图代码: 
border-image: url("border-image.png") 60 / 20px / 10px round;

box-shadow各种投影的实现

属性简单介绍

box-shadow有6个参数值：X轴偏移量、Y轴偏移量、模糊距离、扩展距离、颜色值以及inset设置为内阴影。

邻边投影

最简单，如：

    box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, .5);

效果图如下：

box-shadow

其中模糊距离以及扩展距离是指四个边都有变化，如模糊距离2px，则四个方向上都会进行2px的扩展。利用这一特性，可实现单边阴影。

单边投影

底边阴影代码示例：

    box-shadow: 0 8px 4px -4px rgba(0, 0, 0, .5);
    //Y轴向下偏移8px，四周模糊4px，扩展-4px，正好抵消掉。

效果图：

box-shadow1

对边投影

对边阴影实际上就是两个单边阴影

代码示例：

    box-shadow: 8px 0 4px -4px rgba(0, 0, 0, .5), -8px 0 4px -4px rgba(0, 0, 0, .5);
    //Y轴向下偏移8px，四周模糊4px，扩展-4px，正好抵消掉。

效果图：

box-shadow

box-shadow阴影的特殊情况－－不规则阴影

使用阴影时经常会遇到伪元素、虚线边框、折角背景等效果，当给这一类元素加上阴影时，往往得不到很好的效果。

使用css3 filter可以很好的解决这一问题。

看图[左边是使用box-shadow的效果，右边是使用filter的效果]：

filter1

filter2

filter3

具体不详细讲解，看代码：

   //左边的阴影
   box-shadow: 0 0 4px 4px rgba(0, 0, 0, .5);  

   //右边的阴影
   filter: drop-shadow(0 0 4px rgba(0, 0, 0, .5));

filter的drop-shadow用法与box-shadow类似，四个属性分别是：x轴y轴扩展半径和模糊距离以及颜色。

需要注意的是：box-shadow兼容性稍微好一些，IE9+；而filter的兼容性差一点，IE13+，android4+

⚠️ **GitHub.com Fallback** ⚠️