CSS整理半透明边框

1.半透明边框

问题:

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

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

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

图1-1.png

解决方案：

我们可以通过background-clip属性来调整上面的默认行为，把它是值设为padding-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:

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

值（values ）	说明
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

<span class="border-box">border-box</span>
<span class="padding-box">padding-box</span>
<span class="content-box">content-box</span>
<span class="text">text</span>

效果：（图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 | <image>

where

where

<image()> = image([ [ <image> | <string> ]? , <color>? ]!)
<image-set()> = image-set(<image-set-option>#)
<element()> = element( <id-selecter> )
<cross-fade()> = cross-fade(<cf-mixing-image>,<cf-final-image>?)
<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()>

Gradient示例：

<linear-gradient()> = linear-gradient( [<angle> | to <side-or-corner>]?, <color-stop-list>)

CSS content

.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;
}

HTML content

<div class="gradient">The image is stretched to fill the area.</div>

效果：（图4-1.png）

图4-1.png

4.2 border-image-slice: [ <number> | <percentage> ]{1,4}&& fill?

这个 border-imge-slice 属性传入1~4个参数（number没有单位专指像素或百分比值）将图片分割成9个部分,1,2,3,4四个区块是不会拉伸,不会平铺，称之为盲区，5,6,7,8四个区块可以通过 border-image-repeat 来控制拉伸平铺和重复（ stretch:默认值,拉伸; repeat:平铺; round:整数次平铺; ），第9区块不显示，传入参数 fill 则显示第9区块，分割情况如下图（图4-2.png && 图2-3.png）:

图4-2.png

图4-3.png

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

1个参数

/* 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-4.png

图4-5.png(效果图)

2个参数（参考图4-3.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-6.png

图4-7.png(效果图)

3个参数

/* 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));

图4-8.png（效果图）

4个参数(参考图4-2.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-9.png（效果图）

4.3 border-image-width: [ <length> | <percentage> | <number> | auto ]{1,4}

语法：

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;

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

示例：

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

图4-10.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-11.png

4.4 border-image-outset: [ <length> | <number> ]{1,4}

语法：

/* 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-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;margin: 60px;

图4-12.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;
margin: 60px;
border-image-outset: 2 1 1 1;

图4-13.png

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

值（value）	说明
stretch	默认初始值，；拉伸
repeat	平铺
round	整数次平铺

语法：

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整理半透明边框相关推荐

CSS边框应用 - 半透明边框
相信你以前肯定尝试过 CSS 中的半透明颜色, 比如 rgba() 和 hsla().半透明颜色是 2009 年发生的一场重大变革. 从那以后, 我们终于可以在网页设计中使用它们了, 但是为了尝鲜还需 ...
css 中多种边框的实现小窍门
背景知识:box-shadow,outline 鉴于使用场景的多元化,多重边框的设计越来越多,以往可以借助 border-image 属性应付一下,但是这个在css 代码层面并不是很灵活.现在我们借助 ...
CSS 实现卡片边框渐变动画
1.实现效果 2.实现步骤父容器添加背景渐变色 <div class="card"></div> .card {background: linear-gr ...
css样式之边框和内外边距
1.css样式之边框:border 实心的边框: <!DOCTYPE html> <html> <head> <meta http-equiv="c ...
【基础】CSS实现多重边框的5种方式
原文:[基础]CSS实现多重边框的5种方式简言目前最优雅地实现多重边框的方案是利用CSS3 的 box-shadow属性,但如果要兼容老的浏览器,则需要选择其它的方案.本文简要地列举了几种多重边框 ...
html多重边框，中间空白,【基础】CSS实现多重边框的5种方式
原文:[基础]CSS实现多重边框的5种方式简言目前最优雅地实现多重边框的方案是利用CSS3 的 box-shadow属性,但如果要兼容老的浏览器,则需要选择其它的方案.本文简要地列举了几种多重边框 ...
html css整理笔记,HTML CSS整理笔记 (八) 定位网页元素
----8 定位网页元素---- 51.Position属性:指定盒子的位置,相对它父级的位置或它自身应该在的位置. (1)static 默认无定位,元素按照标准文档布局. (2)relative相对 ...
Jquery中css()方法获取边框长度
1. JQuery中可以使用css()方法获取块元素的边框宽度,如下: $("divMode").css("border-left-width");//左边框长 ...
[css] 判断如下边框的颜色，并解释为什么[代码]？
[css] 判断如下边框的颜色,并解释为什么[代码]? <p style="color: red;border: 1px solid;">给p设置border,但不给它 ...

CSS整理半透明边框

CSS整理半透明边框相关推荐

最新文章

热门文章