正如w3school所说,background-clip属性规定背景的绘制区域。那么它的作用到底是什么呢?刚开始只是看懂案例,但并没有深入理解。但在做项目时,我才发现他对半透明边框具有微妙的影响。
1、最开始的设计代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{width:200px;height:300px;border:25px solid rgba(25,15,55,.5);margin:0 auto;background:pink;}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果:
是正真的所指颜色的半透明吗?事实并非如此,肉眼会有错觉的哦,大家可以把border-style改为dashed,会有意想不到的结果,如下图
容器的颜色会透过半透明边框显示出来,即容器背景颜色会延伸的边框下面。那么如何实现正真半透明边框呢?这便是background-clip属性。当我们在上述代码加上background-clip:padding-box属性时,便是正真的半透明。相信到此,对background-clip属性作用又多了一份了解。