CSS揭秘之《制作半透明边框》

xiaodao 发布于2019-08-29 13:20 / 3149人阅读

摘要：默认状态下，背景会延伸到边框的区域下层可以通过属性来调整上述默认行为所带来的不便这个属性的初始值是，意味着背景会被元素的边框的外沿框裁切掉实现半透明边框代码如下通过设置通道然后具体效果见链接

1、默认状态下，背景会延伸到边框的区域下层
2、可以通过 background-clip 属性来调整上述默认行为所带来的不便；这个属性的初始值是 border-box，意味着背景会被元素的 border box（边框的外沿框）裁切掉
实现半透明边框代码如下：

         body {
            background-image: url("./images/stone-art.jpg")
        }

        div {
            max-width: 20em;
            padding: 2em;
            margin: 2em auto 0;
            font: 100%/1.5 sans-serif;
            /* 通过border设置a通道 然后background-clip: padding-box */
            background-color: #fff;
            border: 10px solid hsla(0, 0%, 100%, .5);
            background-clip: padding-box
        }

    
        Can I haz semi-transparent borders? Pretty please?

具体效果见链接

云服务器 GPU云服务器半透明半透明效果半透明度 html标签半透明

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112534.html

CSS揭秘之《制作半透明边框》

摘要：默认状态下，背景会延伸到边框的区域下层可以通过属性来调整上述默认行为所带来的不便这个属性的初始值是，意味着背景会被元素的边框的外沿框裁切掉实现半透明边框代码如下通过设置通道然后具体效果见链接 1、默认状态下，背景会延伸到边框的区域下层2、可以通过 background-clip 属性来调整上述默认行为所带来的不便；这个属性的初始值是 border-box，意味着背景会被元素的 bor...

Berwin 2019-08-20 19:08 评论0 收藏0
CSS揭秘之《条纹背景》

摘要：先来说说渐变吧效果图如下所示也就是说真正的渐变只出现在容器从到的高度区域如果把两个色标合在一起，会怎样呢是这样规定的如果多个色标具有相同的位置，它们会产生一个无限小的过渡区域，过渡的起止色分别是第一个和最后一个指定值。先来说说渐变吧 background: linear-gradient(#fb3 20%, #58a 80%); 效果图如下所示：也就是说真正的渐变只出现在容器 60%...

jsliang 2019-08-20 19:08 评论0 收藏0
CSS揭秘之《条纹背景》

摘要：先来说说渐变吧效果图如下所示也就是说真正的渐变只出现在容器从到的高度区域如果把两个色标合在一起，会怎样呢是这样规定的如果多个色标具有相同的位置，它们会产生一个无限小的过渡区域，过渡的起止色分别是第一个和最后一个指定值。先来说说渐变吧 background: linear-gradient(#fb3 20%, #58a 80%); 效果图如下所示：也就是说真正的渐变只出现在容器 60%...

phpmatt 2019-08-29 13:20 评论0 收藏0