神刀安全网

CSS揭秘整理之半透明边框



1.半透明边框

问题:

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

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

但是效果却是这样的(图1-1.png);我们的半透明颜色怎么没有实现半透明边框?

CSS揭秘整理之半透明边框

图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;
CSS揭秘整理之半透明边框

图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)

CSS揭秘整理之半透明边框

图2-1.png


3.border-style
CSS揭秘整理之半透明边框

CSS揭秘整理之半透明边框


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
<image> = <url> | <image()> | <image-set()> | <element()> | <cross-fade()> | <gradient>
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)

CSS揭秘整理之半透明边框

图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):

CSS揭秘整理之半透明边框

图4-2.png

CSS揭秘整理之半透明边框

图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));
CSS揭秘整理之半透明边框

图4-4.png

CSS揭秘整理之半透明边框

图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));
CSS揭秘整理之半透明边框

图4-6.png

CSS揭秘整理之半透明边框

图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));
CSS揭秘整理之半透明边框

图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));
CSS揭秘整理之半透明边框

图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;
CSS揭秘整理之半透明边框

图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;
CSS揭秘整理之半透明边框

图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;
CSS揭秘整理之半透明边框

图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;
CSS揭秘整理之半透明边框

图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揭秘》, MDN 和自己的理解进行整理;
感谢您的阅读。

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » CSS揭秘整理之半透明边框

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址