css3中自适应边框图片运用

css3中自适应边框图片运用：

组合写法：

border-image: url("images/border.jpg") 167/20px round;

拆分写法：

border-image-source: url("images/border.jpg");
border-image-slice: 167 167 167 167;
border-image-width: 20px;
border-image-repeat: round;

解释：

边框图片资源地址
裁剪尺寸（上右下左）单位默认px，可使用百分百。
边框图片的宽度，默认边框的宽度。
平铺方式：
- stretch 拉伸（默认）
- repeat 平铺，从边框的中心向两侧开始平铺，会出现不完整的图片。
- round 环绕，是完整的使用切割后的图片进行平铺。

DEMO代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>边框图片</title><style>ul{margin: 0;padding: 0;list-style: none;}li{width: 350px;height: 160px;border: 20px solid #ccc;margin-top: 20px;}li:nth-child(1){/*border-image: url("images/border.jpg") 167/20px round;*/border-image-source: url("images/border.jpg");border-image-slice: 167 167 167 167;border-image-width: 20px;/*环绕  是完整的使用切割后的图片进行平铺*/                    border-image-repeat: round; }li:nth-child(2){/*平铺 从边框的中心向两侧开始平铺 会出现不完整的图片*/                                         border-image: url("images/border.jpg") 167/20px repeat;}li:nth-child(3){/*默认的平铺方式*/border-image: url("images/border.jpg") 167/20px stretch;}</style>
</head>
<body>
<ul><li></li><li></li><li></li>
</ul>
</body>
</html>

切割示例图：
border-image-clice：按照上右下左顺序切割
以两端最大的部位进行切割

css3中自适应边框图片运用相关推荐

html怎么将图片水平翻转,CSS3中如何实现图片翻转
今天将和大家分享如何利用CSS3中的知识来制作一个图片翻转的功能,CSS3中图片翻转效果主要通过设置transition过渡动画以及transform旋转动画来共同实现 [推荐课程:CSS3教程] 案 ...
css3 border img 边框图片
摘自http://www.html-js.com/article/CSS3-tutorial-css3borderimage-frame-image-Xiangjie-on border-image摘 ...
css3中绚丽的图片翻转特效
看效果 css3属性:transform,transition,backface-visibility transition: transform 400ms;对于所有属性过度动画400毫秒 tran ...
css3中边框的4种样式
border是CSS的一个属性,用它可以给能确定范围的HTML标签画边框,它可以定义边框线的类型.宽度和颜色,最终可以制作一些特殊效果 css3的边框有4种样式: 1.border-color(边框的 ...
【前端系列教程之CSS3】06_CSS3边框、渐变、文本效果等
一.CSS3边框(重要) 用 CSS3,你可以创建圆角边框,添加阴影框,并作为边界的形象而不使用设计程序,如 Photoshop. 1.1 CSS3边框圆角在 CSS2 中添加圆角棘手.我们不得不在 ...
border-image，边框图片效果详解
border-image 设置边框图片的效果 border-image-source //引入背景图片地址 border-image-slice ...
CSS3边框图片-像素虚边的问题
虽然CSS3新增了这个功能,但是在W3school里面并没有给出具体详细的解释,还好网上不乏大神给你我们很全面的解释其中的原理-css3:border-image边框图像详解边框图片的原理是四个角不 ...
理解CSS3中的background－size(对响应性图片等比例缩放)
理解CSS3中的background-size(对响应性图片等比例缩放) 阅读目录 background-size的基本属性给图片设置固定的宽度和高度的固定宽度400px和高度200px-使用ba ...
css3新增了哪三种边框效果,怎么在CSS3中实现一个边框效果
怎么在CSS3中实现一个边框效果发布时间:2021-03-11 18:01:54 来源:亿速云阅读:125 作者:Leah 怎么在CSS3中实现一个边框效果?相信很多没有经验的人对此束手无策,为此 ...
CSS3之边框图片border-image
CSS3中有关border的属性,还有很多,今天我将为大家介绍一个很好玩的属性--Border-image.有了CSS3之边框图片Border-image,我们可以轻松搞定圆角,轻松搞定很多之前难搞的 ...

css3中自适应边框图片运用

css3中自适应边框图片运用相关推荐

最新文章

热门文章