一.半透明边框
问题:
如果我们要为一个容器设置红色背景和一道黑色半透明边框,我们可能会这样写:
border: 20px solid rgba(0,0,0,0.5);
background: red;
复制代码
但是效果却是这样的(图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.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>
复制代码
效果:(如图1.1.png)
2.border-style
3.border-image
初始值:
border-image-source: none
border-image-slice: 100%
border-image-width: 1
border-image-outset: 0s
border-image-repeat: stretch
3.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>
复制代码
效果:(图3-1.png)
3.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区块,分割情况如下图(图3-2.png && 图3-3.png):
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));
复制代码
2个参数(参考图3-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));
复制代码
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个参数(参考图3-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));
复制代码
3.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,会向内扩展;查看下方示例,比较(图3-10.png && 图3-11.png);
示例:
border: 30px solid transparent;
padding: 20px;
border-image-source: url("https://mdn.mozillademos.org/files/4127/border.png");
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));
border-image-slice: 27;
border-image-width: 1 2 1 1;
复制代码
3.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;
复制代码
效果是将边框图片延伸到盒子外面,查看下放示例,比较(图3-12.png && 图3-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;
复制代码
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;
复制代码
3.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
感谢您的阅读。