css 设置透明边框

最新推荐文章于 2024-04-05 13:36:21 发布
最新推荐文章于 2024-04-05 13:36:21 发布
阅读量3.1k 收藏 5
点赞数 4
文章标签： css 前端 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73096566/article/details/127697783
版权

想必大家都有这样的问题，我想设置一个透明的边框，为什么不行呢？da68ad28e6064694a884f1fd95cc6b81.png

 6bb70218974c4e4592e9879c21af1743.png

这就得谈到css3中的一个属性啦: background-clip。先看语法37cdfab552a343f993f41ce504d02b10.jpg 

在默认的的情况下北京会在方框内，如上图。若想绘制透明边框，就需要修改background-clip属性啦。padding-box和content-box都可以实现透明边框的效果。c097ec64507a40c4a4cd8c78d92b1acf.jpg 

 但是对于有内边距的盒子效果就不同啦！c33331e382324efcb06f2facb18835e9.jpg

 根据需求，设置不同的属性值就ok啦！

姬如祎
关注
  • 4
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
实例讲解使用CSS实现多边框和透明边框的方法
web前端基础入门教程
02-25 3574
　Backgrounds & Borders Level 3 还是一份草案的时候，CSS WG 就在是否支持多重边框的问题进行了大量的探讨，就像是讨论多重背景图片一样。不幸的是，当时认为多重边框的用处并不大，即使需要也可以使用border-image属性来模拟。不过，WG显然忘记了在 CSS 代码中灵活地调整边框，才是我们需要的，现在开发者只能使用一些Hack手段来模拟多重边框，比如使用多...
CSS 制作带边框背景色透明的消息框
09-22
主要介绍了CSS 制作带边框背景色透明的消息框的实例代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
css 半透明边框
m0_56935378的博客
05-31 98
background-clip:裁剪背景 规定背景的绘制区域。默认值：border-box ：背景会延申到边框处。padding-box：背景不会延申到边框处。
css 一个有背景颜色透明度的盒子 如何至于顶层显示 且不被其他盒子干扰
weixin_35748962的博客
01-04 1256
要让一个带有背景颜色透明度的盒子显示在顶层，并且不被其他盒子所干扰，你可以使用 CSS 的 "z-index" 属性。 在你想要放置在顶层的盒子的样式中，加入 "z-index" 属性，并设置一个大的值(比如说 "9999")。这样，这个盒子就会被放置在顶层，不被其他盒子所干扰。 例如： .top-layer { position: absolute; z-index: 9999; } ...
大牛深入讲解，html+css基础教程之CSS 透明边框和样式(1)，该如何高效实用Kotlin
最新发布
2301_78146994的博客
04-05 718
根据路线图上的重点去进行有针对性的学习，在学习过程中，学会写笔记，做总结。CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】html5 / css3 学习笔记JavaScript 学习笔记Vue 学习笔记一个人可以走的很快，但一群人才能走的更远。如果你从事以下工作或对以下感兴趣，欢迎戳这里加入程序员的圈子，让我们一起学习成长！
html表格边框线透明度度标签,css如何让边框具有透明度
weixin_30686891的博客
06-16 2882
css如何让边框具有透明度css让边框具有透明度，可以使用RGBA来表示边框的颜色。RGBA在RGB的基础上多了控制alpha透明度的参数。R(红)、G(绿)、B(蓝)三个参数，正整数值的取值范围为：0 – 255或用百分数值的取值范围为：0.0% – 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。A参数，取值在0~1之间，不可为负值(推荐学习：CSS视...
利用CSS3新特性创建透明边框三角
10-22
其中之一就是通过特定的技巧创建各种形状，比如本文讨论的透明边框三角。这个方法巧妙地利用了CSS边框的透明性质来构造出不同方向的三角形，而无需借助图像。以下将详细解释如何实现这一效果。 首先，我们需要了解...
纯css块边框流动线条效果
09-22
用css实现边框流动光线效果.........................................................................................
CSS3制作半透明边框(Facebox)类似渐变
09-25
CSS3制作半透明边框记得以前Facebook有段时间使用了非常多的半透明边框（Facebox），虽然现在不支持了，但是还是值得研究一下,接下来将详细介绍，需要的朋友可以参考下
CSS干货1-透明边框
九天翔龙的技术博客
02-17 1925
在一个项目中，要得到一个透明边框。 好简单~开始干~！ HTML： <div class="box"> </div> CSS： .box{ width: 300px; height: 150px; margin: 100px; background: #f00...
css 边框阴影 背景透明 padding，border不占总宽
Amen的博客
05-16 2960
边框阴影box-shadow:0px 0px 10px 5px #aaa inset;box-shadow: -2px 0 0 green, //左边阴影 0 -2px 0 blue, //顶部阴影 0 2px 0 red, //底部阴影 0 0 0 yellow; //右边阴影背景透明1.rbga RGB颜色值转换工具：  http://www.sioe.cn/yingyong...
CSS3 边框样式，图像透明度
yc_1314的博客
09-10 315
边框 属性 说明 border-image 设置边框的图像 border-radius 将边框的四角进行半径的变化 box-shadow 设置边框下拉的阴影 box-shadow：h v blur spread color inset; h表示水平阴影的位置，允许负值。 v表示垂直阴影的位置，允许负值。 blur表示模糊距离。 spread表示阴影的大小 color表示阴影的颜色 inset表示从外侧阴影改变内侧阴影。 <style> div {
padding只能设置大小，颜色透明。
weixin_47067248的博客
08-04 1447
padding不能设置颜色！！ 今天突然想设置一下padding颜色，发现了被我忽略的无脑问题。
css半透明边框
weixin_34004750的博客
05-09 240
核心：背景色会默认延伸到border下层。这里主要使用到background-clip属性，属性值包括border-box（背景延伸至边框外沿，但是在边框下层），padding-box（背景延伸至内边距外沿。不会绘制到边框处），content-box（背景被裁剪至内容区外沿）、text （背景被裁剪成文字的前景色,这是个实验性API，生产还不能用） <head> <title&...
css两种设置透明度的方法
weixin_64202598的博客
11-18 3679
【代码】两种设置透明度的方法。
css border设置为透明
魔侠的沙滩
11-17 5509
当元素自己有背景颜色时，border的颜色设置为rgba(0, 0, 0, 0.5)，透明度会无效。
html5+css设置图像/形状的透明度/图片边框设置/设置网页元素的阴影效果/设置图形的渐变效果/径向渐变与线性渐变/学习笔记
No1banana的博客
01-29 4108
一、CSS设置颜色与透明度 1.颜色透明度的设置，可以通过引入RGBA模式和opacity属性对背景与图片设置不透明度 1，RGBA模式 rgba(r,g,b,alpha); div{ width: 300px; height: 300px; background: rgb(242,35,36) url("user.jpg") no-repeat; rgba(242,35,36,0.7) /*设置颜色透明度为0.7*/ } 2，opacity模式 opacity:0
html怎么调语言框透明度,css怎么设计文本框透明度
weixin_42134051的博客
05-31 108
css怎么设计文本框透明度给input设置的css属性： background 和 color ，都用rgba 比如background: rgba(255,255,255,0.5);color: rgba(255,255,255,1);rgba中，a是透明度的意思，取值范围0-1，0是完全透明，1是完全不透明。(推荐学习：CSS视频教程)示例代码：Documentbody{backgroun...
css 圆形渐变透明边框
06-09
要实现CSS圆形渐变透明边框，可以使用CSS的linear-gradient()函数和border-radius属性。以下是一个例子： ``` div { width: 200px; height: 200px; border-radius: 50%; background: linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, transparent 50%, #fff 50%), linear-gradient(225deg, transparent 50%, #fff 50%), linear-gradient(315deg, transparent 50%, #fff 50%); background-size: 50% 50%; background-position: top left, top right, bottom right, bottom left; background-repeat: no-repeat; } ``` 在这个例子中，div元素被设置为一个200像素的圆形，使用border-radius属性。background属性使用四个线性渐变，每个渐变都是从透明到白色的。渐变的方向是45度、135度、225度和315度。background-size属性设置渐变的大小为50% 50%，background-position属性设置渐变的位置，background-repeat属性设置不重复渐变。这将创建一个圆形渐变透明边框。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

姬如祎

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值