CSS制作一个半透明边框

CSS制作一个半透明边框CSS制作一个半透明边框,background-clip属性,如何实现半透明边框

大家好,又见面了,我是你们的朋友全栈君。

CSS制作一个半透明边框


1. 知识储备

对于如何使用 CSS 制作一个半透明边框,首先你要知道 background-clip 这个属性

  • background-clip: 设置元素的背景(背景图片或颜色)是否延伸到边框、内边距盒子、内容盒子下面(即用来确定背景绘制区域)

可以去 MDN 文档中 background-clip 具体学习一下它的用法。
它有着以下四个值:

  • border-box: [ 默认值 ] 背景绘画边框外沿(在边框下层,即这个元素会遮挡住背景)
  • padding-box: 背景延伸至内边距(padding)外沿不会绘制到边框处
  • content-box: 背景被裁剪至内容区(content box)外沿
  • text: 背景被裁剪成文字的前景色

2. 具体实现

先建立两个盒子出来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>半透明边框</title>
    <style> .box1 { 
      display: flex; justify-content: center; align-items: center; margin: 0 auto; height: 300px; width: 300px; background-color: gray; } .box2 { 
      height: 150px; width: 200px; background-color: aqua; } </style>
</head>
<body>
    <div class="box1">
        <div class="box2 ">
        </div>        
    </div>
</body>
</html>

此时效果如下:
在这里插入图片描述

这个时候,要给里面那个盒子加一个半透明边框,可以给它增添一个边框样式,里面使用 background-clip 属性。

/* 设置边框的大小和颜色---半透明 */
border: 10px solid hsla(0, 0%, 100%, 0.5);
/* 设置 background-clip 属性的值为 padding-box,背景就会延伸到内边距的外沿 */
background-clip: padding-box;

完整代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>半透明边框</title>
    <style> .box1 { 
      display: flex; justify-content: center; align-items: center; margin: 0 auto; height: 300px; width: 300px; background-color: gray; } .box2 { 
      height: 150px; width: 200px; background-color: aqua; /* background-clip 属性书写位置注意!!! 写于该元素的背景颜色的后面, 如果写于前面,则 background-clip 属性不会产生作用 */ border: 10px solid hsla(0, 0%, 100%, 0.5); background-clip: padding-box; } </style>
</head>
<body>
    <div class="box1">
        <div class="box2">
        </div>        
    </div>
</body>
</html>

这样,我们就实现了一个半透明的边框了,效果如下:
在这里插入图片描述


3. 总结

实现半透明边框:

  1. 设置边框的 大小 和 颜色 – – – 半透明
border: 10px solid hsla(0, 0%, 100%, 0.5);
  1. 设置 background-clip 属性的值为 padding-box,使背景延伸到内边距的外沿
background-clip: padding-box;

Tips:

根元素具有不同的背景绘制区域,因此在对其指定时, background-clip 属性无效
如果存在背景,背景始终绘制在边框后面

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/159298.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 计算机中为什么会用补码运算符号_负数求补码

    计算机中为什么会用补码运算符号_负数求补码总所周知,计算机内部的所有数都是以二进制的形式存在的。而二进制在计算机里又有多种编码方式——原码、反码、补码等。而在这些编码方式里面用得最多的不是最简单、最直接的原码而是补码。这是为什么呢?想搞懂这个问题首先得明白什么是原码、反码以及补码,如果你对他们还不太了解,那就先看看我另一篇博客——原码、反码、补码其实很简单。如果你对他们已经很熟悉,那么我们继续往下看。A、B、C三种相似的东西,

  • activiti5.22 springboot 流程引擎 实战全过程

    activiti5.22 springboot 流程引擎 实战全过程一.背景现在很多项目流程上比较复杂,业务上不复杂,对于这种项目,引入流程引擎会比较合适,流程有流程引擎去做管理,让设计更合理,开发更简单。市面上有很多款流程引擎,本人选用了使用率比较广的流程引擎activiti。activiti现在最高版本已经到7,springboot最高版本是6,由于网络上5.22版本资料最多,所以选用了5.22版本作为项目集成。二.activi…

    2022年10月20日
  • 前端语言的发展[通俗易懂]

    前端语言的发展[通俗易懂]本文转自自阮一峰的个人博客什么是前端?维基百科是这样说的:前端(front-end)和后端(back-end)是描述进程开始和结束的通用词汇。前端作用于采集输入信息,后端进行处理。计算机程序的界面

  • Allure报告开发自定义插件

    Allure报告开发自定义插件allure官网文档 https://docs.qameta.io/allure/alluregithub https://github.com/allure-framework/allure2当报告无法满足当前项目的需求,需要自定义内容来展示在报告中,即需要开发自己的自定义插件最终结果图:demo的结果是新增了一个MyTab目录栏,(demo未做有意义数据和css样式)…

  • leetcode-103二叉树的锯齿形层序遍历「建议收藏」

    leetcode-103二叉树的锯齿形层序遍历「建议收藏」给定一个二叉树,返回其节点值的锯齿形层序遍历。(即先从左往右,再从右往左进行下一层遍历,以此类推,层与层之间交替进行)。例如:给定二叉树 [3,9,20,null,null,15,7], 3 / \ 9 20 / \ 15 7返回锯齿形层序遍历如下:[ [3], [20,9], [15,7]]/** * Definition for a binary tree node. * struct TreeNode { * int

  • JAVA设计模式初探之装饰者模式

    这个模式花费了挺长时间,开始有点难理解,其实就是定义:动态给一个对象添加一些额外的职责,就象在墙上刷油漆.使用Decorator模式相比用生成子类方式达到功能的扩充显得更为灵活。设计初衷:通常可以使用继承来实现功能的拓展,如果这些需要拓展的功能的种类很繁多,那么势必生成很多子类,增加系统的复杂性,同时,使用继承实现功能拓展,我们必须可预见这些拓展功能,这些功能是编译时就确定了,是静态的。…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号