css边框图片的使用场景

做大屏可视化的时候，往往会有一些边框的背景图片，但是由于可视化的盒子宽高是自适应的，也就是宽度和高度是不固定的；
背景图片（原图）如下：

普通的做法就是直接把这个背景图片铺满整个盒子，但是你会发现图片会变形，有明显的拉伸效果：

使用边框图片就可以解决这个问题：

原理就是把这张图片切四刀，保证四个角的图片的比例不变，也就是四个角不会变形（1，3，6，8），然后2，4，5，7的位置拉伸或填充，这样无论盒子是多高多宽，都不会破坏图片四个角的比例；
代码如下：

border: 1px solid transparent;
border-image: url("./boder3.png") 400/100px/0px repeat;

注意：边框图片的大小不是由border的像素决定的，但是又必须要有border属性，否则border-image会不生效；border-image的第一个属性是图片地址，第二个属性是切的距离，第三个属性是边框的大小，第四个属性比较不常用，默认为0就好，第五个属性是选择填充还是拉伸；
效果如下：

css边框图片的使用场景相关推荐

29.CSS3边框图片效果
第二十三章 CSS边框图片效果一.属性解释用几个属性就可以嵌入图片形式的边框. 1.border-image-source : 引入背景图片地址 2.border-image-slice : ...
CSS控制图片大小、边框、对齐方式、文字环绕
CSS操作图片大小 width属性和height属性可以用于定义图片大小. width属性和hieght属性的属性值都是像素. CSS操作图片边框 border-width属性用于定义<img& ...
html边框绕着图片,CSS 边框
CSS 边框在 HTML 中,我们使用表格来创建文本周围的边框,但是通过使用 CSS 边框属性,我们可以创建出效果出色的边框,并且可以应用于任何元素. 元素外边距内就是元素的的边框 (border) ...
css实现图片自适应容器的几种方式
css实现图片自适应容器经常有这样一个场景,需要让图片自适应容器的大小. 1.img标签的方式我们马上就能想到,把width.height 设置为100%啊.来看一哈效果. <div cla ...
html照片与照片之间的间隔,css设置图片之间的间隔的方法
css设置图片之间的间隔的方法发布时间:2021-01-05 09:32:24 来源:亿速云阅读:116 作者:小新这篇文章将为大家详细讲解有关css设置图片之间的间隔的方法,小编觉得挺实用的, ...
css背景图片、圆角、盒子阴影、浮动
一.css背景图片 1.概述背景是css中一个重要的的部分,也是需要知道的css的基础知识之一.这里主要介绍有关背景图片的5种常见属性,分别是: (1). background-color: rgb ...
CSS3实战开发: 纯CSS实现图片过滤分类显示特效
CSS3实战开发: 纯CSS实现图片过滤分类显示特效原文:CSS3实战开发: 纯CSS实现图片过滤分类显示特效各位网友大家好,今天我要带领大家开发一个纯CSS的图片分类显示的网址导航,单纯看标题大 ...
CSS边框,背景,边距,溢出
CSS边框,背景,边距,溢出 css边框属性 border:宽度样式颜色; border-color; border-style; 边框样式:solid实现,dotted点状线,dashed虚线 ...
前端：CSS/10/伪类选择器，CSS列表属性，CSS边框属性，CSS内边距属性，CSS背景属性
CSS伪类选择器:给超链接加的样式(链接的不同状态加样式) 一个超链接,有四个状态: 正常状态(:link):鼠标没放上去之前的样式: 放上状态(:hover):鼠标放到链接上时的样式: 激活状态(: ...
通过css实现图片过渡放大的效果
通过css实现图片放大效果 css3当中有一个是过渡属性是transition,他要配和scale来使用,transition:scale(),这个括号里面填写数字,如果大于1,就是放大,如果小于1, ...

css边框图片的使用场景

css边框图片的使用场景相关推荐

最新文章

热门文章