css3 border-image边框图片属性笔记

原创 PHP笔记  2017-11-25 13:00  阅读 1,365 views 次

定义及用法

css中,border-image属性是用来将图片设置为边框(其实就是给边框添加背景图片),可以同时设置 border-image-source、border-image-slice、border-image-width、border-image-outset、border-image-repeat属性的值。

border-image属性一般在元素边框不规则的情况下使用,就是将不规则的边框设计为图作为边框背景;还有就是在按钮宽高不确定的情况,用border-image属性来制作按钮,可以用同一张图来达到不同宽高的按钮的效果。

border-image属性值

  • border-image-source:指定要用于绘制边框的图像的位置;
  • border-image-slice:图像边界向内偏移;
  • border-image-width :图像边界的宽度;
  • border-image-outset:指定在边框外部绘制 border-image-area 的量;
  • border-image-repeat:设置图像边界是否应重复(repeat)、拉伸(stretch)或铺满(round)。

语法格式:

border-image: source slice width outset repeat / initial / inherit;

实例:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3 border-image边框图片属性笔记</title>
<style>
div
{
border:8px solid transparent;
width:100px;
padding:6px;
border-image: url("https://www.ggbiji.com/wp-content/uploads/2017/11/button.png") 0 14 0 14 stretch;
}
</style>
<head/>
<body>
<div>border-image属性演示</div>
<p>原图片:</p>
<img src="https://www.ggbiji.com/wp-content/uploads/2017/11/button.png" >
</body>
</html>

运行结果:

注意:Internet Explorer 10 及更早的版本不支持 border-image 属性。

更多css属性——>css属性大全

本文地址:https://www.ggbiji.com/border-image.html
版权声明:本文为 PHP笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情