CSS3的边框（三）

2019独角兽企业重金招聘Python工程师标准>>>

border-image有以下几个重要的属性需要了解一下：

round 会自动调整尺寸，完整显示边框图片。

repeat 单纯平铺多余部分，会被“裁切”而不显示。

<!DOCTYPE html>

<html>

<head>

<style>

div

{

border:15px solid transparent;

width:300px;

padding:10px 20px;

}

#round

{

-moz-border-image:url(/i/border.png) 30 30 round; /* Old Firefox */

-webkit-border-image:url(/i/border.png) 30 30 round; /* Safari and Chrome */

-o-border-image:url(/i/border.png) 30 30 round; /* Opera */

border-image:url(/i/border.png) 30 30 round;

}

#stretch

{

-moz-border-image:url(/i/border.png) 30 30 stretch; /* Old Firefox */

-webkit-border-image:url(/i/border.png) 30 30 stretch; /* Safari and Chrome */

-o-border-image:url(/i/border.png) 30 30 stretch; /* Opera */

border-image:url(/i/border.png) 30 30 stretch;

}

</style>

</head>

<body>

<div id="round">在这里，图片铺满整个边框。</div>

<br>

<div id="stretch">在这里，图片被拉伸以填充该区域。</div>

<p>这是我们使用的图片：</p>

</body>

</html>

运行结果：

转载于:https://my.oschina.net/u/2971691/blog/865221

CSS3的边框（三）相关推荐

css3中边框的4种样式
border是CSS的一个属性,用它可以给能确定范围的HTML标签画边框,它可以定义边框线的类型.宽度和颜色,最终可以制作一些特殊效果 css3的边框有4种样式: 1.border-color(边框的 ...
CSS3之边框图片border-image
CSS3中有关border的属性,还有很多,今天我将为大家介绍一个很好玩的属性--Border-image.有了CSS3之边框图片Border-image,我们可以轻松搞定圆角,轻松搞定很多之前难搞的 ...
css 科技边框_一篇文章带你学习CSS3图片边框
这篇文章我们来讲一下在网站建设中,一篇文章带你学习CSS3图片边框.本文对大家进行网站开发设计工作或者学习都有一定帮助,下面让我们进入正文. 使用CSS3 border-image 属性,你可以在元素 ...
css圆角框四周阴影,css3圆角边框，边框阴影
border-radius向元素添加圆角边框,css3中的.IE9+ chrome safari5+ firefox4+ 现在都支持.可以向input div等设置边框.与border相似,可以四个角 ...
图解css3：核心技术与案例实战. 3.3　CSS3图片边框属性
3.3 CSS3图片边框属性 border-image效果在CSS2中,只有使用背景图片来制作,而且制作过程非常复杂,做完后也很难维护.如今CSS3中增添了一个图片边框的属性,能够模拟出backgro ...
css3图像边框：border-image - 代码篇
css3图片边框:border-image的应用,含效果图一.这是我使用的图片: 效果图如下: 部分css代码如下: /*文字卡片 vip-border*/.vip-border{border-ra ...
css3特效框,科技常识：6种非常炫酷的CSS3按钮边框动画特效
今天小编跟大家讲解下有关6种非常炫酷的CSS3按钮边框动画特效 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关6种非常炫酷的CSS3按钮边框动画特效的相关资料,希望小伙伴们看了有所帮助. ...
纯CSS3流光边框特效
实现原理: div的before元素当成左边框内部一个class=bottom的i标签当下边框 div的after元素当成右边框内部一个class=top的i标签当上边框效果图: 原理图: 左边 ...
html边框颜色线性渐变,css3设置边框颜色渐变的方法有哪些
css3设置边框颜色渐变的方法有哪些发布时间:2020-09-14 14:51:54 来源:亿速云阅读:110 作者:小新 css3设置边框颜色渐变的方法有哪些?这个问题可能是我们日常学习或工作经 ...
css3条纹边框效果
css3条纹边框效果在线演示本地下载 posted @ 2018-12-05 18:25 栖息地阅读( ...) 评论( ...) 编辑收藏

CSS3的边框（三）

CSS3的边框（三）相关推荐

最新文章

热门文章