一篇文章带你学习CSS3图片边框


Posted in HTML / CSS onNovember 04, 2020

使用CSS3 border-image 属性,你可以在元素的周围设置图片边框。

一、浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

数字后面的 -webkit- 或者 -moz- 使用时需要指定前缀。

一篇文章带你学习CSS3图片边框

二、CSS3 border-image 属性

CSS3 border-image 属性允许您指定要用来代替元素周围的正常边界的图像。属性有三个部分:

  • 作为边框的图片。
  • 在哪里分割图像。
  • 确定中间部分应重复或延伸。

以下面的图像(叫做 "border.png")为例:

一篇文章带你学习CSS3图片边框

原理分析:

border-image 性将图像分割成九个部分,就像一个井字游戏板。然后将角放在拐角处,中间部分按指定的顺序重复或拉伸。

注意:

让border-image 正常工作, 元素也需要设置边框属性!

1. 图像的中间部分重复创建边界,图片作为边框

CSS代码:

<!DOCTYPE CSS>

<CSS lang="en">

<head>

  <meta charset="UTF-8">

  <title>项目</title>

</head>

<body>

  <p id="borderimg">在这里,图像的中间部分被延伸来创建边界.</p>

  <p>这里是原始图像:</p><img src="img/border.png">

</body>

</CSS>

代码如下:

#borderimg {

    border: 10px solid transparent;

    padding: 15px;

    -webkit-border-image: url(img/border.png) 30 round; /* Safari 3.1-5 */

    -o-border-image: url(img/border.png) 30 round; /* Opera 11-12.1 */

    border-image: url(img/border.png) 30 round;

}

一篇文章带你学习CSS3图片边框

2. 图像的中间部分延伸到创建边界:使用图片作为边框!

实例代码:

#borderimg {

                border: 10px solid transparent;

                padding: 15px;

                -webkit-border-image: url(img/border.png) 30 stretch;

                /* Safari 3.1-5 */

                -o-border-image: url(img/border.png) 30 stretch;

                /* Opera 11-12.1 */

                border-image: url(img/border.png) 30 stretch;

            }

注意: border-image 属性是border-image-source, border-image-slice, border-image-width, border-image-outset 和 border-image-repeat 的缩写.

1. 不同的切片值

不同的切片值完全改变边框的样子:

实例 1

border-image: url(border.png) 50 round;

#borderimg1 {

border: 10px solid transparent;

padding: 15px;

-webkit-border-image: url(img/border.png) 50 round;

/* Safari 3.1-5 */

-o-border-image: url(img/border.png) 50 round;

/* Opera 11-12.1 */

border-image: url(img/border.png) 50 round;

}

一篇文章带你学习CSS3图片边框

实例 2

border-image: url(border.png) 20% round;

#borderimg2 {

border: 10px solid transparent;

padding: 15px;

-webkit-border-image: url(img/border.png) 20% round;

/* Safari 3.1-5 */

-o-border-image: url(img/border.png) 20% round;

/* Opera 11-12.1 */

border-image: url(img/border.png) 20% round;

}

一篇文章带你学习CSS3图片边框

实例 3

border-image: url(border.png) 30% round;

代码如下:

#borderimg3 {

border: 10px solid transparent;

padding: 15px;

-webkit-border-image: url(img/border.png) 30% round;

/* Safari 3.1-5 */

-o-border-image: url(img/border.png) 30% round;

/* Opera 11-12.1 */

border-image: url(img/border.png) 30% round;

}

一篇文章带你学习CSS3图片边框

三、总结

本文基于CSS基础,使用CSS语言,介绍了有关CSS定义图片边框的知识点,从基础的属性概念入手 ,border-image的用法,在实际应用中需要注意的问题,做了详细的讲解。通过一个个实例的演示。希望帮助你更好的学习CSS。

想学习更多Python网络爬虫与数据挖掘知识,可前往专业网站: http://pdcfighting.com/

