边框图片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 ...
随机推荐
- 【IDEA使用技巧】(4) —— IDEA 构建Java Maven项目、导入Eclipse项目、多Module Maven项目
1.IntelliJ IDEA构建Java Maven项目 1.1. IDEA构建Java Maven项目 ①选择Create New Project,选择创建Maven项目,并勾选Create fr ...
- logrus 剖析之滚动日志
在实际开发过程中,为了节省磁盘,日志需要按照时间或者大小维度进行切割分成多分,归档过期的日志,删除久远的日志.这个就是在日常开发中经常遇见的日志滚动(log rotation) 那么在 logrus ...
- 『Go基础』第7节 变量
1. 什么是变量? 我们应该怎么去理解变量? 在这里我要举一个例子: 大家应该都知道王者荣耀这个游戏. 当我们在玩王者荣耀的时候, 我们操控的英雄的血量是不断变化的, 这个血量是存在内存中的. 那么这 ...
- @FeignClient 情况下header的传递方法,RestTemplate情况下Header传递方法
今天因为要调用另一个服务,因为我们用的是SpringCloud框架,所以通过Fegin调用,正好另一方服务有权限校验,需要传递token和设备ID,这两个参数都需要放到Header中, 用 @Requ ...
- Java性能调优—— VisualVM工具基本使用及监控本地和远程JVM进程超详细使用教程
- (转)nginx与PHP的关系
php是一门编程语言,可以编写很多程序,但是只有php的话,你的php只能在你的服务器里孤立的运行,比如你用php写了一个可以通过身高计算人的标准体重的程序,虽然这个程序可以在服务器运行,但是他还不能 ...
- 手写RPC框架(netty+zookeeper)
RPC是什么?远程过程调用,过程就是业务处理.计算任务,像调用本地方法一样调用远程的过程. RMI和RPC的区别是什么?RMI是远程方法调用,是oop领域中RPC的一种实现,我们熟悉的restfull ...
- 【方法】list<?> 两个list集合 查找不同元素,求差值
//方法1 //自己声明list//思路,从list1中删除list2中相同的元素//使用循环遍历对比的方式删除//list1包含list2,list1多与list2//结束得出list1为不相同元素 ...
- 使用vue-cookies
1.在项目中安装vue-cookies: npm install vue-cookies --save 或 yarn add vue-cookies --save 2.全局引用: //在 main.j ...
- vue和react之间的区别
1.Vue和React之间的区别 相同点: Vue和其他框架一样,都有组件开发和虚拟dom 都支持props进行父子组件之间的数据通信 都支持数据驱动视图,不直接操作真实dom 都支持服务器端的 渲染 ...