一篇文章带你学习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中用animation的steps属性制作帧动画
Apr 25 HTML / CSS
基于CSS3实现的漂亮Menu菜单效果代码
Sep 10 HTML / CSS
如何使用css3实现一个类在线直播的队列动画的示例代码
Jun 17 HTML / CSS
HTML5的结构和语义(1):前言
Oct 17 HTML / CSS
只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
Jun 04 HTML / CSS
HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用
Jan 30 HTML / CSS
html5的websockets全双工通信详解学习示例
Feb 26 HTML / CSS
HTML5的download属性详细介绍和使用实例
Apr 23 HTML / CSS
用HTML5中的Canvas结合公式绘制粒子运动的教程
May 08 HTML / CSS
canvas实现滑动验证的实现示例
Aug 11 HTML / CSS
AmazeUI 加载进度条的实现示例
Aug 20 HTML / CSS
css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)
Apr 19 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
解决dede生成静态页和动态页转换的一些问题,及火车采集入库生成动态的办法
2007/03/29 PHP
PHP 采集程序 常用函数
2008/12/18 PHP
探讨fckeditor在Php中的配置详解
2013/06/08 PHP
PHP简单获取视频预览图的方法
2015/03/12 PHP
老生常谈php中传统验证与thinkphp框架(必看篇)
2017/06/10 PHP
PHP设计模式之装饰器(装饰者)模式(Decorator)入门与应用详解
2019/12/13 PHP
JavaScript isPrototypeOf和hasOwnProperty使用区别
2010/03/04 Javascript
多个datatable共存造成多个表格的checkbox都被选中
2013/07/11 Javascript
微信小程序 合法域名校验出错详解及解决办法
2017/03/09 Javascript
JSONP基础知识详解
2017/03/19 Javascript
element-ui表格列金额显示两位小数的方法
2018/08/24 Javascript
详解React之key的使用和实践
2018/09/29 Javascript
如何使用electron-builder及electron-updater给项目配置自动更新
2018/12/24 Javascript
Vue路由守卫及页面登录权限控制的设置方法(两种)
2020/03/31 Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
2020/10/30 Javascript
JavaScript Html实现移动端红包雨功能页面
2021/01/10 Javascript
[55:45]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第一局
2016/02/28 DOTA
[01:00:25]NB vs Secret 2018国际邀请赛小组赛BO1 B组加赛 8.19
2018/08/21 DOTA
人生苦短我用python python如何快速入门?
2018/03/12 Python
python实现简单日期工具类
2019/04/24 Python
Django模板语言 Tags使用详解
2019/09/09 Python
Python使用matplotlib绘制三维参数曲线操作示例
2019/09/10 Python
基于Python实现签到脚本过程解析
2019/10/25 Python
Python for循环通过序列索引迭代过程解析
2020/02/07 Python
Python读写操作csv和excle文件代码实例
2020/03/16 Python
Python Selenium破解滑块验证码最新版(GEETEST95%以上通过率)
2021/01/29 Python
HTML5超炫酷粒子效果的进度条的实现示例
2019/08/23 HTML / CSS
印尼穆斯林时尚购物网站:Hijabenka
2016/12/10 全球购物
高级护理实习生自荐信
2013/09/28 职场文书
护士节演讲稿开场白
2014/08/25 职场文书
股东出资证明书范例
2014/10/04 职场文书
党委书记个人检查对照材料思想汇报
2014/10/11 职场文书
2014年小学体育工作总结
2014/12/11 职场文书
停电通知范文
2015/04/16 职场文书
分享3个非常实用的 Python 模块
2022/03/03 Python
一次线上mongo慢查询问题排查处理记录
2022/03/18 MongoDB