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. 总结

实现半透明边框：

设置边框的大小和颜色 - - - 半透明

border: 10px solid hsla(0, 0%, 100%, 0.5);

设置 background-clip 属性的值为 padding-box，使背景延伸到内边距的外沿

background-clip: padding-box;

Tips:

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

CSS制作一个半透明边框相关推荐

HTML+CSS制作一个动画
HTML+CSS制作一个动画效果图如下: HTML部分结构如下: <!DOCTYPE html> <html lang="zh-Hans"><hea ...
【完整代码】用HTML/CSS制作一个美观的个人简介网页
[完整代码]用HTML/CSS制作一个美观的个人简介网页整体结构完整代码用HTML/CSS制作一个美观的个人简介网页--学习周记1 HELLO!大家好,由于<用HTML/CSS制作一个美观 ...
九宫格——用html+css制作一个网页
自用(仅供参考,如有错误欢迎指出) 要求: 1.通过html和css制作一个可以根据页面缩放进行变化的九宫格. 2.并且可以通过手机浏览器访问. 过程: 1.网页制作先不管通过网页访问这一项,先写一 ...
【meng_项目】python+flask+html+css制作一个简单的生日祝福语网页
python+flask+html+css制作一个简单的生日祝福语网页一个py文件: test.py 一个html文件: birthday_index.html 一张图片: ...
使用html和css制作一个小米商城页面
使用html和css制作一个小米商城页面创作不易,可否给作者点个赞再走 html部分: /** * author 阿木木 * date 10/01 14:32 * / `<html>&l ...
HTML5 + CSS制作一个网络照片墙
使用HTML5 + CSS制作一个照片墙是不难的,在大学里可以当作业交了,这是效果: 这个是有动画的,具体的效果在这个网站的home页,Welcome的源码参考了用html做一个漂亮的网站,个人网页, ...
记录html+css制作一个上下跳动效果的动画
需求想用html+css制作一个上下跳动效果的动画,然后记录一下代码,方便今后使用. 实例代码 <!DOCTYPE html > <html><head>< ...
用HTML+css制作一个动态的天气图标
前言本文讲解用HTML+css制作一个动态的天气图标,如果觉得对你有帮助请关注小编,你的支持就是我更新的动力! 成品展示: 本程序是一个动态的一.HTML部分 <!DOCTYPE html& ...
利用CSS制作一个向右的箭头
利用CSS制作一个向右的箭头 <style type="text/css">.box{/* 利用CSS制作一个向右的箭头 */width:200px;height:20 ...
用ps制作一个半透明的图片
在html的混合开发中出现的一个问题:在页面中模拟弹窗的时候下面写了一个半透明的div: 写法如下然而出现了下面的图层局部露出的情况,解决无果的时候,就用ps做了一个半透明的图片放上去了: 这里写作 ...

CSS制作一个半透明边框

CSS制作一个半透明边框

1. 知识储备

2. 具体实现

3. 总结

CSS制作一个半透明边框相关推荐

最新文章

热门文章