第二章 Background & Borders 之 Transp…
2018-06-24 00:37:06来源：未知 阅读 ()
1.Translucent(半透明的) border
第二章的第一个例子是实现半透明的边框。效果如下：
初看之下，很简单嘛，boder就搞定啦，代码如下：
border: 10px solid hsla(0,0%,100%,.5);
background: white;
但是这样根本不起作用啊，给人的效果是border不见了....
咦...咋回事喃？ 原来，border根本没消失，我们的background:white把border给遮住了 -_-，所以只要想办法把background的宽度改到盒子的内边距padding就行的
去掉background:white之后，可以清晰看到盒子的边框.
background属性，默认是覆盖到border-box的，想要修改它，可以通过background-clip属性(IE9+)：
background-clip: content-box|padding-box|content-box
铛铛铛铛....所以给盒子加上background-clip:padding-box 之后，就达到我们想要的效果了
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
下一篇：CSS选择符
- 3.border和background 2020-05-18
- 美化博客园样式 2020-05-17
- How to Create Responsive Tables using CSS without &l 2020-04-30
- 【Vue】基础（数据 & 计算属性 & 方法） 2020-04-22
- 1.图片元素<img>和<map>的联用 2020-04-07
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
