《css揭秘》笔记(二),半透明边框
发布日期:2022-02-15 02:36:18
浏览次数:6
分类:技术文章
本文共 781 字,大约阅读时间需要 2 分钟。
《css揭秘》笔记(二),半透明边框
半透明边框
如果用hsla
为<div></div>
设置一个半透明的边框,相关css设置(此处设置的是一个红色的div
,hsla
设置的是一个灰色的半透明色):
.box1{ width: 6.25rem; height:6.25rem; background: red; border:10px solid hsla(0,0%,100%,.5);}
如果恰好<html\>
的背景颜色也是默认的白色,你会发现此处设置的<div>
并没有显示出灰色的半透明边框,而是一个偏红色的边框。
background-clip: padding-box;
,使背景不显示边框区域的内容: .box1{ width: 6.25rem; height:6.25rem; background: red; border:10px solid hsla(0,0%,100%,.5); background-clip: padding-box;}
然而这时得到的边框却又没有了:
其实并不是没有,只是边框的色调比较低,再加上边框设置的透明度比较低,所以看不见而已,换一个比较深的颜色就能看见了,如:
.box1{ width: 6.25rem; height:6.25rem; background: red; border:10px solid hsla(240,80%,80%,.5); background-clip: padding-box; -webkit-background-clip: padding-box;}
全文是《css揭秘》一书的笔记,如果侵权请联系我删除
转载地址:https://blog.csdn.net/PeZXO/article/details/106061958 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
路过,博主的博客真漂亮。。
[***.116.15.85]2024年03月11日 17时59分34秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
MySQL常见的主从复制架构_如何搭建经典的MySQL 主从复制架构
2019-04-21
python 公众号引流_公众号引流方法有哪些?
2019-04-21
java 减少内存_java中减少内存占用小技巧
2019-04-21
centos 7 mysql图形界面_centos7-vnstat图形界面搭建
2019-04-21
java 防渗透_「java、工程师工作经验怎么写」-看准网
2019-04-21
java中跳出当前循环怎么做_在java中,如何跳出当前的多重循环?
2019-04-21
java16下载_java lombok下载
2019-04-21
python 图像处理与识别书籍_Python图像处理之识别图像中的文字(实例讲解)
2019-04-21
java安全初始化_java安全编码指南之:声明和初始化
2019-04-21
java jstat gc_分析JVM GC及内存情况的方法
2019-04-21
php linux权限,Linux权限详细介绍
2019-04-21
典型环节的matlab仿真分析,典型环节的MATLAB仿真.doc
2019-04-21
Php contenttype类型,各种类型文件的Content Type
2019-04-21
php使用redis持久化,redis如何持久化
2021-06-24
php7.1解压包安装,【Swoole】php7.1安装swoole扩展
2021-06-24