《css揭秘》笔记(二),半透明边框
发布日期:2022-02-15 02:36:18 浏览次数:6 分类:技术文章

本文共 781 字,大约阅读时间需要 2 分钟。

《css揭秘》笔记(二),半透明边框

半透明边框

如果用hsla<div></div>设置一个半透明的边框,相关css设置(此处设置的是一个红色的divhsla设置的是一个灰色的半透明色):

.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 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:《css揭秘》笔记(三),多重边框
下一篇:《css揭秘》笔记(四), 背景定位

发表评论

最新留言

路过,博主的博客真漂亮。。
[***.116.15.85]2024年03月11日 17时59分34秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

MySQL常见的主从复制架构_如何搭建经典的MySQL 主从复制架构 2019-04-21
编写python程序、计算账户余额_小明有20w存款存在余额宝中,按余额宝年收益为3.35%计算,用Python编写程序计算,多少年后小明的存款达到30w?... 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
java程序中执行maven_java – 将一个enviornment变量传递给Maven中的已执行进程 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 pclzip.lib.php,php使用pclzip类实现文件压缩的方法(附pclzip类下载地址) 2019-04-21
php dns更新,php_mzdns: 站群,大量域名 通过 dns 服务商 api 批量添加 ip 工具。你懂的~ 基于 mzphp2 框架。... 2019-04-21
jdk 1.8 java.policy,JDK1.8 导致系统报错:java.security.InvalidKeyException:illegal Key Size 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