CSS3干货27:CSS3 图片边框 border-image
border-image
从名字上不难理解,它的作用是给边框添加图片。类似于CSS中的background(背景)属性,border-image
属性可以给盒子边框添加背景图片。
一般的边框,要么是实线,要么是虚线(点状,短横线)(虽然也有其他样式的边框,但是不推荐使用)。
但是遇到一切特殊的边框,传统边框就束手无策了。
遇到这种边框,不妨考虑下用 border-image 。
注意:
使用 border-image 时,其将会替换掉 border-style 属性所设置的边框样式。也即 solid,dotted,dashed等。
虽然规范要求使用 border-image 时边框样式必须存在,但一些浏览器可能没有实现这一点。不过,我们在使用 border-image 时,强烈建议把边框样式加上。
border-image 属性是一个简写属性,用于设置以下属性:
border-image: url("images/xx.png") 位置 是否填充 重复性 ;
本文案例使用的图片:每个圆圈 30*30 大小。
基本HTML:
<div class="box">这个是内容
</div>
基本样式:
*{margin: 0;padding: 0;
}
.box{padding: 20px;width: 210px;margin-left: auto;margin-right: auto;border:30px #f30 solid;
}
1. border-image-source
图片来源地址。
对于border-image
而言,border-image-souce
是唯一必需的。
若无特殊指定,其他属性即为默认值。
.box{border-image: url("images/border.png");
}
黄色部分为 border 边框区域。
2. border-image-slice
边框图片切片。
border-image-slice [<number> | <percentage>]{1,4} && fill?
指定4个值(4条分割线:top, right, bottom, left)将 border-image-source
分割成 9 宫格,如下:
border-image-slice
四条线的值类型为:number | percentage。
number :不带单位的数值,但是 1 代表 1个图片像素。千万不要给数值带单位哦。
percentage:百分比。
值(数值、百分比)可以写 1-4 个,理解方式参考 padding 和 margin 的值。
.box{/* 上下切片位:30px。左右切片位:20px*/border-image: url("images/border.png") 30 20;
}
fill “填充”:源图片 9 宫格的中心块将作为该元素的背景。
.box{border-image: url("images/border.png") 30 20 fill;
}
3. border-image-width
边框图片宽度。
border-image-width: [ <length> | <percentage> | <number> | auto ]{1,4}
border-image-width
参数的四种类型:
length:带 px, em, in … 单位的尺寸值
percentage: 百分比
number: 不带单位的数字;它表示 border-width 的倍数。
auto: 使用 auto, border-image-width 将会使用 border-image-slice 的值
border-image-width
的参数不能为负值。
border-image-width
的缺省值是 number 类型:1,即边框图片的宽度跟边框的宽度一致。
图中,边框图片所占的宽度为边框宽度 border-width 的 0.2。
4. border-image-outset
定义边框图像可超出边框的大小。
border-image-outset:[ <length> | <number> ]{1,4};
.box{border-image: url("images/border.png") 30 fill;border-image-width: 1;border-image-outset: 30px;
}
5. border-image-repeat
定义图片如何填充边框。
或为单个值,设置所有的边框;或为两个值,分别设置水平与垂直的边框。
border-image-repeat:[ stretch | repeat | round | space ]{1,2} ;
stretch:拉伸。默认值。
.box{border-image: url("images/border.png") 30 fill stretch;
}
repeat:重复。可能出现图片不完整情况。
.box{border-image: url("images/border.png") 30 fill repeat;
}
round:平铺图像,当不能整数次平铺时,根据情况放大或缩小图像。
.box{border-image: url("images/border.png") 30 fill round;
}
space:平铺图像 。当不能整数次平铺时,会用空白间隙填充在图像周围(不会放大或缩小图像)
.box{border-image: url("images/border.png") 30 fill space;
}
案例:邮票风格的图片边框
明白了图片边框的原理。那么,之前给的效果就很好做了。
所用到的图片如下:
HTML:
<img src="data:images/w.jpg" class="img" alt="">
CSS:
*{margin: 0;padding: 0;
}
body{background: #888;
}
.img{border:31px #000 solid;margin-top: 30px;display: block;margin-left: auto;margin-right: auto;border-image: url("images/youpiao.png") 31 round;
}
CSS3干货27:CSS3 图片边框 border-image相关推荐
- 图解css3:核心技术与案例实战. 3.3 CSS3图片边框属性
3.3 CSS3图片边框属性 border-image效果在CSS2中,只有使用背景图片来制作,而且制作过程非常复杂,做完后也很难维护.如今CSS3中增添了一个图片边框的属性,能够模拟出backgro ...
- html怎么做出相框的效果,使用CSS3制作PS级的图片边框效果
当一个开发者需要制作图片边框效果时通常有两种选择:一是使用Photoshop来制作,二是在通过CSS来渲染"盒中盒"的效果.在这个教程中,我们要制作一种带复杂边框的相框效果,通过 ...
- html图片的边框属性,css3图片边框border-image的用法
对于CSS属性 border ,相信所有的WEB开发人员都非常熟悉.我们可通过设置HTML元素的 border 的宽度.颜色.样式,来让HTML元素表现出不同的边框,比如双线.虚线.圆点线.但不管你怎 ...
- css 科技 边框_一篇文章带你学习CSS3图片边框
这篇文章我们来讲一下在网站建设中,一篇文章带你学习CSS3图片边框.本文对大家进行网站开发设计工作或者学习都有一定帮助,下面让我们进入正文. 使用CSS3 border-image 属性,你可以在元素 ...
- html盒子左右边框边距,盒子模型之CSS3学习之边框(Border)
本篇文章给大家带来的内容是关于盒子模型之CSS3学习之边框(Border) ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 盒子模型之border 边框相关属性 border-wid ...
- [css] 如何使用CSS3的属性设置模拟边框跟border效果一样?
[css] 如何使用CSS3的属性设置模拟边框跟border效果一样? <!DOCTYPE html> <html lang="en"> <head& ...
- HTML背景渐变圆圈,CSS3 基础(1)——边框圆角背景渐变
css3 简介 CSS3被拆分为"模块".旧规范已拆分成小块,还增加了新的. 一些最重要CSS3模块如下: 选择器.盒模型.背景和边框.文字特效.2D/3D转换.动画.多列布局 C ...
- html鼠标移上去变色放大,CSS3 鼠标滑过图片突出放大效果 | 腾讯云
今天给大家分享一款简单实用的CSS3鼠标滑过图片放大特效,我们可以将它应用在相册中,或者是轮播展示的图片中,这样可以将鼠标移到图片上进行快速预览图片.同时你也可以在此基础上扩展它,比如给图片加投影和边 ...
- css3选择器、背景、边框、渐变、阴影以及文本效果的介绍及实现
HTML代码: <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
最新文章
- The application does not contain a valid bundle identifier.解决方法
- Spring-Spring4.X 概述
- 当map遇上range
- golang func 入参为func_Golang函数常见用法
- Python API快餐教程(1) - 字符串查找API
- linux 通配符 元字符 转义字符
- for循环语句例题及解析python_Python入门第8课,for语句综合练习,突破循环累加难点...
- 用user-selection实现让页面上的内容不能被选中
- ffmpeg推流 av_dict_set 参数设置解析(降低延时、处理花屏、改善画面质量)(实时更新)
- 学生信息管理系统(纯前端页面)———无后端数据库
- Spring常用设计模式--抽象工厂模式
- php计算1000000以内的质数,1000000以内质数表
- 最大似然估计,最大后验估计,贝叶斯估计联系与区别
- linux系统日志文件介绍
- OpenCV图像处理总结 ——用opencv给图片换背景色为例
- 中国四大发明原理//2021-2-6
- 流媒体加速服务的详细讲解
- TOY++美私奢玩:TEAx正茶链盟 +雅贡臻品登陆台北!跨界斜杠派展
- 校招前端二面常考react面试题(边面边更)
- 最全支付系统设计包含:账户,对账,风控......
热门文章
- MATLAB-偏最小二乘回归分析
- 华为nova5i pro鸿蒙,关晓彤又要用nova 5i Pro来成都搞事情了?
- GitHub创建本地分支并且和GitHub远程分支建立关系
- Java 中利用Calendar类的方法判断当前年是闰年还是平年
- idea切换Git分支时保存未提交的文件
- MySQL读未提交级别究竟是否加锁
- spring @Transactional事务未提交导致的并发问题
- 华中科技大学计算机系帅哥,华科帅哥为啥没人理?!
- FTP编程实验——实现文件上传下载(基于Python3.7和PyQt5)
- iPhone“特价版”便宜2000多元:但代购党要哭了