转载:
http://www.zhangxinxu.com/wordpress/2010/01/css3-border-image%E8%AF%A6%E8%A7%A3%E3%80%81%E5%BA%94%E7%94%A8%E5%8F%8Ajquery%E6%8F%92%E4%BB%B6/
Border-image的例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>background-clip</title>
<style>
div{
margin-top:20px;
}
.div0{
-webkit-border-image:url(rounded_corner.png) 20 20 20 20;border-width:10px;-webkit-box-sizing: border-box;
}
.div1{
-webkit-border-image:url(rounded_corner.png) 20;border-width:10px;-webkit-box-sizing: border-box;
}
.div2{
-webkit-border-image:url(rounded_corner.png) 20/10px;/*第一个20是裁剪区域, 即20 20 20 20; 第二个20px是指border的宽度*/
}
</style>
</head>
<body>
<div class="div0">div0</div>
<div class="div1">div1</div>
<div class="div2">div2</div>
<img src="rounded_corner.png" style="margin-top:50px;">
</body>
</html>
熟悉border-image的一些特性
我们可能对于CSS2中的background属性比较熟悉,例如:background:url(xx.jpg) 27px no-repeat;
指代的是图片(url(xx.jpg)),位置(27px),重复性(no-repeat)。
border-image于此类似,border-image包括图片,剪裁位置(与background位置一样,也是数值,也支持百分值),重复性。例如:border-image:url(border.png) 27 repeat;,指的就是图片(url(border.png)),剪裁位置(27),重复方式(repeat)。试着对比background,这有助于border-image属性的记忆。
具体描述border-image的参数
border-image的参数就是上面提到的三个:
图片,剪裁位置,重复性。
1、图片(border-image-source)
与CSS2中background-image属性一样,border-image的背景图使用url()调用,图片可以是相对路径或是绝对路径,也可以不使用图片,即border-image:none;
2、图片剪裁位置(border-image-slice)
此参数特点比较鲜明:
1、没有单位,专指像素。这类似于flash的as脚本,舞台高宽,影片剪辑大小,位移直接就是一个数值,没有单位,因为默认单位就是像素(px)了。例如:border-image:url(border.png) 27 repeat;这里的27专指27像素。
2、支持百分比值,百分比值大小事相对于边框图片而言,假设边框图片大小为400px*300px,则20%的实际效果就是剪裁了图片的60px 80px 60px 80px的四边大小。
3、剪裁特性。如果您对CSS中clip属性(clip:rect(auto, auto, auto, auto))比较了解,则这里理解就会轻松些。clip可以说是CSS中一个明目张胆的剪裁属性,而此处的属性虽然表意上不是剪裁,但是在border-image效果的实现上来说,就好像是个剪裁工具,把边框图片四分五裂,再重新安置,变形。其有1~4个参数,其方位规则符合CSS普遍的方位规则(与margin,padding等或border-width一致),上右下左顺时针,再赋予剪裁的含义,举个简单的例子,前面提到,支持百分比宽度,所以这里“30% 35% 40% 30%的”示意可以用下图表示:
看图说话就是,
离图片上部30%的地方剪裁一下,在右边35%的地方剪裁一下,在离底部40%的地方裁剪一下,在距左边30%的地方也剪裁一下。于是总共对图片进行了“四刀切”,形成了九个分离的区域,这就是九宫格,这是下面深入讲解border-image的基础。
3、重复性(border-image-repeat)
这里的重复性有别于background的背景重复,差别较大。background图片就是重复,不重复,水平重复,垂直重复,总之就是围绕repeat(重复)这个词打转,一家独大。而对于border-image,可谓是三足鼎立,
repeat(重复)只是其中之一,其余两个是
round(平铺)和
stretch(拉伸)。其中,stretch是默认值。
参数0~2个,0则使用默认值 – stretch,例如:border-image:url(border.png) 30% 40%;就等同于border-image:url(border.png) 30% 40% stretch stretch;;1则表示水平方向及垂直方向均使用此参数;2个参数的话则第一个参数表水平方向,第二个参数表示垂直方向。例如:border-image:url(border.png) 30% 40%;就等同于
border-image:url(border.png) 30% 40% round repeat;表示
水平方向round(平铺),
垂直方向repeat(重复),至于何为平铺何为重复下面会深入讲解。
三、深入理解border-image的宽度和展示方式
分开理解border-image的宽度或是展示方式其实不太难的,关键是这两者结合使用时候的含义,需要花一定的功夫的理解。
- 大小: 303 Bytes
- 大小: 3.8 KB
分享到:
相关推荐
主要介绍了详解CSS3中border-image的使用,是CSS3入门学习中的基础知识,需要的朋友可以参考下
安装npm install tailwindcss-border-gradients使用简单{ theme : { colors : { 'red' : '#f00' , 'blue' : '#00f' , } , linearBorderGradients : theme => ( { colors : theme ( 'colors' ) , } ) , } , plugins :...
一些css特效,可做学习之用
首先来一个素材图片whiteButton.png 然后我们要做成这样的效果: 代码(呵呵!请不要急,继续向下看): 复制代码代码如下: <div style=”-webkit-border-image: url(images/whiteButton.png) 0 12 0 12 ...
引入PIE.htc使ie7,ie8 支持css3 border-radius圆角效果
css3中新增了一个属性 border-image ,这个属性允许开发者使用图片来定义边框,扩充了 CSS2 中仅有的几个预定义边框样式(border-style)。本文给大家介绍css3 border-image边框图像详解,感兴趣的朋友一起学习吧
基于 background-origin 和 background-image 的 Tailwind CSS 边框渐变插件 用于生成边框渐变的 Tailwind CSS 插件可以与圆形实用程序类一起使用。 该插件基于 。 看看它的实际效果: : 要求 此插件需要 ...
在CSS3里引入的很多新特征中,这篇文章主要介绍了css3图片边框border-image的用法,具有一定的参考价值,有兴趣的可以了解一下
一、border-image的兼容性border-image可以说是CSS3中的一员大将,将来一定会大放光彩,其应用潜力真的是非常的惊人。可惜目前支持的浏览器有限,仅Firefox3.5,chrome浏览器,Safari3+支持border-image。所以,就...
让IE实现CSS3中的border-radius(圆角)
css3-image-float-reversal.rar,挺有意思的一个css文件
CSS3中的box-sizing(content-box与border-box) CSS3中的box-sizing 属性允许以特定的方式来指定盒模型,有两种方式: content-box:标准盒模型,又叫做 W3C盒模型,一般在现代浏览器中使用的都是这个盒模型 border...
本文主要介绍了css样式中border-image的用法,具有一定的参考价值,下面跟着小编一起来看下吧
让IE6也识别CSS3-圆角效果应用border-radius
jquery-css3-3d-image-slider.zip
postcss-resemble-image, 为像原始图像一样的图像提供渐变回退 postcss -resemble-image 为像原始图像一样的图像提供渐变回退。安装使用 npm:npm install postcss-resemble-image --savepostc