CSS半透明边框的实现实例详解（图）

css半透明边框的实现实例详解（图）

1.半透明边框

问题:

如果我们要为一个容器设置红色背景和一道黑色半透明边框，我们可能会这样写:

border: 20px solid rgba(0,0,0,0.5);background: red;

登录后复制

立即学习“前端免费学习笔记（深入）”；

但是效果却是这样的（图1-1.png）；我们的半透明颜色怎么没有实现半透明边框？

图1-1.png

解决方案：

我们可以通过半透明颜色半透明颜色来调整上面的默认行为，把它是值设为半透明颜色-box,然后就出现了我们想要的效果（图1-2.png）；

border: 20px solid rgba(0,0,0,0.5);background: red;background-clip: padding-box;

登录后复制

立即学习“前端免费学习笔记（深入）”；

图1-2.png

2.background-clip

既然用到了background-clip属性，那我们就来看看这个属性吧;

background-clip:

设置元素的背景（背景半透明颜色或颜色）是否延伸到边框下面。

border-box默认初始值 ，背景延伸到边框外沿（但是在边框之下）padding-box边框下面没有背景，即背景延伸到内边距外沿content-box背景裁剪到内容区 (content-box) 外沿text实验API ，背景裁剪到前景文本（ foreground text）内。

示例

CSS content

span {   border: 10px blue;   border-style: dotted double;   margin: 1em;   padding: 2em;   background: #F8D575;}.border-box { background-clip: border-box; }.padding-box { background-clip: padding-box; }.content-box { background-clip: content-box; }.text { background-clip: text; }

登录后复制

立即学习“前端免费学习笔记（深入）”；

HTML content

border-boxpadding-boxcontent-boxtext

登录后复制

立即学习“前端免费学习笔记（深入）”；

效果：（图2-1.png）

图2-1.png

3.border-style

4.border-image

初始值：

border-image-source: none

border-image-slice: 100%

border-image-width: 1

border-image-outset: 0s

border-image-repeat: stretch

4.1 border-image-source: none |

where

= | | | | |

where

= image([ [ | ]? , ? ]!)
= image-set(#)
= element( )
= cross-fade(,?)
= | | |

Gradient示例：

= linear-gradient( [半透明颜色次平铺; ），第9区块不显示，传入参数 fill 则显示第9区块，分割情况如下图（图4-2.png && 图2-3.png）:

图4-2.png

图4-3.png

我们通过上面这张图片（81px^81px）来看传入不同个数的参数是如何分割这张图片的；

1个参数

.gradient {     border: 30px solid;    border-image-source: linear-gradient(to right, red, green, blue);    /*border-image-source: linear-gradient(90deg, red, green, blue);*/    border-image-slice: 10;    padding: 20px;}

登录后复制

立即学习“前端免费学习笔记（深入）”；

图4-4.png

图4-5.png(效果图)

2个参数（参考图4-3.png）

The image is stretched to fill the area.

登录后复制

立即学习“前端免费学习笔记（深入）”；

图4-6.png

图4-7.png(效果图)

3个参数

/* border-image-slice: slice */border-image-slice: 27; border: 30px solid transparent;padding: 20px;border-image-source:url([https://mdn.mozillademos.org/files/4127/border.png](https://mdn.mozillademos.org/files/4127/border.png));

登录后复制

立即学习“前端免费学习笔记（深入）”；

图4-8.png（效果图）

4个参数(参考图4-2.png)

/* border-image-slice: vertical horizontal */border-image-slice: 40 40.5; border: 30px solid transparent;padding: 20px;border-image-source:url([https://mdn.mozillademos.org/files/4127/border.png](https://mdn.mozillademos.org/files/4127/border.png));

登录后复制

立即学习“前端免费学习笔记（深入）”；

图4-9.png（效果图）

4.3 border-image-width: [ | | | auto ]{1,4}

语法：

/* border-image-slice: top horizontal bottom */border-image-slice: 27 40 27; border: 30px solid transparent;padding: 20px;border-image-source:url([https://mdn.mozillademos.org/files/4127/border.png](https://mdn.mozillademos.org/files/4127/border.png));

登录后复制

立即学习“前端免费学习笔记（深入）”；

设置边框图片的width，如果超出了设置的半透明颜色,会向内扩展；查看下方示例，比较（图4-10.png && 图4-11.png）；

示例：

/* border-image-slice: top right bottom left */border-image-slice: 27 40 27 27;border: 30px solid transparent;padding: 20px;border-image-source:url([https://mdn.mozillademos.org/files/4127/border.png](https://mdn.mozillademos.org/files/4127/border.png));

登录后复制

立即学习“前端免费学习笔记（深入）”；

图4-10.png

border-image-width: all                        /* One-value syntax */       E.g. border-image-width: 3;border-image-width: vertical horizontal        /* Two-value syntax */  E.g. border-image-width: 2em 3em;border-image-width: top horizontal bottom      /* Three-value syntax */    E.g. border-image-width: 5% 15% 10%;border-image-width: top right bottom left      /* Four-value syntax */  E.g. border-image-width: 5% 2em 10% auto;

登录后复制

立即学习“前端免费学习笔记（深入）”；

图4-11.png

4.4 border-image-outset: [ | ]{1,4}

语法：

border: 30px solid transparent;padding: 20px;border-image-source: url("https://mdn.mozillademos.org/files/4127/border.png");border-image-slice: 27;

登录后复制

立即学习“前端免费学习笔记（深入）”；

效果是将边框图片延伸到盒子外面，查看下放示例，比较（图4-12.png && 图4-13.png）；

示例:

border: 30px solid transparent;padding: 20px;border-image-source:url([https://mdn.mozillademos.org/files/4127/border.png](https://mdn.mozillademos.org/files/4127/border.png));border-image-slice: 27;border-image-width: 1 2 1 1;

登录后复制

立即学习“前端免费学习笔记（深入）”；

图4-12.png

/* border-image-outset: sides */border-image-outset: 30%;/* border-image-outset:vertical horizontal */border-image-outset: 10% 30%;/* border-image-outset: top horizontal bottom */border-image-outset: 30px 30% 45px;/* border-image-outset:top right bottom left  */border-image-outset: 7px 12px 14px 5px;

登录后复制

立即学习“前端免费学习笔记（深入）”；

图4-13.png

4.4 border-image-repeat: [ stretch | repeat | round ]{1,2}

stretch默认初始值 ，；拉伸repeat平铺round整数次平铺

语法：

border: 30px solid transparent; padding: 20px; border-image-source:url([https://mdn.mozillademos.org/files/4127/border.png](https://mdn.mozillademos.org/files/4127/border.png)); border-image-slice: 27; margin: 60px;

登录后复制

立即学习“前端免费学习笔记（深入）”；

border: 30px solid transparent;padding: 20px;border-image-source:url([https://mdn.mozillademos.org/files/4127/border.png](https://mdn.mozillademos.org/files/4127/border.png));border-image-slice: 27;margin: 60px;border-image-outset: 2 1 1 1;

登录后复制

border-image-repeat: type                      /* One-value syntax */       E.g. border-image-value: stretch;border-image-repeat: horizontal vertical       /* Two-value syntax */       E.g. border-image-width: round space;

登录后复制

以上就是CSS半透明边框的实现实例详解（图）的详细内容，更多请关注【创想鸟】其它相关文章！