用CSS边框图像让你的网站更漂亮
不久之前,添加一些装饰性元素,例如给网页中的图片添加花哨的边,以及耐心调整CSS文件才能使你的网页看起来不错。然而现在CSS已经做出了改变,用复杂的边框装饰你的网站只需几行代码。这篇文章将告诉你如何做到!
边框属性(Border Image Properties)
最普通的方法去设计边框就是使用预设的边框样式属性值。包 括: dotted, dashed,solid, double, groove, ridge, inset, 和 outset。这些样式已经给了 你不少选择。但是你可以更进一步使用接下来的CSS属性去增加吸引人的背景图片到你的边框。
border-image-source 属性
使用这个属性,你可以分配一个背景图片到element的边框中。这个值常常是图片的URL:
element {
border-image-source: url('myimage.png');
}
你会发现CSS的渐变同样产生效果:
element {
border-image-source: linear-gradient(10deg, #fe01f5 0%, #2e113d 100%);
}
在浏览器中它大概是这样的:
如果你设定属性值为 none,图片将不会显示,浏览器将使用属性 border-style 的值。因此,border-style 作为一个后备选项是个不错的主意!
值得一提的是,你使用的图片不需要匹配边框的宽和高,一张小图片就可以装饰你的网站,如例子中的element可任意调整其图片的大小并且可以自动识别适应屏幕的尺寸。
border-image-slice 属性
在你使用border-image-source 属性选择一张图片之后,你可以应用border-image-slice 属性。
element {
border-image-slice: 19;
}
这个属性规定图像上下左右的边缘向内偏移,图像被分割成九个区域:四个角,四条边以及一个中间区域。
你可以规定四个数字或者百分比作为值。当你规定四个数值的时候,它应用顺序为上,右,下,左。如果你省略左侧偏移值,那么左边的值将会默认和右边数 值相同。如果你省略下方数值,它将默认与上方的相同。但如果你省略右侧偏移值,它将默认与上方数值相同。如果你只使用一个数值,这个数值将会被应用在所有 偏移值上。
相对于图像尺寸的百分比值-图像宽度影响水平偏移,高度影响垂直偏移。
数字值代表图像像素或者矢量坐标。另,不要在数字后面加px,否则这个属性将不会工作。
以下是如何使用 border-image-slice属性的例子:
<div class="box">
Border Image
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
.box {
border: 19px dotted #c905c6;
border-image-source: url(border-bg.png);
border-image-slice: 19;
}
使用一个 100 x 100px 大小的图片:
最终效果图大概是这样:
中间区域呈现不可见的透明状态,如果你想保留边框图像中间部分,使用关键词fill。
例如,使用一个有中间区域的图片,如果你使用关键词 fill,你将得到以上的图片。但是如果你使用它:
.box {
border: 19px dotted #c905c6;
border-image-source: url(border-fill.png);
border-image-slice: 19 fill;
}
中间区域的图片会出现:
虽然有点模糊,图片看起来被压缩,但是中间区域的图片可视了:
border-image-width 属性
此属性将会绘制与所谓的突变边界地区内部,这个边界默认区域为border box,就像属性border-image-slice,属性 border-image-width 规定了内部被划分为九个区域。
同样的,此属性的四个规定值可用数值或百分比代表上,右,下,左的量。百分比参考了图像区域尺寸,图像宽度影响水平偏移,高度影响垂直偏移。如果你使用数值,它的用法和 border-width是一样的。例如:
.box {
border: 19px dotted #c905c6;
border-image-source: url(border-bg.png);
border-image-slice: 19;
border-image-width: 3;
}
… 设定边框(border)图片宽为边框宽(border-width )值的三倍,19px。结果是这样的:
我发现如果赋值给 border-image-width 和 border-image-slice 属性值相同,这确保你的边框图片处于最佳状态而不模糊扭曲。
border-image-outset 属性
目前为止我已经使用默认值插入图片与边框图片区域。其实你还有一个选项将边框图片放在border box区域的外部。这时候你可以使用 border-image-outset 属性。
同样的,此属性的四个规定值可用数值或百分比代表上,右,下,左的量,得其输出的用法和 border-width 一样。
为了更清楚的说明,我用绿色虚线代表 border box 的区域,粉红色的图片代表。边框图片区域。在默认的情况下,边框图片在绿色区域中,这表示边框图片区域在 border box 区域里面。
在CSS文件里加上 border-image-outset: 19px; 粉红色部分将位于绿色部分的外面,这表明边框图片位于border box 区域的外面。
要注意的是在边界框之外的部分图像不触发滚动( trigger scrolling ),也不捕获鼠标事件( mouse events)。
你可以在 CodePen 试一试我们已经讨论过的这些属性:
border-image-repeat 属性
这个属性给如何延展以及铺排边框图像的边缘和中间提供了一些选择。第一个值规定了水平边缘(上和下),第二个值则规定了数值边缘(左和右)。如果你只提供一个值,则此值应用于所有的边。
可用的一些值:
- stretch – 如果你不使用 border-image-repeat 属性的默认值。它的属性是拉伸图像来填充区域。
- repeat – 平铺图像填充区域。如果可用面积区域不能整除图片区块,图片可以被切断。
- round – 和 repeat 相同,但是如果可用的面积区域不能适应图片区块,它将自动缩放图片直到适应为止。这导致图片不被切断,但是图片可能看起来会有点变形。
- space – 和 repeat 相同,但是如果空间不能正好适应图片,多出的空间将分布在图片周围。
编写的时候,使用火狐浏览器会造成 space 以及 stretch 有一样的效果,而使用谷歌浏览器会造成 space 以及 repeat 拥有一样的效果。
border-image Shorthand 属性
将以上我们所学到的关于 border-image 属性的单个属性总结以下:
- border-image-source
- border-image-slice
- border-image-width
- border-image-outset
- border-image-repeat
小例子:
element {
border-image: url(myimage.png) 19 / 19px / 0 round;
}
在 CodePen演示页面上自己试一试 border-image-repeat 和 border-image 的属性用法吧。
如果我想移除边框图片?
最佳方法就是使用 border Shorthand属性重新设置边框。使用 borderShorthand 属性,你可以很快的重设相同宽度, 相同颜色,相同样式的四边。无需规定 border-image:none,也无需重写任何单独的 border-image 属性。
浏览器支持
在编写的时候,大多数浏览器都支持 border-image。只有火狐不能拉伸SVG图片,并且Opera Mini不能支持单独使用的属性,除非在使用时加上前缀 -o-。
总结
这篇文章全部关于属性 border-image : 它的值,如何以最好的方式使用它们,什么浏览器才能支持。如果你想知道更多细节,可以查询 CSS Backgrounds and Borders Level 3。
用CSS边框图像让你的网站更漂亮的更多相关文章
- CSS 边框图像
border-image border-image 可以将图像应用到盒子的边框上. border-image 属性需要3个值同时存在: URL 图片的地址 切割图片的位,4个边需要写4个值 如何处理边 ...
- 理解CSS边框border
前面的话 边框是CSS盒模型属性中默默无闻的一个普通属性,CSS3的到来,但得边框属性重新焕发了光彩.本文将详细介绍CSS边框 基础样式 边框是一条以空格分隔的集合样式,包括边框粗细(边框宽度 ...
- 第 17 章 CSS 边框与背景[下]
学习要点: 1.设置背景 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 边框和背景,通过边框和背景的样式设置,给元素增加更丰富的外观. 一.设置背景 盒模型的尺寸可以通过两种方式实现可见性, ...
- 第七十四节,css边框与背景
css边框与背景 学习要点: 1.声明边框 2.边框样式 3.圆角边框 本章主要探讨HTML5中CSS边框和背景,通过边框和背景的样式设置,给元素增加更丰富的外观. 声明边框 边框的声明有三个属性设 ...
- css边框小结
css边框 CSS对界面的分割如上图,他们的含义如下: contend:包含HTML元素中包含的文本,图像或其他媒体. padding:内容和边框之间的空格. 你可以想像这样的内在空间. ...
- 复习-css边框和背景属性
css边框和背景属性 border:所有边框属性 border-width:四条边框的宽度 border-style:设置边框样式,主要有dotted.solid.double border-colo ...
- HTML CSS边框阴影的实现
一款用CSS控制背景图像平铺,从而实现区域边框阴影的效果,虽然用到了图片,但可贵之处是本代码不管你需要阴影的区域是多大,它都能自动适应,因些还是很值得收藏一下的,兼容所有的IE浏览器. <!DO ...
- css 边框使用
https://www.cnblogs.com/luka/p/5677241.html 1. 应用边框样式 先从控制边框样式的属性开始.简单边框有三个关键属性:border-width.border- ...
- css边框内凹圆角,解决优惠券的边框问题
关于css边框内凹圆角,找了好久才找到的 <html <head> <title>无标题页</title> <style> body{ backg ...
随机推荐
- jQuery键盘控制方法,以及键值(keycode)对照表
键盘控制应用范围非常广泛,比如快捷键控制页面的滚动:在填写表单时候,限制输入内容:或者是屏蔽复制.粘贴.退后等功能.这里说说用jQuery怎么来实现.个人觉得jQuery比原生态的JS好用,代码简单清 ...
- window.showModalDialog以及window.open用法简介
.可以通过window.returnValue向打开对话框的窗口返回信息,当然也可以是对象.例如:------------------------------parent.htm<script& ...
- Web Service相关工具的配置
近期在学习Web Service Testing,使用到了soapUI这个工具,但是在学习之前,需要搭建Web Service环境,其中有关数据库的连接问题花费了我好多时间,主要还是自己对于很多配置不 ...
- wxpython线程安全的方法
wx中实现了3个线程安全的函数.如果在线程中,直接访问并更新主线程的UI,会遇到问题,有时候阻塞UI或者更新不起作用,有时严重的话会引起python崩溃. 三个安全线程如下: wx.PostEvent ...
- temp gbk2utf8
__author__ = 'root' # -*- coding: utf-8 -*- ps = '/data/poitestdata/行政地名.csv' pt = '/data/poitestdat ...
- cf D. Maximum Submatrix 2
http://codeforces.com/contest/376/problem/D 题意:给你一个矩阵,可以随意排列n行的次序,然后找出全部含有1的子矩阵.输出1的个数. 思路:c[i][j]表示 ...
- 使用JQUERY实现局部页面定时刷新
没办法,运维会一点点前端,还是有好处的.. 说不定,BOOTSTRAP也得会一点点.. 本想用流式输出的搞定的,但没搞定,就取巧了... 代理简单: <script src="//cd ...
- EDM(邮件营销)
官冲拉手网CTO举了个EDM(邮件营销)的例子: 在做大数据分析应用之前,通过EDM带来的订单转化率很低.在采用大数据解决方案后,可以根据用户之前的浏览习惯猜测他的喜好和购买习惯,从而针对性的推送个性 ...
- HDU Train Problem I 1022 栈模拟
题目大意: 给你一个n 代表有n列 火车, 第一个给你的一个字符串 代表即将进入到轨道上火车的编号顺序, 第二个字符串代表的是 火车出来之后到顺序, 分析一下就知道这,这个问题就是栈, 先进后出吗, ...
- Delphi TdxBarManager通过代码生成菜单
procedure TForm6.btn1Click(Sender: TObject);var ABar:TdxBar; ABarItem:TdxBarItem; ABarSubItem:Tdx ...