一篇文章带你学习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 translate导致字体模糊的实例代码
Aug 30 HTML / CSS
CSS3 制作绽放的莲花采用效果叠加实现
Jan 31 HTML / CSS
利用CSS3的特性改变文本选中时的颜色
Sep 11 HTML / CSS
CSS3之边框多颜色Border-color属性使用示例
Oct 11 HTML / CSS
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
Mar 17 HTML / CSS
css3实现背景动态渐变效果
Dec 10 HTML / CSS
HTML5是什么 HTML5是什么意思 HTML5简介
Oct 26 HTML / CSS
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
Apr 10 HTML / CSS
HTML5 canvas标签实现刮刮卡效果
Apr 24 HTML / CSS
HTML5标签嵌套规则详解【必看】
Apr 26 HTML / CSS
从零实现一个自定义html5播放器的示例代码
Aug 01 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
php通过修改header强制图片下载的方法
2015/03/24 PHP
centos+php+coreseek+sphinx+mysql之一coreseek安装篇
2016/10/25 PHP
Ubuntu 16.04下安装PHP 7过程详解
2017/03/28 PHP
IE8下关于querySelectorAll()的问题
2010/05/13 Javascript
JQuery的Alert消息框插件使用介绍
2010/10/09 Javascript
Extjs 继承Ext.data.Store不起作用原因分析及解决
2013/04/15 Javascript
JQuery AJAX 中文乱码问题解决
2013/06/05 Javascript
JQuery中使文本框获得焦点的方法实例分析
2015/02/28 Javascript
jQuery使用contains过滤器实现精确匹配方法详解
2016/02/25 Javascript
jQuery获取与设置iframe高度的方法
2016/08/01 Javascript
JavaScript使用键盘输入控制实现数字验证功能
2016/08/19 Javascript
jQuery替换节点用法示例(使用replaceWith方法)
2016/09/08 Javascript
Nodejs 发送Post请求功能(发短信验证码例子)
2017/02/09 NodeJs
vue货币过滤器的实现方法
2017/04/01 Javascript
解决nodejs的npm命令无反应的问题
2018/05/17 NodeJs
js实现购物车功能
2018/06/12 Javascript
5分钟学会Vue动画效果(小结)
2018/07/21 Javascript
JS构造一个html文本内容成文件流形式发送到后台
2018/07/31 Javascript
解决微信小程序防止无法回到主页的问题
2018/09/28 Javascript
Js代码中的span拼接问题解决
2019/11/22 Javascript
1分钟快速生成用于网页内容提取的xslt
2018/02/23 Python
python set集合使用方法解析
2019/11/05 Python
django实现web接口 python3模拟Post请求方式
2019/11/19 Python
Python同时迭代多个序列的方法
2020/07/28 Python
python反爬虫方法的优缺点分析
2020/11/25 Python
伦敦高达60%折扣的钻石珠宝商:Purely Diamonds
2018/06/24 全球购物
澳大利亚墨水站Ink Station:墨水和碳粉打印机墨盒
2019/03/24 全球购物
运动会开幕式邀请函
2014/01/22 职场文书
租房安全协议书
2014/08/20 职场文书
教师节横幅标语
2014/10/08 职场文书
党校毕业个人总结
2015/02/28 职场文书
2015年小学数学教师个人工作总结
2015/05/25 职场文书
音乐会主持人开场白
2015/05/28 职场文书
三十年同学聚会致辞
2015/07/28 职场文书
宾馆客房管理制度
2015/08/06 职场文书
辞职申请书范本
2019/05/20 职场文书