html图片的边框属性,css3图片边框border-image的用法
对于CSS属性 border ,相信所有的WEB开发人员都非常熟悉。我们可通过设置HTML元素的 border 的宽度、颜色、样式,来让HTML元素表现出不同的边框,比如双线、虚线、圆点线。但不管你怎么设置,这些都是一些非常原始的做法。从CSS3起,我们有了一个新的属性: border-image ,它能让你用漂亮的小图片来围绕HTML元素,以图片边框的形式出现。通过 border-image 属性,我们可以制作出非常漂亮的边框样式。
在CSS3里引入的很多新特征中,比如HTML5中新型input类型, 中文字体(web font) ,placeholder等,都很实用,也很流行,而且我们之前也举了一个非常漂亮的 border-image 的例子,但网络上使用图片边框 border-image 的还是很少,我想主要是因为谷歌浏览器和火狐浏览器很早就支持它们了,而IE11才支持这种语法。
图片边框 border-image 的语法
复制代码代码如下:
|| [ / | / ? / ]? ||
这些语法描述看起来非常的枯燥,每个人都喜欢看实例,这样最容易理解,下面我们就来将几个实例。
图片边框 border-image 用法一:边框图循环平铺(repeat)
这种情况下,边框图图片将会依次平铺,填满边框区域。
#repeat {
border: 15px solid transparent;
padding: 10px 20px;
-moz-border-image:url("/files/4127/border.png") 30 30 repeat; /* Old Firefox */
-webkit-border-image:url("/files/4127/border.png") 30 30 repeat; /* Safari */
-o-border-image:url("/files/4127/border.png") 30 30 repeat; /* Opera */
border-image:url("/files/4127/border.png") 30 30 repeat;
}
实例演示1:
图片边框 border-image 用法二:边框图自适应循环平铺(round)
大家也许看到了,上面的图片边框虽然很漂亮,但有个瑕疵,就是当元素宽度或高度不是边框图的整数倍时,最后一个/第一个图片不能完成显示,会被遮挡一部分,这样看起来很不美观。CSS3的设计者们已经考虑到了这个问题,使用 round 属性值,就能避免这种情况。 round 的作用是边框图进行稍微的调整,来保证每个图片都能完成显示,增加了观赏性。
#round {
border: 15px solid transparent;
padding: 10px 20px;
-moz-border-image:url("/files/4127/border.png") 30 30 round; /* Old Firefox */
-webkit-border-image:url("/files/4127/border.png") 30 30 round; /* Safari */
-o-border-image:url("/files/4127/border.png") 30 30 round; /* Opera */
border-image:url("/files/4127/border.png") 30 30 round;
}
实例演示2
图片边框 border-image 用法三:边框图拉伸平铺(stretch)
‘stretch’就是拉伸,将小图片拉长来填满边框区域,并不循环,很显然,这样边框图会变形。
#stretch {
border: 15px solid transparent;
padding: 10px 20px;
-moz-border-image:url("/files/4127/border.png") 30 30 stretch; /* Old Firefox */
-webkit-border-image:url("/files/4127/border.png") 30 30 stretch; /* Safari */
-o-border-image:url("/files/4127/border.png") 30 30 stretch; /* Opera */
border-image:url("/files/4127/border.png") 30 30 stretch;
}
实例演示3
很显然, border-image第一种用法应该是不常用的,因为有时候它会导致边框有残缺的感觉。而第二种和第三种用法各有千秋,是各自不同的美。这里使用的边框图其实很简单。精巧的美工能做出更漂亮的边框图,能呈现出让人赞叹的效果,就比如之前的文章里的一个例子,下面再次拿出来给大家看看。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
html图片的边框属性,css3图片边框border-image的用法相关推荐
- html 文字加边框 阴影效果,CSS3之边框圆角、边框阴影和字体阴影
1.边框圆角在早期如果想要制作四周有圆角的元素时,需要专门制作一张图片(这其实没什么),但是试想一下,如果要修改圆角的各种关系,比如颜色,半径等等,必须去重新修改图片才能够实现(十分麻烦). 在htm ...
- html图片向下浮动,css3图片上下浮动动画
一.float定义float属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在CSS中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素.按照张鑫旭 ...
- php图片滑动的属性,JavaScript_javascript图片滑动效果实现,本文为大家分享了javascript图片 - phpStudy...
javascript图片滑动效果实现 本文为大家分享了javascript图片滑动效果实现方法,具体内容如下,先看一下效果图: 鼠标滑过那张图,显示完整的哪张图,移除则复位: 简单的CSS加JS操作D ...
- css3动画图片旋转绕轴,css3图片旋转如何实现?css3实现图片旋转动画效果的方法...
在网页中,我们经常可以看到一张图片在旋转,这样的图片旋转是怎么来实现的呢?本篇文章就来为你介绍一下关于css3实现图片旋转动画效果的方法. 实现css3中图片的旋转可以使用可以使用 -webkit-a ...
- html怎么设置锯齿边框样式,CSS3实现边框锯齿效果
通过CSS3的linear-gradient实现的 .bg{ width:300px; height:50px; background:#caca8c; background-image:-webki ...
- css3 背景属性与边框属性的新增 200303
新增属性 background-clip 例子 background-origin background-size 添加多个图片 边框属性 # 图片边框 需要的图片 兼容性不是很好 盒阴影
- CSS学习笔记(六)边框属性与盒子属性
文章目录 一.边框属性 二.内边框属性 三.外边框属性 四.盒子模型 五.盒子box-sizing属性 六.盒子模型练习 七.盒子居中和内容居中 八.清空默认边框 九.行高和字号 十.还原字体和字号( ...
- 圆角边框属性 圆角边框画芒果
圆角边框属性 正方形+圆角边框属性 = 圆形(有弧度的图形) 长方形+圆角边框属性 = 椭圆形(有弧度的图形) border-radius: 边框的弧度 px / % /em/remborder-ri ...
- html设置边框dw,Dreamweaver表格边框设置的css语法大全
Dreamweaver表格边框设置的css语法大全 具体内容包括:上边框宽度.右边框宽度.下边框宽度.左边框宽度.边框宽度.边框颜色.边框样式.上边框.下边框.左边框.右边框.边框.宽度.高度.有关标 ...
最新文章
- 逐飞科技对于STC8H1K系列的单片机正交解码的资料以及实验
- ege函数库_EGE图形库|EGE图形库下载v12.11 最新版 附使用教程 - 欧普软件下载
- 如何扩大控件的触控响应区域
- (转载)VS2010/MFC编程入门之一(VS2010与MSDN安装过程图解)
- oracle实现mysql的if_oracle中decode函数 VS mysql中的if函数和case函数
- MSP430F5529 DriverLib 库函数学习笔记(四)UART通信
- devtools的ctrl加r_Chrome DevTools调试技巧
- 纽约大学计算机工程专业课程,纽约大学计算机工程硕士专业介绍及课程要求
- xen虚拟化部署遇到的问题(持续更新)
- Javascript 键盘事件
- 关于Shell脚本执行python代码,出现No such file or directorython: can't open file的问题
- 计算机硬盘型号怎么看,硬盘编号怎么看
- 互联网商业模式O2O、C2C、B2B、B2C等介绍
- 冰桶挑战 慈善并文艺着
- JAVA 消息队列的使用场景
- 腾达tenda U9无线网卡
- 基于CAD纵断面图生成地质体模型
- 科普:长度单位“米”是怎么得来的
- 新网银行党委书记、执行董事江海:让数据多跑路,让客户不跑路
- PPT文件快速转换成PDF文件
热门文章
- 零基础如何学习Java和web前端
- C# openfiledialog文件单选和多选
- (DP)codeforces - 710E Generate a String
- maven报错 Check M2 HOME environment variable and mvn script m
- 2021年程序人生的随想总结
- 【SwiftUI学习笔记】Git Repository Creation FailedEnsure the author information supplied in Xcode ...
- 优达学城 深度学习 任务1
- 猿链猿哥:IKO,Initial Keepsake Offering,首次纪念品发行
- 解析steam教育中的技术赋能
- panic: runtime error: invalid memory address or nil pointer dereference