CSS3中border-image属性详解
border-images可以说也是CSS3中的重量级属性,如同圆角、边框颜色属性border-color、块阴影属性一样,也是属于边框属性中的一员。
从其字面意思上看,我们可以理解为“边框-图片”,通俗的说也就是使用图片作为(对象的)边框,这样一来边框的样式就不像以前那样只有实线、虚线、点状线...那样单调了,下面我们就来具体看一下应该怎样使用它。
首先我们来看一下与border-image相关的一些属性,有border-image-source、border-image-slice、border-image-repeat,其实就如同background属性一样有background-color、background-image、background-repeat等与它相关。以前background属性可以分别设置颜色、背景、背景位置...,也可以把这些样式写在一块;当然在这里Border Image的样式可以分别设置也可以写在一块(具体怎么写,在后边会有介绍)。
首先,我们来看一下border-image-souce属性,它就像background-image一样,也采用url()作为它的值,语法:
[border-image-source:url();]
对于border-image-slice属性,其实就是对图片的切割,那么现在我们引入一张图片
图片命名为:borderimage.png
border-image-slice可以取1-4个值,它就像border-width一样,它的几个值遵循上、右、下、左(top、right、bottom、left)的原则,但这几个值是不能带单位的,可以取数字或百分比,当取数字时默认单位为像素(px)。刚才我们提到了切割,那么它是怎么切割的呢?假如取四个值10 15 30 20,那么切割图如下:
加个边框
看,像不像9宫格呢?其实border-image-slice就是把边框图片分为了9个部分,假如改属性取一个值30,那么就把边框图片分成了9等份。
那么现在用代码实现一下试试效果:
1
2
3
4
5
6
7
8
9
|
.div 1 { width : 200px ; height : 100px ; -moz-border-image: url (borderimage.png) 30 ; -webkit-border-image: url (borderimage.png) 30 ; -o-border-image: url (borderimage.png) 30 ; border-image: url (borderimage.png) 30 ; border-width : 30px ; } |
效果:
再看一下这个图
其实1、3、7、9部分好像没有发生大的变化,它们仍然分布在四个角上,而2、4、6、8部分却发生了变化,它们看起来是被拉伸了。
其实我们可以这样理解,根据上图与前面效果图的对比,四个角是没有任何展示效果的,不会平铺也不会拉伸,因此我们可以把它们称作盲区。而border-top-image,border-right-image,border-bottom-image,border-left-image这几个部分才是要展示的,向前面的效果图一样,被拉伸了。对与这种现象,它是由border-image-repeat属性决定的,那么下面我们就看看它有哪些参数。
border-image-repeat属性共有3个值:stretch(拉伸)、repeat(重复)、round(平铺),其中stretch是默认值。在使用时可以取1到2个参数,比如:
1
|
border-image: url (borderimage.png) 30 ; |
就等同于
1
|
border-image: url (borderimage.png) 30 stretch stretch; |
表示水平方向和垂直方向均使用stretch参数,即水平方向和垂直方向都拉伸。
如果是:
1
|
border-image: url (borderimage.png) 30 round repeat ; |
则边框图片在水平方向上平铺,在垂直方向上重复。
对于stretch(拉伸)在前面有个例子,这里就不在多说了,下面我们就详细的区分一下round和repeat。
round的效果
测试代码:
1
2
3
4
5
6
7
8
9
|
.div 1 { width : 200px ; height : 100px ; -moz-border-image: url (borderimage.png) 30 round; -webkit-border-image: url (borderimage.png) 30 round; -o-border-image: url (borderimage.png) 30 round; border-image: url (borderimage.png) 30 round; border-width : 30px ; } |
显示效果:
我们可以看到浅色的菱形在水平方向和垂直方向上都平铺了,但它们始终是完整的菱形,就从宽度上来说吧,div的宽是200px,而每个菱形宽度为30px,通过计算200px的宽度大约只能放置6.7个菱形,但我们从图中看到,菱形都是完整的,这就说明菱形肯定变形了,再结合效果图,可以看到四个角的菱形没有变化,而浅色的菱形都变形了。由此我们可以得出结论:round平铺可能会改变边框背景图片大小来适应边框宽度排列。而repeat就不一样了,repeat重复是不改变背景图片大小而直接从中间向两端排列,下面就来验证一下。
repeat的效果
测试代码:
1
2
3
4
5
6
7
8
9
|
.div 1 { width : 200px ; height : 100px ; -moz-border-image: url (borderimage.png) 30 repeat ; -webkit-border-image: url (borderimage.png) 30 repeat ; -o-border-image: url (borderimage.png) 30 repeat ; border-image: url (borderimage.png) 30 repeat ; border-width : 30px ; } |
显示效果:
可以看到,有些菱形已经不完整了,因此repeat重复确实是不改变背景图片大小而直接从中间开始向两端排列,直到把空间占满为止。
注意:round效果和repeat效果在webkit内核下,如chrome浏览器里并区分不出来,效果是一样的。但在Opera 12.14里可以准确区分这两个参数。
下面我们就来两个DEMO练习一下吧
demo1:按钮制作
按钮图片
button.png
button-hover.png
html代码:
CSS代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
.btn 01 ,.btn 02 { text-align : center ; font-family : Arial ; font-size : 20px ; color : #fff ; text-decoration : none ; -moz-border-image: url (button.png) 0 15 0 15 round; -webkit-border-image: url (button.png) 0 15 0 15 round; -o-border-image: url (button.png) 0 15 0 15 round; border-image: url (button.png) 0 15 0 15 round; border-width : 0 15px ; padding : 10px ; } .btn 01: hover,.btn 02: hover{ color : #666 ; -moz-border-image: url (button-hover.png) 0 15 0 15 round; -webkit-border-image: url (button-hover.png) 0 15 0 15 round; -o-border-image: url (button-hover.png) 0 15 0 15 round; border-image: url (button-hover.png) 0 15 0 15 round; } |
效果图如下:
鼠标划过第二个按钮时:
demo2:给照片加边框
这里有一张妹子的照片,还有一个小相框
girl.jpg
borderimage2.png
那么下面我们就给妹子加个相框:
HTML代码:
1
2
3
|
< div class = "img-girl-box" > < img src = "girl.jpg" class = "img-girl" /> </ div > |
CSS代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
.img-girl-box{ width : 108px ; height : 81px ; -moz-border-image: url (borderimage 2 .png) 69 124 69 124 round; -webkit-border-image: url (borderimage 2 .png) 69 124 69 124 round; -o-border-image: url (borderimage 2 .png) 69 124 69 124 round; border-image: url (borderimage 2 .png) 69 124 69 124 round; border-width : 69px 124px ; } .img-girl{ position : absolute ; margin-top : -69px ; margin-left : -124px ; width : 356px ; height : 219px ; border : 0 ; z-index : -1 ; } |
显示效果:
好了,关于这个border-image就说这么多吧。
CSS3中border-image属性详解的更多相关文章
- CSS3中的Transition属性详解
w3c标准中对CSS3的transition这是样描述的:“CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发, ...
- CSS3中的Transition属性详解(贝赛尔曲线)
transition语法: transition : [<'transition-property'> || <'transition-duration'> || <'t ...
- css3中user-select的用法详解
css3中user-select的用法详解 user-select属性是css3新增的属性,用于设置用户是否能够选中文本.可用于除替换元素外的所有元素,以下是user-select的主要用法和注意事项 ...
- Android中的windowSoftInputMode属性详解
这篇文章主要介绍了Android中的windowSoftInputMode属性详解,本文对windowSoftInputMode的9个属性做了详细总结,需要的朋友可以参考下 在前面的一篇文章中 ...
- android中xml tools属性详解
第一部分 安卓开发中,在写布局代码的时候,ide可以看到布局的预览效果. 但是有些效果则必须在运行之后才能看见,比如这种情况:TextView在xml中没有设置任何字符,而是在activity中设置了 ...
- android中xmlns:tools属性详解
今天读到一篇总结的非常棒的文章,写的逻辑很清晰也很实用,很少见到如此棒的文章了.就原文转发过来,我把格式给整理了一下,分享给园子里的各位朋友!好久没写博客了,就为2015年的11月留份纪念吧.希望对你 ...
- android中xml tools属性详解(转)
第一部分 安卓开发中,在写布局代码的时候,ide可以看到布局的预览效果. 但是有些效果则必须在运行之后才能看见,比如这种情况:TextView在xml中没有设置任何字符,而是在activity中设置了 ...
- css3 vw、vh属性详解,以及与%、rem的区别介绍
最近的项目需求,内嵌电视端显示页面,所以使用到了css3的属性:vw \ vh,遇到一些问题,记录下来 vw.vh是什么? 字面上可以简单理解为,vw (view width),vh(view hei ...
- android中布局文件中 layout_weight 的属性详解
在不同的情况下,layout_weight属性作用是不同的.主要有两种属性: 1.当布局中的控件的尺寸(宽和高)都有指定时,它所表示的该控件在父容器中的比重,及它在父容器中所占的比例,数值越大,比重越 ...
- Android中的sharedUserId属性详解
在Android里面每个app都有一个唯一的linux user ID,则这样权限就被设置成该应用程序的文件只对该用户可见,只对该应用程序自身可见,而我们可以使他们对其他的应用程序可见,这会使我们用到 ...
随机推荐
- [代码]--GridControl使用技巧总结,更新中...
1如何禁用GridControl中单击列弹出右键菜单 设置Run Design->OptionsMenu->EnableColumnMenu 设置为:false 2如何定位到第一条数据/记 ...
- 【题解】 bzoj2115: [Wc2011] Xor (线性基+dfs)
bzoj2115,戳我戳我 Solution: 看得题解(逃,我太菜了,想不出这种做法 那么丢个链接 Attention: 板子别写错了 又写错了这次 \(long long\)是左移63位,多了会溢 ...
- 以太坊 链私有链环境搭建(windows)
摸索以太坊区块链技术几个月了.最近打算逐步的把自己学到的东西和大家分享一下.在阅读本文之前,希望大家能对区块链的概念能有所了解.这样操作过程中的环节理解更深入.下面开始进入准备.因为本次是window ...
- Windows 7 安装VS2008 SP1 失败
由于Windows 7自带了.NET Framework 3.5 SP1, 所以在安装VS 2008 SP1的时候会发生fatal error during installation的错误, 网上找来 ...
- 团体程序设计天梯赛-L3-021 神坛 的一些错误做法 和 一些想法
https://pintia.cn/problem-sets/994805046380707840/problems/994805046577840128 错误做法: 极角排序 + 最小三角形的两边是 ...
- 使用开源Breeze工具部署Kubernetes 1.12.1高可用集群
Breeze项目是深圳睿云智合所开源的Kubernetes图形化部署工具,大大简化了Kubernetes部署的步骤,其最大亮点在于支持全离线环境的部署,且不需要FQ获取Google的相应资源包,尤其适 ...
- python---django中自带分页类使用
请先看在学习tornado时,写的自定义分页类:思路一致: python---自定义分页类 1.基础使用: 后台数据获取: from django.core.paginator import Pagi ...
- SpringMVC关于ajax提交400错误(后台获取为null)
400错误有三种情况 1:请求的数据量过大,不过这种情况一般很少见. 2:请求的data参数有误,确保每一个参数都能请求到. 注释:之前小白出现400错误,后台获取参数为null是因为第三种情况,经过 ...
- CSS-3 文字阴影—text-shadow 的使用
text-shadow还没有出现的时候,大家在网页中的阴影就是用ps一张图片作为背景.那么现在有了CSS3的这个属性,日后我们的工作会更简洁些. text-shadow之前出现过,不过不久就被Pass ...
- 20145234黄斐《Java程序设计》第八周
教材学习内容总结 第十四章-NIO与NIO2 NIO与IO的区别 NIO Channel继承框架 想要取得Channel的操作对象,可以使用Channels类,它定义了静态方法newChannel() ...