CSS揭秘之多重边框连续的图像边框
1.多重边框
我们可以通过使用border-image
来写一个多重边框,或使用多个元素来模拟多重边框,不过我们有更好的办法来制作一个多重边框,那就是使用box-shadow
的第四个参数(称为扩张半径)来完成一个多重边框的制作,肯定大家都已经非常熟悉box-shadow
了,不过我还是来复习一下。
(1) box-shadow:none | <shadow>#
where
<shadow>= [inset? && [ <offset-x><offset-y><blur-radius>? <spread-radius>? <color>? ] ]#
值(values) | 说明 |
---|---|
inset | 默认阴影在边框外,使用inset后,阴影在边框内; |
offset-x | 水平偏移量,负值将阴影放在元素左侧; |
offset-y | 垂直偏移量,负值将阴影放在元素上方; |
blur-radius | 默认0,不能为负值;值越大,模糊面积越大,阴影越大越淡; |
spread-radius | 默认0,正值阴影扩大,负值阴影收缩; |
color | 颜色,不设置则由浏览器决定; |
这里我们就用spread-radius
来制作一个多重边框,box-shadow
支持逗号分隔语法,来创建多个数量的投影;
我们需要注意的是,box-shadow
是层层重叠的,第一层投影位与最顶层,比如你想在下面示例(图1-1.png)外圈再加一道20px的黑色边框,你需要设置spread-radius
的值为60px(40px+20px);
示例:
background: red; box-shadow: 0 0 0 20px green, 0 0 0 40px blue;
效果:(图1-1.png)
图1-1.png注意:
box-shadow
是不会影响布局的,也不会受到box-sizing
的影响,这样制作出来的“假边框”也是不会响应鼠标事件的,比如点击;
(2)outline:[ <'outline-color'> || <'outline-style'> || <'outline-width'> ]
在某些情况下,你只需要两层边框,这是你可以通过常规边框,再加上outline
来生成外层的边框。它比box-shadow
(只能模拟实线边框)要灵活一些,还有一些别的边框样式,比如虚线边框;
还有一点就是它可以通过outline-offset
来控制它跟元素边缘的间距,这个属性接收负值;(图1-2.png)
示例:
background: gray;outline: 5px dashed #fff; outline-offset: -10px;
效果:(图1-2.png)
图1-2.png
(3)边框内圆角
outline示例:
background: red; outline: 10px solid green; border-radius: 20px;
效果:(图1-3.png
(outline)
)图1-3.png(outline)
我们来看上面的这个例子(图1-3.png(outline)
),我们发现outline
是不贴合元素圆角的,并不是我们想要的效果;那我们有什么方法来解决这个问题,实现边框内圆角这个效果呢?
我们先来看一下下面这个例子:
box-shadow示例:
background: red; border-radius: 20px; box-shadow: 0 0 0 20px blue;
效果:(图1-4.png
(box-shadow)
)图1-4.png(box-shadow)
.png
我们发现outline
不贴合元素圆角,但box-shadow
是贴合元素圆角的,那么想法就来了,把outline
和box-shadow
的边框颜色设置成一样不就实现这个效果了,哈哈,是不是有点黑科技的感觉;
示例:
outline: 10px solid green; border-radius: 20px; box-shadow: 0 0 0 10px blue;
效果:(图1-5.png && 图1-6.png)
图1-5.png:outline:green
,box-shadow:blue
图1-6.png:outline:green
,box-shadow:green
图1-5.png图1-6.png
注意,我们给box-shadow设置的扩张半径并不一定等于描边的宽度,我们只需要刚好填充上图(图1-3.png)的白色区域就可以了,那么我们设置多大的扩张半径可以填补这个区域呢?
哈哈,来初中的勾股定理要来了,看下图(图1-7.png)
看图上就已经很清楚了,就不说了,所以要填补上图(图1-3.png)的白色区域,就只需要(√2-1)*r 约等于8.28427px就可以了;
2.连续的图像边框
问题:
- 有时我们需要将一张图片应用为一个元素的边框,而不是背景;不仅如此,我还希望这张图片可以自动延伸并覆盖完整的边框区域,如下图(图2-1.png)效果;
图2-1.png- 你肯定会想到用
border-image
,它的原理是“九宫格伸缩法”:把图片分割成九份,然后把它们应用到元素边框相应的边和角;
关于它的工作原理,可以看我的上一篇文章CSS揭秘整理之半透明边框;- 问题在于,我们并不想让图片的某个特定区域固定在拐角处,而是希望拐角处的图片区域能够随着元素的宽高和边框的厚度变化而变化,你只要稍微尝试一下,就会发现用
border-image
并不可能做得到;
那我们应该怎么办呢?
解决方案:
- 最简单的解决方法就是使用两个元素,一个用来存放背景,一个用来存放内容,它需要一个额外的html元素,这显然是一个不太理想的方法;
- 我们可以利用css渐变和背景扩展来完成完全一样的效果,我们的主要思路:在背景图片之上,再叠加一层白色的背景,为了让下层的背景透过透明边框显示出来,我们给它设置不同的
background-clip
值;
示例:padding: 30px; border:20px solid transparent; background: linear-gradient(white,white), url('http://p0.so.qhimgs1.com/bdr/326__/t0146c3062c8d78dce0.jpg'); background-size: cover; background-clip: padding-box,border-box; background-origin: border-box;
效果:(图2-2.png)
图2-2.png
蚂蚁行军边框
利用css渐变和背景的扩展 ,先给背景设置一层条纹背景,再在上面设置一层白色实色背景,然后需要给条纹背景设置一个合适的background-size
值,最后将background-position
以动画的方式改变为100%,这样就完成滚动了;(这里设置background-size
还真的是有点麻烦啊,条纹换个角度就又要改一下才能无缝拼接,不知道有什么好的方法,望大神分享一下哦,嘻嘻)
where
<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
示例:
padding: 50px; border:20px solid transparent; background:linear-gradient(white,white) padding-box,repeating-linear-gradient(45deg,#fb3 25%,#58a 0,#58a 50%,#fb3 0 ,#fb3 75%,#58a 0) 0 / 40px 40px; /*background:linear-gradient(white,white) padding-box,repeating-linear-gradient(45deg,#fb3 25%,#58a 0,#58a 50%,#fb3 0 ,#fb3 75%,#58a 0); background-position: 0; background-size: 40px 40px;*/ animation: ants 12s linear infinite;
效果:(图2-3.gif)
图2-3.gif
本内容根据《css揭秘》, MDN 和自己的理解进行整理;
感谢您的阅读。
转载于:https://www.cnblogs.com/libin-1/p/6738190.html
CSS揭秘之多重边框连续的图像边框相关推荐
- html多重边框,中间空白,CSS揭秘之多重边框的实现
多重边框的两种实现方案: border-shadow outline Mutiple border .common { width: 25vw; height: 20vh; margin: 10%; ...
- css揭秘第二章:背景与边框,自己的学习笔记,如有错误请多指正
1 半透明边框 width: 200px;height: 200px;background: white;border: 10px solid hsla(0, 0%, 100%, 0.5);backg ...
- css揭秘笔记——背景与边框
背景与边框 半透明边框 知识点 background-clip: [border-box] |[padding-box] | [content-box];hsla(<色相>, <饱和 ...
- css 揭秘-读书笔记
css 揭秘 [希]Lea verou 著 css 魔法 译 该书涵盖7大主题,47个css技巧,是css进阶必备书籍,开阔思路,探寻更优雅的解决方案.这本书完全用css渲染出的html写成的(布局. ...
- 超实用CSS技巧总结(1)——背景和边框
文章内容来自CSS神书<CSS揭秘>. 献上膝盖就好 1.半透明边框 错误的写法: div {background-color: white;border: 10px solid hsla ...
- python打出由边框包围的_python opencv 图像边框(填充)添加及图像混合的实现方法(末尾实现类似幻灯片渐变的效果)...
图像边框的实现 图像边框设计的主要函数 cv.copyMakeBorder()--实现边框填充 主要参数如下: 参数一:源图像--如:读取的img 参数二--参数五分别是:上下左右边的宽度--单位:像 ...
- css揭秘实战技巧- 背景与边框 [一]
前言 这段时间,一直觉得css这块感觉每次写代码都是常用的那些基本属性,觉得始终没有对css有一个更深层次的掌握,所以,最近开始学习css相关进阶知识,首先第一关就是攻克 "css揭秘&qu ...
- 《CSS揭秘》-总结47个Css技巧(一):常用的背景与边框技巧
注:本文案例来源于<CSS揭秘>这本书. 1. 设置半透明边框无效? 使用 background-clip padding-box 解决. background white backgro ...
- 《CSS揭秘》-背景与边框
1.给一个容器设置一层白色背景和一道半透明白色边框. 思路:实际是设置的背景会延伸到边框所在的区域的下层,可以通过background-clip属性调整背景的默认行为. background-clip ...
- 透明水晶边框css,CSS揭秘——透明边框
当我们在实现透明边框的时候,会遇到一些问题.在阐述这些问题之前,首先看看什么是透明边框,总的来说,就如下图所示. 透明边框.png 众所周知的是,一旦给一个元素设置了背景之后,那么这个背景所包含的区域 ...
最新文章
- 自定义Dialog(一)
- java多线程编程_Java多线程编程实战指南+设计模式篇.pdf
- 面向对象阶段个人总结
- 未来语音识别技术的发展趋势将会怎样
- Docker 安装(学习笔记一)
- python pip 快速安装第三方库和下载好whl文件
- 油气井钻井风险预测与控制系统——需求分析
- CodeForces596D Wilbur and Trees
- linux下如何捕捉方向键
- Java实现 LeetCode 838 推多米诺(暴力模拟)
- 四轴自适应控制算法的一些尝试开源我的山猫飞控和梯度在线辨识自适应等算法—(转)
- 数据通信网络基本定义
- HTML在网页上不能显示图片问题
- Damerau–Levenshtein Distance的java实现
- [置顶]记录脑残失误,让达摩克利斯之剑永远高悬
- c语言程序一起来看流星雨,一起来看流星雨经典语录
- 转变财商思维,少走弯路多学套路!
- Ray Tracing in One Weekend从零实现一个简单的光线追踪渲染器
- COBIT设计指南信息和技术治理解决方案的设计
- FileTracker : error FTK1013: 在以下文件跟踪日志文件中,未能找到 unicode 字节顺序标记: E:\HT-Mobile\cocos2d-project\MobileP
热门文章
- 图片裁剪上传插件——jquery.photoClip.js
- 我们去庐山玩啦,公司组织,带上老婆
- 携程状告去哪儿一案有猫腻
- map、mapPartitions、mapValues、mapWith、flatMap、flatMapWith、flatMapValues
- 解决问题--DatabaseMetaData的getTables()返回所有数据库的表信息
- JSJQuery必备技能
- 入职后发现公司有这5种情况,别留恋,果断离职
- 这是我见过Java版的最好的OA系统,拿来即用,非常方便(附项目地址)
- 大牛总结的 Git 使用技巧,写得太好了!
- 陈皓:不灌鸡汤,说真的年龄渐长,技术人的发展之路该怎么走?