浅论background-clip对半透明边框的影响
来源：互联网 发布：物流软件app是什么意思 编辑：程序博客网 时间：2024/06/16 02:06
正如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属性作用又多了一份了解。
阅读全文
1 0
- 浅论background-clip对半透明边框的影响
- css3的background-clip来制作半透明边框
- background-clip和background-size的使用
- background-clip 与 background-origin 的区别
- CSS3 background-origin，background-clip的比较
- background-clip和background-origin的区别
- css3的background-clip 背景
- td相对定位不显示边框，使用background-clip解决
- background-clip
- background-clip: padding-box;的作用b
- background-clip：size属性的研究
- CSS3中background-clip和background-origin的区别
- Background-clip background-origin 两个属性的水还挺深
- background-clip与background-origin的用法释疑
- css3中background-clip和background-origin的区别
- HTML/CSS: background-clip 与 background-origin的区别
- css3中的background的新特性background-origin,background-clip,background-size详解
- css中的background的几个属性(background-attachment/background-origin,background-clip等)
- android开发之应用Crash自动抓取Log_自动保存崩溃日志到本地
- 01. Servlet 环境设置和生命周期
- 迷宫问题求解
- less和sass的区别和介绍
- appium定位元素java篇 封装
- 浅论background-clip对半透明边框的影响
- R语言-对象改值
- Intellij Idea 调试debug相关
- 编译错误undefined reference to `dlopen' 'dlsym' 'dlclose'的解决方法
- python 实现桌面壁纸自动更换
- spring终极面试题
- object类型
- POJ 1852 Ants（思路题）
- C# 使用打包工具实现web应用一键发布