到此这篇关于一篇文章带你学习CSS3图片边框的文章就介绍到这了,更多相关CSS3图片边框内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
css3实现背景模糊的三种方式
Mar 09 HTML / CSS
CSS3实例分享--超炫checkbox复选框和radio单选框
Sep 01 HTML / CSS
利用纯css3实现的文字亮光特效的代码演示
Nov 27 HTML / CSS
HTML+CSS3模拟心的跳动实例代码
Sep 05 HTML / CSS
10分钟理解CSS3 FlexBox弹性布局
Dec 20 HTML / CSS
HTML5-WebSocket实现聊天室示例
Dec 15 HTML / CSS
HTML5实现表单自动验证功能实例代码
Jan 11 HTML / CSS
HTML5验证以及日期显示的实现详解
Jul 05 HTML / CSS
html5 viewport使用方法示例详解
Dec 02 HTML / CSS
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
Mar 02 HTML / CSS
纯html+css实现打字效果
Aug 02 HTML / CSS
CSS3实现时间轴特效
Nov 02 #HTML / CSS
CSS3制作皮卡丘动画壁纸的示例
Nov 02 #HTML / CSS
详解background属性的8个属性值(面试题)
Nov 02 #HTML / CSS
css3实现二维码扫描特效的示例
Oct 29 #HTML / CSS
CSS3实现彩色进度条动画的示例
Oct 29 #HTML / CSS
解决CSS3 transition-delay 属性默认值0不带单位失效的问题
Oct 29 #HTML / CSS
css3实现简单的白云飘动背景特效
Oct 28 #HTML / CSS
You might like
如何在symfony中导出为CSV文件中的数据
2011/10/06 PHP
php日期转时间戳,指定日期转换成时间戳
2012/07/17 PHP
php页面缓存方法小结
2015/01/10 PHP
Zend Framework数据库操作技巧总结
2017/02/18 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
php中get_object_vars()在数组的实例用法
2021/02/22 PHP
强大的jquery插件jqeuryUI做网页对话框效果!简单
2011/04/14 Javascript
Node.js和MongoDB实现简单日志分析系统
2015/04/25 Javascript
jquery显示隐藏元素的实现代码
2016/05/19 Javascript
JavaScript每天必学之数组和对象部分
2016/09/17 Javascript
jQuery设置图片等比例缩小的方法
2017/04/29 jQuery
深入理解vue Render函数
2017/07/19 Javascript
jQuery选择器之子元素选择器详解
2017/09/18 jQuery
浅谈Vue.set实际上是什么
2019/10/17 Javascript
详解如何在Javascript和Sass之间共享变量
2019/11/13 Javascript
Vue实现todo应用的示例
2021/02/20 Vue.js
使用Python下的XSLT API进行web开发的简单教程
2015/04/15 Python
Python栈类实例分析
2015/06/15 Python
Python3中类、模块、错误与异常、文件的简易教程
2017/11/20 Python
使用OpCode绕过Python沙箱的方法详解
2019/09/03 Python
Python 实现自动导入缺失的库
2019/10/29 Python
python matplotlib 绘图 和 dpi对应关系详解
2020/03/14 Python
Django实现whoosh搜索引擎使用jieba分词
2020/04/08 Python
详解python的super()的作用和原理
2020/10/29 Python
CSS3 实现侧边栏展开收起动画
2014/12/22 HTML / CSS
css3中flex布局宽度不生效的解决
2020/12/09 HTML / CSS
html5 移动端视频video的android兼容(去除播放控件、全屏)
2020/03/26 HTML / CSS
eDreams葡萄牙:全球最大的在线旅行社之一
2019/04/15 全球购物
英国比较机场停车场网站:Airport Parking Essentials
2019/12/01 全球购物
附答案的Java面试题
2012/11/19 面试题
初婚未育证明
2014/01/15 职场文书
学习型班组申报材料
2014/05/31 职场文书
五年级小学生评语
2014/12/26 职场文书
2015年银行个人工作总结
2015/05/14 职场文书
关于五一放假的通知
2015/08/18 职场文书
2016关于预防职务犯罪的心得体会
2016/01/21 职场文书