border-image图片边框

一、border-image的兼容性

1、支持到IE11以上，其他主要浏览器均支持

2、使用webkit以后支持android4.3以上

二、border-image的参数（包括图片、裁剪位置、重复性）

1、图片（border-image-source）采用url（）调用，可以是相对/绝对路径

2、图片的裁剪位置（border-image-slice）

1>参数没有单位，专指像素。border-image：url（a.png）27 repeat; 这里27指27px

2>支持百分比，百分比大小相对于边框图片而言

3>裁剪特性，效果的实现上类似于九宫格裁剪，有1~4个参数，方位符合CSS普遍的方位规则（上右下左，顺时针）

border-image：url（border.png）30 % 35% 40% 30% repeat;

在图片上部30%的地方裁剪一下，在右部35%的地方裁剪一下，在底部40%的地方裁剪一下，在左部30%的地方裁剪一下。形成了九个分离区域——九宫格

3、重复性（border-image-repeat）参数0~2个，2个参数一个水平，一个垂直

这里重复与background的背景重复，差异较大。background图片的重复包括：重复、不重复、水平重复、垂直重复。对于border-image而言包括：repeat（重复）、round（平铺）、stretch（拉伸），其中stretch是默认值。

三、应用

1、使用时注意需要border-style存在，单单设置border-image是不会生效的

转载于:https://www.cnblogs.com/diyichen/p/11261597.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来做是否更加美观. 这是目前的效果.先看看这个css属性怎么设置吧.(分开写的话书写顺序最好和我的保持一直, ...

border-image图片边框

border-image图片边框相关推荐

最新文章

热门文章