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)


相关推荐

  • cxfreeze打包python程序的方法说明(生成安装包,实现桌面快捷方式、删除快捷方式)

    cxfreeze打包python程序的方法说明(生成安装包,实现桌面快捷方式、删除快捷方式)一、cxfreeze基础1、cxfreeze功能python代码文件转exe方法有三种,分别是cx_freeze,py2exe,PyInstaller,这三种方式各有千秋,本人只用过py2exe和

  • java map 缓存_缓存用于

    java map 缓存_缓存用于缓存什么是缓存?平常的开发项目中,多多少少都会使用到缓存,因为一些数据我们没有必要每次查询的时候都去查询到数据库。缓存的使用场景:在Java应用中,对于访问频率高,更新少的数据,通常的方案是将这类数据加入缓存中,相对从数据库中读取,读缓存效率会有很大提升。在集群环境下,常用的分布式缓存有Redis等。但在某些业务场景上,可能不需要去搭建一套复杂的分布式缓存系统,在单机环境下,通常是会希望使用内部的缓存(LocalCache)。使用map缓存方案:基于ConcurrentHashMap实现数

  • 短信指令_手机自动发短信一串代码

    短信指令_手机自动发短信一串代码===========移动短信指令=================发送CXBX到10086,查询当月套餐剩余短信条数。发送CXGFX到10086,查询当月飞信GPRS套餐剩余流量。发送CXGTC到10086,查询当月GPRS套餐剩余流量。发送CXCCT到10086,查询当月超级畅听套餐剩余流量。发送CXGLL到10086,查询当月已使用的GPRS流量总和。发送CXDX120,查询当月可选计划…

  • 频分复用带宽计算_信道复用的概念

    频分复用带宽计算_信道复用的概念网工05上半年(25)题:10个9.6KB/s的信道按时分多路复用在一条线路上传输,如果忽略控制开销,在同步TDM情况下,复用线路的带宽应该是(24);在统计TDM情况下,假定每个子信道只有30%的时间忙,复用线路的控制开销为10%,那么复用线路的带宽应该是(25)。供选择的答案(24)A.32Kb/s B.64Kb/s C.72Kb/s D.96Kb/s(2…

    2022年10月11日
  • java中数组的最大下标是_c语言中数组下标从几开始

    java中数组的最大下标是_c语言中数组下标从几开始packagepractice;publicclassExtremeValueAndIndex{ publicstaticvoidmain(String[]args){ intnumberArr[]={7,3,5,1,8,4}; intmax=numberArr[0],min=numberArr[0]; intmaxIndex=0,minIndex=0; for(inti=1;i<numberArr.

    2022年10月11日
  • Axiso解决跨域访问

    Axiso解决跨域访问这里以访问豆瓣Top250为例,直接访问如下:this.$axios.get(&amp;amp;amp;amp;amp;quot;http://api.douban.com/v2/movie/top250&amp;amp;amp;amp;amp;quot;).then(res=&amp;amp;amp;amp;amp;amp;gt;{console.log(res)}).catch(err=&amp;amp;amp;amp;amp;amp;gt;{

发表回复

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

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