用CSS怎么做一个图片边框的效果?
Admin 2021-10-12 群英技术资讯 1123 次浏览
用CSS怎么做一个图片边框的效果?要实现这个效果并不困难,因为CSS3 border-image 属性允许指定要用来代替元素周围的正常边界的图像,那么图片边框具体怎样做呢?接下来我们一起了解看看。
一、浏览器支持
表中的数字指定完全支持该属性的第一个浏览器版本。
数字后面的 -webkit- 或者 -moz- 使用时需要指定前缀。
二、CSS3 border-image 属性
CSS3 border-image 属性允许您指定要用来代替元素周围的正常边界的图像。属性有三个部分:
以下面的图像(叫做 "border.png")为例:
原理分析:
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; }
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; }
实例 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; }
实例 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; }
三、总结
本文基于CSS基础,使用CSS语言,介绍了有关CSS定义图片边框的知识点,从基础的属性概念入手 ,border-image的用法,在实际应用中需要注意的问题,做了详细的讲解。通过一个个实例的演示。希望帮助你更好的学习CSS。
关于“用CSS怎么做一个图片边框的效果”的内容就介绍到这,上述实例具有一定的借鉴价值,感兴趣的朋友可以参考学习,希望能对大家有帮助,想要了解更多大家可以关注群英网络其它相关文章。
文本转载自脚本之家
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
方法:1、给元素添加“width:宽度值;height:高度值;”样式,将元素设置为宽度是高度一半的矩形;2、给元素添加“border-radius:0 矩形宽度值 矩形宽度值 0;”样式,给矩形设置圆角,进而将矩形设置为右半圆样式。
由于最近在做一些边框按钮的阴影效果用到了box-shadow属性,发现这个阴影效果的css属性真的很值得学习,特地网上学习了一下box-shadow属性。 一.box-shadow的定义和语法 定义: box-shadow是css3新增的一个属性。在W3School里,定义box-shadow是向框添加一个
在css中,可以利用“margin-bottom”属性来改变ul中li的间距,该属性用于设置元素的下外边距,利用该属性给ul中的li元素设置下外边距,进而改变li的间距,语法为“ul li{margin-bottom:间距值;}”。
前言Q:如果多个规则匹配同一个元素,而且部分声明之间有冲突,那么我们如何知道哪个规则胜出呢?A:用户代理会计算每个规则中选择符的特指度,然后将其依附到规则中的每个声明上。如果
在css中,小写变大写的代码是“text-transform:uppercase”;“text-transform”属性的作用是控制元素文本的大小写样式,当属性的值为“uppercase”时,元素内的文本小写样式会变成大写样式。
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008