css 透明背景_css 中多种边框的实现小窍门
一、多重边框[1]
背景知识:box-shadow,outline
鉴于使用场景的多元化,多重边框的设计越来越多,以往可以借助 border-image 属性应付一下,但是这个在css 代码层面并不是很灵活。现在我们借助 box-shadow 和 outline 两个属性来分别实现多重边框。1、box-shadow 方案
思路:利用 box-shadow 的第四个参数(扩张半径)的大小,多重投影
代码示例:
<div class="border-multiple"> 多重边框实现方案一:box-shadow </div> .border-multiple { margin: 50px auto; padding: 20px; width: 600px; background-color: #fff; box-shadow: 0 0 0 10px #f0f, 0 0 0 15px #00f, 0 2px 15px 15px rgba( 0, 0, 0, .8); }
多重边框--box-shadow
小结:
1、阴影并不影响布局,也不会受到box-sizing的影响
2、支持逗号分隔语法,可以创建任意数量的投影
3、缺点:只能实现实线的边框,不能实现其他样式的边框
2、outline 方案
代码示例:
<div class="border-outline"> 多重边框实现方案二:outline </div> .border-outline { margin: 200px auto; padding: 20px; width: 600px; background-color: #ff0; outline: 3px dashed #0f0; outline-offset: -10px; }
多重边框--outline
小结:
1、前提是实现两层边框
2、可能需要 outline-offset 的属性值
3、outline 的描边默认是矩形,当有圆角时会认为是 bug , 不能贴合圆角
4、不支持逗号语法
我自己是一名从事了多年开发的web前端老程序员,目前辞职在做自己的web前端私人定制课程,今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货,各种框架都有整理,送给每一位前端小伙伴,想要获取的可以添加我的web前端交流裙【600610151】即可免费获取。
二、边框内圆角[2]
背景知识:box-shadow,outline
为了解决上面例子小结3中的bug,可以用box-shadow 扩张半径来填补掉 圆角与outline 之间的空隙。
代码示例:
<div class="inner-rounding"> 需要借助 box-shadow、outline、“多重边框”来实现 注意点 : box-shadow 的扩展半径应该是 圆角半径的 0.5倍 </div> .inner-rounding { background-color: #ccc; margin: 50px auto; padding: 20px; width: 600px; padding: 20px; border-radius: 20px; box-shadow: 0 0 0 10px #f00; outline: 10px solid #f00; }
注意点 : box-shadow 的扩展半径应该是 圆角半径的 0.5倍;严格来说应该是(√2 - 1) 倍,这里取 0.5 倍是为了更好的计算
边框内圆角
三、半透明边框[3]
背景知识:rgba 或 hsla 颜色属性,background-clip
思路:让边框呈现在 被裁剪背景的 padding-box 里
代码示例:
<div class="border-opacity"> 半透明边框的实现 </div> .border-opacity { margin: 50px auto; padding: 20px; width: 600px; border: 10px solid hsla(0, 0%, 100%, 0.5); background-color: #fff; background-clip: padding-box; }
小结:
半透明边框的实现需要借助css3的 background-clip 的属性
background-clip有三个属性:
1、border-box: 背景被裁剪到边框盒(看不到边框)
2、padding-box: 背景被裁剪到内边距框(可以看见边框)
3、content-box: 背景被裁剪到内容框(边框紧贴着内容)
半透明边框效果图
四、连续的图像边框[4]
背景知识:css 渐变,基本的border-iamge,background-clip
先来看看 border-image 是如何来实现 图像边框的:border-image 的实现原理是九宫格伸缩法:把图片切割成九块,然后把它们应用到元素边框相应的边和角。
代码示例:
<p class="border-image">border-image 的实现原理是九宫格伸缩法:把图片切割成九块,然后把它们应用到元素边框相应的边和角。</p> <p class="border-image">我们并不想让图片的某个特定部分固定在拐角处;而是希望出现在拐角处的图片区域是随着元素宽高金额边框厚度的变化而变化的。</p> .border-image { border: 40px solid transparent; border-image: 33.334% url("http://csssecrets.io/images/stone-art.jpg"); padding: 1em; max-width: 20em; font: 130%/1.6 Baskerville, Palatino, serif; } .border-image:nth-child(2) { margin-top: 1em; border-image-repeat: round; }
border-image 效果图
缺点:我们并不想让图片的某个特定部分固定在拐角处;而是希望出现在拐角处的图片区域是随着元素宽高金额边框厚度的变化而变化的。
如何解决呢?
实现思路:
1、利用 css 渐变和背景的扩展
2、在背景图片上,在叠加一层纯白的实色背景
3、为了让下层的背景透过边框区域显示出来,需要给两层背景指定不同的 background-clip 值
4、在多重背景的最底层设置背景色,需要用一道从白色过渡到白色的 css 渐变来模拟出纯白色实色背景的效果
代码示例:
<p class="contituous-images">实现思路: 1、利用 css 渐变和背景的扩展 2、在背景图片上,在叠加一层纯白的实色背景 3、为了让下层的背景透过边框区域显示出来,需要给两层背景指定不同的 background-clip 值 4、在多重背景的最底层设置背景色,需要用一道从白色过渡到白色的 css 渐变来模拟出纯白色实色背景的效果 </p> .contituous-images { padding: 1em; border: 1em solid transparent; /* background: linear-gradient(white, white), url(http://csssecrets.io/images/stone-art.jpg); background-size: cover; background-clip: padding-box, border-box; background-origin: border-box; */ /* background 还可简写如下 */ background: linear-gradient(white, white) padding-box, url(http://csssecrets.io/images/stone-art.jpg) border-box 0 / cover; width: 21em; padding: 1em; overflow: hidden; /* 边框可拖拽 */ resize: both; font: 100%/1.6 Baskerville, Palatino, serif; }
连续的图像边框
还可以通过渐变图案实现信封样式的边框
代码示例:
<p class="envelope-border">还可以通过 渐变图案实现 信封样式的 边框</p>.envelope-border { padding: 1em; border: 0.5em solid transparent; background: linear-gradient(white, white) padding-box, repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0 / 3em 3em; max-width: 20em; font: 100%/1.6 Baskerville, Palatino, serif;}
信封边框效果图
- 多重边框 ↩
- 边框内圆角 ↩
- 半透明边框 ↩
- 连续的图像边框 ↩
作者:贵在随心
链接:https://www.jianshu.com/p/273e77cb99c6
css 透明背景_css 中多种边框的实现小窍门相关推荐
- css 中多种边框的实现小窍门
背景知识:box-shadow,outline 鉴于使用场景的多元化,多重边框的设计越来越多,以往可以借助 border-image 属性应付一下,但是这个在css 代码层面并不是很灵活.现在我们借助 ...
- 改变数据库中的True/False的小窍门
改变数据库中的True/False的小窍门 开发工具与关键技术:SQL Server 2014 Management Studio 改变数据库中的True/False 作者:李国旭 撰写时间:2019 ...
- java 验证码透明背景_Java中的证书透明度验证
java 验证码透明背景 因此,我有一个幼稚的想法,即除了证书有效性检查(在Java中)之外,将证书透明性验证作为每个请求的一部分也很容易. 牺牲了整个周末的一半时间,我可以证明这并不是一件小事. 但 ...
- php怎么加css和背景图,css的背景图怎么加边框
css背景图加边框的方法:首先创建一个HTML示例文件:然后通过"background-image"引入一张背景图:最后通过border属性设置边框即可. 本文操作环境:windo ...
- css横向排列_CSS中伪元素和伪类的经典使用技巧
随着前端技术的发展,CSS样式的制作在网页中占据着十分重要的地位.前台页面的样式布局.以及展现给用户的体验效果都离不开CSS;虽然在实际的开发中会大量的使用一些主流的UI样式框架,但这些样式框架每一个 ...
- css链接样式_CSS中的样式链接
css链接样式 CSS样式链接 (CSS Styling Links) The links in CSS can be styled in various ways to make our websi ...
- css叠层_CSS 中重要的层叠概念
最近在项目的过程中遇到了一个问题,menu-bar希望始终显示在最上面,而在之后的元素都显示在它之下,当时设置了 z-index 也没有效果,不知道什么原因,因此找了一下css有关层叠方面的资料,解决 ...
- css opacity属性_CSS中的opacity属性
css opacity属性 CSS | 不透明度属性 (CSS | opacity Property) With the growing need of making websites, the ne ...
- css 剪辑图片_CSS中的clip-path裁剪图片用法
CSS中的clip-path能够让你指定一个网页元素的显示区域,而不是缺省的显示全部.在过去有个等效的属性, clip,但在新的CSS规范中,它已经被标志为deprecated,用新的clip-pat ...
最新文章
- IDEA中提示:Warning:java: 源值1.5已过时, 将在未来所有发行版中删除
- Codeforces Round #323 (Div. 2) C. GCD Table
- Visual Studio交叉编译器提供对ARM的支持
- idea一键导包快捷键_十三肝了2晚的《IDEA操作手册-终极秘籍》终于来了...
- php 运行thinkphp,thinkPHP cli命令行运行PHP代码
- Keras Model AttributeError:’str‘ object has no attribute ’call‘
- WPF教程二:布局之StackPanel面板
- ic 卡获取帐号apdu指令_APDU指令格式解析
- 普林斯顿陈丹琦:如何让「大模型」变小
- 2021抖音上热门技巧有哪些?
- 疾病研究:我是一名34岁的进行性肌营养不良症患者
- MOS管常用电路分析
- Qt5.12案例 翻金币小游戏
- TVS管和稳压管两者比较
- JS调用摄像头、实时视频流上传(一次不成功的试验)
- 弘辽科技:大裁员之后,京东最新财报来了
- Python爬取微信公众号历史文章进行数据分析,发现2017年运营总结,可以这样写!...
- 机器人开发--常用仿真软件工具
- 密码算法之DES---3DES原理
- MindMaster------游乐项目
热门文章
- python封装 继承 多态 举例_python面向对象中的封装、继承、多态
- foreach、qAsConst用法总结
- DOF和MultiSwitch的使用
- html5实现圆圈里带一个三角形,CSS制作箭头图标代码(圆,三角形,椭圆)c
- python遥感影像分类代码_python,sklearn,svm,遥感数据分类,代码实例
- 使用apache配置基于IP地址的虚拟主机
- 前端小白也能快速学会的博客园博客美化全攻略
- 【安全牛学习笔记】kali TOP10 安全工具:
- XPE下关闭自动播放功能的方法
- oracle忘记密码,修改密码