border-image图片边框的使用。

今天看到一个老项目的可视化显示还是以前的边框，略显单调，所以想着使用border-image来做是否更加美观。

这是目前的效果。先看看这个css属性怎么设置吧。（分开写的话书写顺序最好和我的保持一直，不然会有意外的收收获）

首先就是需要使用的图片边框的来源

 border-image-source: url('./bgi.png'); // 用法和background一样

定义图片边框裁剪的切割位置

//border-image-slice: 60; // 等同于border-image-slice: 60 60 60 60; 顺序是上右下左，注意不要带单位border-image-slice: 48 27 40 35;// 详解看下图

定义图片边框的宽度

border-image-width: 20px;

定义图片边框的平铺方式

   border-image-repeat:round; // stretch(拉伸)、repeat(重复)、round(平铺)

当然他们是支持简写的

 border-image: url('./bgi.png') 48 27 40 35/20px round;

以下是效果图

如果你的没生效，我想是你的容器本身的边框没有宽度，这个需要注意一下，可以将容器本身的宽度和图片边框设置的一样，颜色透明

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.bgc{width: 400px;height: 300px;margin:100px auto;border: 20px solid transparent;border-image: url('./bgi.png') 48 27 40 35/20px round;}</style>
</head>
<body><div class="bgc"><h1>hello world</h1></div>
</body>
</html>

产品不让换，大屏的效果就懒得做了。

border-image图片边框的使用。相关推荐

CSS魔法堂：重拾Border之——图片作边框
前言当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-t ...
html怎么做出相框的效果,使用CSS3制作PS级的图片边框效果
当一个开发者需要制作图片边框效果时通常有两种选择:一是使用Photoshop来制作,二是在通过CSS来渲染"盒中盒"的效果.在这个教程中,我们要制作一种带复杂边框的相框效果,通过 ...
ie css 图片边框颜色,CSS-在Chrome / IE9中删除图片边框
CSS-在Chrome / IE9中删除图片边框我试图摆脱在Chrome和IE9中为每张图片显示的细边框.我有这个CSS: outline: none; border: none; 使用jQuery ...
html图片的边框属性,css3图片边框border-image的用法
对于CSS属性 border ,相信所有的WEB开发人员都非常熟悉.我们可通过设置HTML元素的 border 的宽度.颜色.样式,来让HTML元素表现出不同的边框,比如双线.虚线.圆点线.但不管你怎 ...
jQuery第5章简答题4(使用css()方法添加图片边框)5(制作林徽因简介页面)
ps:简答题4(使用css()方法添加图片边框) 代码如下: <!DOCTYPE html> <html lang="en"> <head>&l ...
微信小程序 border设置单边框失效解决办法
微信小程序 border设置单边框失效解决办法遇到的问题解决的方法总结遇到的问题 border-right: 1 rpx solid #ccc;border-bottom: 1 rpx sol ...
css 科技边框_一篇文章带你学习CSS3图片边框
这篇文章我们来讲一下在网站建设中,一篇文章带你学习CSS3图片边框.本文对大家进行网站开发设计工作或者学习都有一定帮助,下面让我们进入正文. 使用CSS3 border-image 属性,你可以在元素 ...
图解css3：核心技术与案例实战. 3.3　CSS3图片边框属性
3.3 CSS3图片边框属性 border-image效果在CSS2中,只有使用背景图片来制作,而且制作过程非常复杂,做完后也很难维护.如今CSS3中增添了一个图片边框的属性,能够模拟出backgro ...
html图片边框左右消失,图片边框border-image的用法
对于CSS属性border,相信所有的WEB开发人员都非常熟悉.我们可通过设置HTML元素的border的宽度.颜色.样式,来让HTML元素表现出不同的边框,比如双线.虚线.圆点线.但不管你怎么设置, ...

border-image图片边框的使用。

border-image图片边框的使用。相关推荐

最新文章

热门文章