一篇文章带你学习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实现当鼠标移进去时当前亮其他变灰效果
Apr 08 HTML / CSS
CSS3实现大小不一的粒子旋转加载动画
Apr 21 HTML / CSS
CSS3圆角边框和边界图片效果实例
Jul 01 HTML / CSS
利用 CSS3 实现的无缝轮播功能代码
Sep 25 HTML / CSS
html5新增的定时器requestAnimationFrame实现进度条功能
Dec 13 HTML / CSS
利用Canvas模仿百度贴吧客户端loading小球的方法示例
Aug 13 HTML / CSS
只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
Jun 04 HTML / CSS
HTML5 Canvas的性能提高技巧经验分享
Jul 02 HTML / CSS
html5使用canvas实现跟随光标跳动的火焰效果
Jan 07 HTML / CSS
html5 figure和figcaption的使用方法
Sep 10 HTML / CSS
CSS3实现三角形不断放大效果
Apr 13 HTML / CSS
详解Html5项目适配系统深色模式方案总结
Apr 14 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安装全攻略:APACHE
2006/10/09 PHP
LotusPhp笔记之:Logger组件的使用方法
2013/05/06 PHP
qq登录,新浪微博登录接口申请过程中遇到的问题
2014/07/22 PHP
PHP中浮点数计算比较及取整不准确的解决方法
2015/01/09 PHP
Zend Framework教程之路由功能Zend_Controller_Router详解
2016/03/07 PHP
php使用event扩展的io复用测试的示例
2020/10/20 PHP
PHP执行系统命令函数实例讲解
2021/03/03 PHP
可实现多表单提交的javascript函数
2007/08/01 Javascript
JavaScript中setInterval的用法总结
2013/11/20 Javascript
Web开发必知Javascript技巧大全
2016/02/23 Javascript
js微信扫描二维码登录网站技术原理
2016/12/01 Javascript
JS库中的Particles.js在vue上的运用案例分析
2017/09/13 Javascript
在vue项目中,将juery设置为全局变量的方法
2018/09/25 Javascript
详解JQuery基础动画操作
2019/04/12 jQuery
[03:17]2014DOTA2 国际邀请赛中国区预选赛 四强专访
2014/05/23 DOTA
Python读取键盘输入的2种方法
2015/06/16 Python
python中Switch/Case实现的示例代码
2017/11/09 Python
基于python绘制科赫雪花
2018/06/22 Python
解决Shell执行python文件,传参空格引起的问题
2018/10/30 Python
使用Python实现跳帧截取视频帧
2019/05/31 Python
jupyter notebook 的工作空间设置操作
2020/04/20 Python
python向xls写入数据(包括合并,边框,对齐,列宽)
2021/02/02 Python
纯CSS3实现圆角效果(含IE兼容解决方法)
2014/05/07 HTML / CSS
ESDlife健康生活易:身体检查预订、搜寻及比较
2019/05/10 全球购物
初中化学教学反思
2014/01/23 职场文书
留学推荐信怎么写
2014/01/25 职场文书
决心书标准格式
2014/03/11 职场文书
活动倡议书范文
2014/05/13 职场文书
大学生村官考核材料
2014/05/23 职场文书
优秀教师先进事迹材料
2014/12/15 职场文书
公司财务经理岗位职责
2015/04/08 职场文书
2015年售后服务工作总结
2015/04/25 职场文书
运动员代表致辞
2015/07/29 职场文书
LayUI+Shiro实现动态菜单并记住菜单收展的示例
2021/05/06 Javascript
Mysql systemctl start mysqld报错的问题解决
2021/06/03 MySQL
JS高级程序设计之class继承重点详解
2022/07/07 Javascript