边框图片border-image
一、定义：
- 在内容变化的容器里使用，边框自动填充，由于浏览器的兼容问题，没有广泛使用
border-image属性是速记属性用于设置 border-image-source, border-image-slice, border-image-width, border-image-outset 和border-image-repeat 的值。例如：border-image：url（“1.png”） 167/20px round
二、用法
①border-image-source属性指定要使用的图像，而不是由border-style属性设置的边框样式。 如果值是"none"，或者，如果无法显示图像，边框样式会被使用。
②border-image -slice属性指定图像的边界向内偏移。此属性指定顶部，右，底部，左边缘的图像向内偏移，分为九个区域：四个角，四边和中间。值默认的单位是px，不能使用小数
③border-image -width属性指定图像边界的宽度。
④border-image-outset用于指定在边框外部绘制 border-image-area 的量，设置边框图像与边框（border-image）的距离，默认为0
⑤ border-image-repeat 属性用于图像边界是否应重复（repeated：从边框的中间向两侧平铺，但不完整）、拉伸（stretched：拉伸显示在边框内，会变形）或铺满（rounded：完整的自适应显示在边框内，等比缩放，不会变形）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边框图片</title>
<style>
.box1{
width: 400px;
height: 400px;
float: left;
border: 20px solid #000;/* 必须先设置 */
border-image: url("border.png") 26/20px stretch;
}
.box2{
width: 400px;
height: 400px;
float: left;
border: 20px solid #000;/* 必须先设置 */
border-image: url("border.png") 26/20px round;
}
.box3{
width: 400px;
height: 400px;
float: left;
border: 20px solid #000;/* 必须先设置 */
border-image: url("border.png") 26/20px repeat;
}
</style>
</head>
<body>
<div class="box1">stretch(默认值)</div>
<div class="box2">round</div>
<div class="box3">repeat</div>
</body>
</html>
边框图片border-image的更多相关文章
- css3 border img 边框图片
摘自http://www.html-js.com/article/CSS3-tutorial-css3borderimage-frame-image-Xiangjie-on border-image摘 ...
- 第 23 章 CSS3 边框图片效果
学习要点: 1.属性初探 2.属性解释 3.简写和版本 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩. 一．属性解释 CSS3 提 ...
- Retina视网膜屏中CSS3边框图片像素虚边的问题
虽然CSS3新增了这个功能,但是在W3school里面并没有给出具体详细的解释,还好网上不乏大神给你我们很全面的解释其中的原理-css3:border-image边框图像详解 边框图片的原理是四个角不 ...
- CSS3之边框图片border-image
CSS3中有关border的属性,还有很多,今天我将为大家介绍一个很好玩的属性——Border-image.有了CSS3之边框图片Border-image,我们可以轻松搞定圆角,轻松搞定很多之前难搞的 ...
- 第八十节，CSS3边框图片效果
CSS3边框图片效果 学习要点: 1.属性初探 2.属性解释 3.简写和版本 本章主要探讨HTML5中CSS3中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩. 一．属性解释 CSS3 ...
- CSS3 02. 边框、边框圆角、边框阴影、边框图片、渐变、线性渐变、径向渐变、背景、过渡transition、2D转换
边框圆角 border-radius 每个角可以设置两个值,x值.y值 border-top-left-radius:水平半径 垂直半径 border-radius:水平半径/垂直半径 border- ...
- 从零开始学 Web 之 CSS3（四）边框图片，过渡
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 鼠标滑过图片添加边框图片无位移[xyytit]
实现下面的效果,鼠标滑过图片添加边框图片无位移——鼠标滑过,图片只是加了边框,不会晃动: 参考代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...
- CSS3边框图片-像素虚边的问题
虽然CSS3新增了这个功能,但是在W3school里面并没有给出具体详细的解释,还好网上不乏大神给你我们很全面的解释其中的原理-css3:border-image边框图像详解 边框图片的原理是四个角不 ...
- CSS学习笔记-边框图片等属性
1.边框图片: 1.1含义: 告诉浏览器指定一张图片作为边框 1.2格式: border-image-source:url ...
随机推荐
- 百度云服务接口错误：Parameter invalid, the key input with filter parameter is not searchfilter column key
百度LBS云服务接口: 地址:http://lbsyun.baidu.com/index.php?title=lbscloud/api/geosearch 访问接口:http://api.map.ba ...
- [CF436D]Pudding Monsters
题目大意:有一个长度为$2\times 10^5$的板,有$n(n\leqslant 10^5)$个格子$a_1,\dots,a_n$有布丁怪兽,一开始连续的怪兽算一个怪兽,有$m(m\leqslan ...
- [洛谷U72177]火星人plus
题目大意:给你一个$1\sim n(n\leqslant 10^5)$的排列,设$a$为它在$1\sim n$的全排列中的排名,求在$1\sim n$的全排列中第$a+m$个排列. 题解:康托展开以及 ...
- ASP.NET面试题130道
130道ASP.NET面试题 1. 简述 private. protected. public. internal 修饰符的访问权限. 答 . private : 私有成员, 在类的内部才可以访问. ...
- SpringICO和DI区别
学习过Spring框架的人一定都会听过Spring的IoC(控制反转) .DI(依赖注入)这两个概念,对于初学Spring的人来说,总觉得IoC .DI这两个概念是模糊不清的,是很难理解的,今天和大家 ...
- Cookie中的HttpOnly
1.什么是HttpOnly? 如果您在cookie中设置了HttpOnly属性,那么通过js脚本将无法读取到cookie信息,这样能有效的防止XSS攻击,具体一点的介绍请google进行搜索 2.ja ...
- mySql入门-（二）
最近刚刚开始学习Mysql,然而学习MySql必经的一个过程就是SQL语句,只有按照文档从头开始学习SQL语句.学习的过程是痛苦的,但是学完的成果是甘甜的. SQL 语法 所有的 SQL 语句都以下列 ...
- 页面 ajax
function ajax({ url, success, data = { }, type= "GET", async = true}){ let xhr; if(XMLHttp ...
- [AIR] NativeExtension在IOS下的开发实例 --- 新建项目测试ANE(四)
来源:http://bbs.9ria.com/thread-102043-1-1.html 通过前面的努力,好了,我们终于得到了一个ANE文件了.下面我们开始新建一个Flex Mobile项目做一下测 ...
- CLR、CIL、CTS、CLS、CLI、BCL和FCL,JIT,IL,GC
如果要想深入学习.NET平台,那么标题中的这些关键字对你来说并不陌生,这些名词构成了.NET庞大的生态系统,为了宏观认识.NET平台,学些.NET架构体系,针对一些常用常用名词的理解是很有必要的,未必 ...