CSS揭秘-半透明边框与多重边框
场景一:
实现半透明边框:
由于CSS样式的默认行为,背景色的渲染范围是 content+padding+border。
半透明边框被主调色影响, 实现的效果为
解决方案:
使用background-clip 属性规定背景的绘制区域,使得绘制区域仅限制在content+padding。
Div {
border:10px solid rgba(0,0,0,.5);
background: lightblue;
background-clip: padding-box;
}
补充: background-clip 不兼容IE6-8, Opera10
场景二:
实现多重边框:
方案1: 使用box-shadow来生成多重投影
代码与效果如下:
div {
background:#c3e6f4;
box-shadow:0 0 0 15px #b7dae6,0 0 0 30px #cce2ea;
}
方案2:盒子边框结合描边属性(outline
)
特点: 只能实现两重边框,更加灵活,能使用虚线等效果
代码与效果如下:
div {
border: 6px dashed #c3f4ec;
outline: 10px solid #d9faf6;
background-clip: padding-box;
}
CSS揭秘-半透明边框与多重边框的更多相关文章
- CSS3实现原腾讯视频透明边框,多重边框等(关于边框那些不为人知的事情)
1.hsla或rgba实现半透明边框. rgba在rgb的基础上增加了透明通道,就不详细说了,下面重点说下hsla: 说明: HSLA(H,S,L,A) 取值: H:Hue(色调).0(或360)表示 ...
- 利用CSS3实现透明边框和多重边框
使用background-clip属性实现透明边框 .bordertest { border: 30px solid hsla(0,0%,90%,.5); background: #bbb; back ...
- CSS揭秘之多重边框&连续的图像边框
1.多重边框 我们可以通过使用border-image来写一个多重边框,或使用多个元素来模拟多重边框,不过我们有更好的办法来制作一个多重边框,那就是使用box-shadow的第四个参数(称为扩张半径) ...
- [css 揭秘]:CSS揭秘 技巧(二):多重边框
我的github地址:https://github.com/FannieGirl/ifannie/ 源码都在这上面哦! 喜欢的给我一个星吧 多重边框 问题:我们通常希望在css代码层面以更灵活的方式来 ...
- [css 揭秘]:CSS揭秘 技巧(一):半透明边框
我的github地址:https://github.com/FannieGirl/ifannie/ 源码都在上面哦 喜欢的给我一个星吧 半透明边框 css 中的半透明颜色,比如用 rgba() 和 h ...
- CSS揭秘—多重边框(二)
前言: 所有实例均来自<CSS揭秘>,该书以平时遇到的疑难杂症为引,提供解决方法,只能说秒极了,再一次刷新了我对CSS的认知 该书只提供了关键CSS代码,虽然有在线示例代码链接,但访问速度 ...
- [css]《css揭秘》学习(二)-多重边框
一.box-shadow属性 box-shadow除了生成投影,还可以用来生成边框:它接受第4个值作为扩张半径,0的x轴偏移+0的y轴偏移+0的模糊值+0的扩张半径,得到的显示效果和边框是一样的:但是 ...
- CSS揭秘—透明边框(一)
前言: 所有实例均来自<CSS揭秘>,该书以平时遇到的疑难杂症为引,提供解决方法,只能说秒极了,再一次刷新了我对CSS的认知 该书只提供了关键CSS代码,虽然有在线示例代码链接,但访问速度 ...
- 02--css背景与边框--css揭秘
背景与边框 一 半透明边框 rgba/hsla颜色 1.难题 假设我们想给一个容器设置一层白色背景和一道半透明白色边框,body 的背景会从它的半透明边框透上来.我们最开始的尝试可能是这样的: #bo ...
随机推荐
- fiddler深入学习
参考:https://www.cnblogs.com/zhizhiyin/p/6807649.html http://blog.chinaunix.net/uid-27105712-id-373882 ...
- idea安装、配置及基本使用
下载 下载地址:https://www.jetbrains.com/idea/download/#section=windows Ultimate为旗舰版,功能全面,插件丰富,按年收费. Commun ...
- 第二阶段冲刺(个人)——seven
今天的计划:设计总的界面背景,统一风格. 昨天做了什么?优化登录.注册信息的填写判断.
- Educational Codeforces Round 78 (Rated for Div. 2) D. Segment Tree
链接: https://codeforces.com/contest/1278/problem/D 题意: As the name of the task implies, you are asked ...
- opengl第一个工程
#include <iostream> #include <glad/glad.h> #include <GLFW/glfw3.h> void framebuffe ...
- 深入js系列-类型(对象)
开篇 值的传递方式 1.值传递 表示传递过程中复制了值 2.引用传递 表示传递过程中传递的是值的引用 js的传递方式 值传递 看下面的例子 // 这里值传递很容易理解 var a = 1 var b ...
- ZROI 暑期高端峰会 A班 Day3 字符串
FBI Warning:本文含有大量人类的本质之一 后缀树 反正后缀树就是反串的后缀自动机的 Parent 树,就不管了. 然而 SAM 也忘了 好的假装自己会吧--dls 后缀自动机 大概记得,不管 ...
- concurrent(三)互斥锁ReentrantLock & 源码分析
参考文档:Java多线程系列--“JUC锁”02之 互斥锁ReentrantLock:http://www.cnblogs.com/skywang12345/p/3496101.html Reentr ...
- 2018-2019-2 网络对抗技术 20165230 Exp7 网络欺诈防范
实验目的 本实践的目标理解常用网络欺诈背后的原理,以提高防范意识,并提出具体防范方法. 实验内容 简单应用SET工具建立冒名网站 ettercap DNS spoof 结合应用两种技术,用DNS sp ...
- [技术博客]使用wx.downloadfile将图片下载到本地临时存储
目录 目标 代码展示 重点讲解 目标 在上一篇技术博客中,我们生成的海报中包含图片,这些图片是存储到服务器上的,而canvas的drawimage函数只能读取本地文件,因此我们在drawCanvas之 ...