一篇文章带你学习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实现3d旋转动画特效
Mar 10 HTML / CSS
老生常谈CSS中的长度单位
Jun 27 HTML / CSS
用css3实现转换过渡和动画效果
Mar 13 HTML / CSS
纯CSS3实现的井字棋游戏
Nov 25 HTML / CSS
HTML5 Video/Audio播放本地文件示例介绍
Nov 18 HTML / CSS
分享全球十款超强HTML5开发工具
May 14 HTML / CSS
HTML5打开手机扫码功能及优缺点
Nov 27 HTML / CSS
HTML5之消息通知的使用(Web Notification)
Oct 30 HTML / CSS
如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度
Aug 01 HTML / CSS
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
Mar 17 HTML / CSS
HTML5 body设置全屏背景图片的示例代码
Dec 08 HTML / CSS
元素水平垂直居中的方式
Mar 31 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下通过POST还是GET来传值
2008/06/05 PHP
php生成图形验证码几种方法小结
2013/08/15 PHP
PHP 5.3和PHP 5.4出现FastCGI Error解决方法
2015/02/12 PHP
Yii2中关联查询简单用法示例
2016/08/10 PHP
在laravel中实现将查询的对象转换为多维数组的函数
2019/10/21 PHP
JavaScript判断textarea值是否为空并给出相应提示
2014/09/04 Javascript
jQuery实现鼠标经过事件的延时处理效果
2020/08/20 Javascript
如何编写jquery插件
2017/03/29 jQuery
Node.js利用debug模块打印出调试日志的方法
2017/04/25 Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
2017/07/17 Javascript
微信小程序之电影影评小程序制作代码
2017/08/03 Javascript
JS实现模糊查询带下拉匹配效果
2018/06/21 Javascript
vue实现双向绑定和依赖收集遇到的坑
2018/11/29 Javascript
vue.js this.$router.push获取不到params参数问题
2020/03/03 Javascript
vue在响应头response中获取自定义headers操作
2020/07/24 Javascript
vue 数据双向绑定的实现方法
2021/03/04 Vue.js
python设置windows桌面壁纸的实现代码
2013/01/28 Python
Python数据类型详解(二)列表
2016/05/08 Python
python得到一个excel的全部sheet标签值方法
2018/12/10 Python
CentOS7安装Python3的教程详解
2019/04/10 Python
Python 点击指定位置验证码破解的实现代码
2019/09/11 Python
500行代码使用python写个微信小游戏飞机大战游戏
2019/10/16 Python
TensorFlow实现从txt文件读取数据
2020/02/05 Python
python实现发送QQ邮件(可加附件)
2020/12/23 Python
详解matplotlib绘图样式(style)初探
2021/02/03 Python
Python爬虫爬取ts碎片视频+验证码登录功能
2021/02/22 Python
阿迪达斯奥地利官方商城:adidas.at
2016/10/16 全球购物
英国旅行箱包和行李箱购物网站:Travel Luggage & Cabin Bags
2019/08/26 全球购物
初婚未育证明
2014/01/15 职场文书
优秀毕业生推荐信范文
2014/03/07 职场文书
挂牌仪式主持词
2014/03/20 职场文书
家长会欢迎标语
2014/06/24 职场文书
英语教师个人总结
2015/02/09 职场文书
清洁工岗位职责
2015/02/13 职场文书
教师师德承诺书2016
2016/03/25 职场文书
html解决浏览器记住密码输入框的问题
2023/05/07 HTML / CSS