css 设置border透明度

最新推荐文章于 2024-01-26 23:57:33 发布
最新推荐文章于 2024-01-26 23:57:33 发布
阅读量2.1w 收藏 6
点赞数 2
分类专栏： 前端 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35081500/article/details/106220320
版权

border的color使用rgba()

border-bottom: 1px solid rgba(20,81,154,0.5);

0.5 就是透明度

注意：使用rgba 不是 rgb

Lv骚年
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用CSS3绘制三角形的简单方法
01-19
利用CSS的border以及它的属性值transparent来实现三角形,其中最主要的是要明白由于div的高度跟宽度都为0，margin，padding也为0，所以元素框的大小就是他的border的叠加，由于相邻boder会重叠，故存在内容宽高时其实任意一边存在的border都是梯形的，当div内容宽高为0时，border就表现为三角形，将四个border的颜色设置为transparent表示边框透明，而将右边框颜色再设置为红色就发现三角形出现了，其实这个三角形是右边框。 CSS Code复制内容到剪贴板 <!DOCTYPE html>    <html>    <bo
网页设计应该熟知的CSS 3.0技术
01-19
1. 基本的xhtml标记 在开始这个教程之前，让我们来做点xHtml标记，我们需要的几个DIV来完成效果的显示，如下： #round, 这个显示CSS 3圆角 #indie, 单个角的显示 #opacity, 不透明度 #shadow, 不用制图工具制作投影 #resize, 可调节大小 因此，我会的xHtml会像下面这样，你可以自己建立一个html文件： <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/x
css设置透明的border
树上骑个猴的博客
04-08 8835
.container{ background-color: black; border: 1px solid;/*设置透明边框*/ }
CSS3制作半透明边框(Facebox)类似渐变
12-13
CSS3制作半透明边框记得以前Facebook有段时间使用了非常多的半透明边框（Facebox），虽然现在不支持了，但是还是值得研究一下。  你有可能觉得这样写就行了： 折叠展开CSS Code复制内容到剪贴板  复制代码代码如下:#lightbox { background: white; border: 20px solid rgba(0,0,0,0.3); }  然而白色背景会一直扩散到边框上，变成如下的样子： 还好我们有CSS3的background-clip属性 CSS Code复制内容到剪贴板  复制代码代码如下: #lightbox { -moz-background-clip
纯CSS绘制漂亮的圆形图案效果
12-13
另外一种也可以用CSS简单的实现的形状是圆形。使用border-radius,你可以画出各种漂亮的圆形图案。 CSS代码 只需要将你的网页元素的每个边的border-radius甚至成50%，你就能得到任意大小的圆： 复制代码代码如下:.circle { border-radius: 50%; width: 200px; height: 200px; /* 宽度和高度需要相等 */}这确实是非常的简单，但我们无法抵挡在之上使用CSS渐变色和基本旋转动画的诱惑：: 复制代码代码如下:/* 动画定义 */@keyframes spin { from { transform: rotate(0d
css border设置为透明
魔侠的沙滩
11-17 5396
当元素自己有背景颜色时，border的颜色设置为rgba(0, 0, 0, 0.5)，透明度会无效。
CSS盒子模型(border、padding、margin设置)、行内块或行内元素水平居中、去除li小圆点、圆角、盒子阴影、文字阴影、透明度
Bulut0907
01-27 4870
目录1. 盒子模型的组成1. border边框1.1 border-collapse: collapse2. padding 1. 盒子模型的组成 1. border边框 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>test title</title> <style> div {
border透明度
weixin_30702887的博客
12-22 1440
border需要设置透明度时，用box-shadow要比用border：5px solid rgba（）设置的透明度更高。 转载于:https://www.cnblogs.com/niujie/p/6212670.html
css设置border-bottom透明度
深漂小码哥
07-15 2025
/** 注意事项： 1.rgba不是rgb，最后一个参数是透明度，本例即0.06 2.十六进制颜色值要转为rgb的，本例#000000转为RGB为rgb(0,0,0) **/ border-bottom: 1px solid rgba(0,0,0,0.06);
table用position: sticky固定多层表头，滑动滚动条border边框透明解决方法
最新发布
大雾起了清晨
01-26 847
主要是在元素边框的外围设置轮廓，outline不占据空间，绘制于元素内容周围。同时可以设置轮廓的颜色outline-color，宽度outline-width，以及样式outline-style。：我们发现，只要设置了border边框，这个位置滑动有内容经过就会出现如图的情况。：用outline（轮廓）替代border,以达到我们想要的样式。
css border三角形
11-25
css border三角形
CSS实现输入框的周围高亮效果让边框发亮
11-21
又到周末了，这一天天过的真快，明天应该回老家了，不知道会不会有机会进行编写，尽量争取吧，实在不想就这样间断。如果说从前会一天天无聊到爆，那现在自己应该是一天天忙的要死，欠缺了太多东西，那些浪费的时间可不是懊恼就能解决的，出来混，终归是要还的啊。 先来幅图画，显示下什么是所谓的高亮效果   在输入框周围出现了亮光，或者说阴影造成边框发亮的假象，这就是我所说的高亮效果，那究竟该如何是实现呢？ 这样我们先来上一下代码，我是用的枫树浏览器，是webkit内核，所以这里只写了webkit 复制代码代码如下: .aa:HOVER{ -webkit-transition:border linear .
利用js+css简单实现半透明遮罩弹窗
01-19
思路： 　　两个div，一上一下。上面的包含iframe，用以展示弹窗内容。下面的div实现半透明的遮罩效果。 代码： 复制代码代码如下: <div id=”div_window2″ xss=removed>　　<table width=”99%” height=”99%” border=”0″ cellpadding=”0″ cellspacing=”0″ align=”center”>　　　　<tr>　　　　　　<td widt
input标签 设置纯数字输入
Lv骚年
09-26 9573
input标签 设置纯手机号输入（键盘输入或粘贴时自动去除非数字字符） 解决方案： <input type="tel" placeholder="请输入11位手机号码" oninput="value=value.replace(/[^\d]/g,'');if(val...
css3动画设置无效
Lv骚年
09-20 7496
首先 确认设置的元素为块级元素 或是 inline-block
微信浏览器 点击 出现卡顿现象及解决方案
Lv骚年
10-22 7010
做的小游戏在手机微信中打开测试和在UC浏览器中测试， 点击时候微信浏览器出现明显的卡顿现象， 查阅发现是： 主要是由于200ms超时导致内核不一定会一直处理touchmove事件，一旦超时会将后续所有的事件转交给UI处理，导致touchmove不会一直触发。系统浏览器也存在同样的问题，为了解决开发者需要，建议开发者在touchstart时调用event.preventDefault，这样就可以保...
同时使用vue 和 jquery， jquery事件绑定失效
Lv骚年
08-21 6296
问题： 一个h5项目同时引用了vue.js和jquery.js， 发现jquery绑定的事件失效。 原因是： vue会重新渲染dom,加上是异步实例vue.所以正常写程序的话jq的$()获取的元素不是vue渲染后的元素. 解决办法： 先加载vue.js，让页面渲染完成后加载jq，给jq绑定ready事件 $(document).ready(function(){ ...
移动端页面在IOS里滑动不顺畅解决办法
Lv骚年
09-20 3618
开发移动端的同学可能都知道，当在你用overflow-y:scorll属性的时候，内容超出容器溢出滚动的效果很迟顿，特别是在IOS系统里，通常情况下，我们为了追求好的用户体验，会使用屏幕滚动插件better-scroll了，这个插件是真心好用，但是有些情况下我们可能并不想那么麻烦，而且页面的体验要求也没有那么高，下面给大家介绍一个简单偷懒的办法． 这时候可以使用-webkit-overf...
border 透明度
08-19
设置元素的边框透明度可以通过两种方法。第一种方法是使用box-shadow属性，这种方法比使用border属性设置的透明度更高。通过设置box-shadow的颜色为rgba()并设置透明度，可以实现边框的透明效果。第二种方法是使用filter属性，通过设置filter的alpha(opacity)值为0-100之间的透明度百分比，可以实现边框的透明效果。透明边框可以应用于引导元素的遮罩，使引导元素透明并同时通过边框设置透明度来遮挡其他元素。在某些需要定位遮罩的场景中，可以利用元素（或者伪元素）的边框进行定位。所以，根据需求和实际情况，可以选择其中一种方法来实现边框的透明效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [border透明度](https://blog.csdn.net/weixin_30702887/article/details/96127773)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [Div的一些设置关于边框和透明度的](https://download.csdn.net/download/weixin_38669729/13678843)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [css border设置为透明](https://blog.csdn.net/u012787757/article/details/121384686)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值