一篇文章带你学习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动画效果的兼容多浏览器简单导航条示例
Jan 26 HTML / CSS
css3的transform中scale缩放详解
Dec 08 HTML / CSS
CSS3制作彩色进度条样式的代码示例分享
Jun 23 HTML / CSS
CSS3实现淘宝留白的方法
Jun 05 HTML / CSS
html标签之Object和EMBED标签详解
Jul 04 HTML / CSS
HTML5实现预览本地图片
Feb 17 HTML / CSS
HTML5 Canvas入门学习教程
Mar 17 HTML / CSS
纯HTML5+CSS3制作生日蛋糕(代码易懂)
Nov 16 HTML / CSS
详解html5 postMessage解决跨域通信的问题
Aug 17 HTML / CSS
h5封装下拉刷新
Aug 25 HTML / CSS
如何利用 CSS Overview 面板重构优化你的网站
Oct 24 HTML / CSS
分享几个实用的CSS代码块
Jun 10 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
理解php Hash函数,增强密码安全
2011/02/25 PHP
PHP学习之正则表达式
2011/04/17 PHP
CodeIgniter输出中文乱码的两种解决办法
2014/06/12 PHP
PHP面向对象中new self()与 new static()的区别浅析
2017/08/17 PHP
Laravel ORM 数据model操作教程
2019/10/21 PHP
js获取某月的最后一天日期的简单实例
2013/06/22 Javascript
jQuery实现图片左右滚动特效
2020/04/20 Javascript
瀑布流的实现方式(原生js+jquery+css3)
2020/06/28 Javascript
vue双向绑定简要分析
2017/03/23 Javascript
vue.js指令和组件详细介绍及实例
2017/04/06 Javascript
JavaScript中EventBus实现对象之间通信
2020/10/18 Javascript
element中table高度自适应的实现
2020/10/21 Javascript
Python实现基于权重的随机数2种方法
2015/04/28 Python
Python字符编码判断方法分析
2016/07/01 Python
Python语言描述连续子数组的最大和
2018/01/04 Python
Python实现JSON反序列化类对象的示例
2018/01/31 Python
python3.x实现发送邮件功能
2018/05/22 Python
详解python读取和输出到txt
2019/03/29 Python
Django处理多用户类型的方法介绍
2019/05/18 Python
python定间隔取点(np.linspace)的实现
2019/11/27 Python
Python实现敏感词过滤的4种方法
2020/09/12 Python
Python模拟登录requests.Session应用详解
2020/11/17 Python
CSS3自定义滚动条样式的示例代码
2017/08/21 HTML / CSS
ASOS亚洲:ASOS Asia
2018/03/04 全球购物
新西兰购物网站:TheMarket NZ
2020/09/19 全球购物
荷兰天然和有机产品网上商城:BigGreenSmile.nl
2020/07/26 全球购物
致裁判员加油稿
2014/02/08 职场文书
应聘护理专业毕业自荐书范文
2014/02/12 职场文书
《小猫刮胡子》教学反思
2014/02/21 职场文书
快递员岗位职责
2014/09/12 职场文书
个性发展自我评价2015
2015/03/09 职场文书
2015年招商引资工作总结
2015/04/25 职场文书
幼儿园大班教师评语
2019/06/21 职场文书
推荐六本经典文学奖书籍:此生必读
2019/08/22 职场文书
JS实现简单控制视频播放倍速的实例代码
2021/04/18 Javascript
Go语言基础知识点介绍
2021/07/04 Golang