纯css实现动态边框的示例代码

2020-05-16 07:20:10易采站长站整理

4、新属性:Background Size

Background Size属性用来设置背景图片的大小。有几个属性值:

background-size: contain;缩小背景图片使其适应标签元素(主要是像素方面的比率)
background-size: cover;让背景图片放大延伸到整个标签元素大小(主要是像素方面的比率)
background-size: 100px 100px;标明背景图片缩放的尺寸大小
background-size: 50% 100%;百分比是根据内容标签元素大小,来缩放图片的尺寸大小

5、Background Repeat 调整

CSS2里当设置背景的时候,它经常被标签元素截取而显示不全,CSS3介绍了2个新属性来修复此问题。

background-repeat: space; 图片以相同的间距平铺且填充整个标签元素
background-repeat: round; 图片自动缩放直到适应且填充整个标签元素

6、Background Attachment 的调整

Background Attachment有了一个新属性值:

local
,当标签元素滚动时它才有效(如设置
overflow: scroll;
),当
background-attachment
设置为
scroll
时,背景图片是不随内容滚条滚动的。现在,有了
background-attachment: local
,就可以做到让背景随元素内容滚动而滚动了。

7、新增 Background Blend Mode背景的混合模式是当背景重叠时计算像素最终色值的方法,每种混合模式采用前景和背景颜色值(分别为顶部颜色和底部颜色),执行其计算并返回颜色值。最终的可见层是对混合层中的每个重叠像素执行混合模式计算的结果。

background-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity;

每种混合效果参见: https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode

CSS3 多背景模拟元素边框

我们这里主要使用了

background-img
background-size
background-position
三个属性。


background-image: [background-image], [background-image], [background-image];
background-position: [background-position], [background-position], [background-position];
background-repeat: [background-repeat], [background-repeat], [background-repeat];

简写形式如下:


background: [background-image] [background-position] [background-repeat],
[background-image] [background-position] [background-repeat],