文档章节

CSS3的边框(二)

博为峰教研组
 博为峰教研组
发布于 2017/03/23 10:35
字数 225
阅读 5
收藏 0

二、边框图片

边框图片border-image属性,是用来给元素边框添加背景图像,在某些时候,利用这个 border-image 可以轻松绘制一些比较复杂的小部件。border-image只是一个简写属性,,用于设置以下属性:

• border-image-source

• border-image-slice

• border-image-width

• border-image-outset

border-image-repeat 

Internet Explorer 不支持 border-image 属性。

border-image 属性规定了用作边框的图片。为了实现浏览器的兼容,在使用border-image属性时写法通常如下:

div

{

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

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

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

}

设置的图片将会被“切割”成九宫格形式,然后进行设置。如下图

“切割”完成后生成虚拟的9块图形,然后按对应位置设置背景,

其中四个角位置、形状保持不变,中心位置水平垂直两个方向平铺。如下图

 

 

© 著作权归作者所有

博为峰教研组
粉丝 51
博文 1224
码字总数 479077
作品 0
黄浦
程序员
私信 提问
CSS3 边框(Borders)

CSS3 Borders 用CSS3,你可以创建圆角边框,添加阴影框,并作为边界的形象而不使用设计程序,如Photoshop。 在本章中,您将了解以下的边框属性: border-radius box-shadow border-image 浏览...

wybo521
2016/01/23
47
0
好程序员web前端分享CSS3 边框

好程序员web前端分享CSS3 边框,通过 CSS3,您能够创建圆角边框,向矩形添加阴影,使用图片来绘制边框 - 并且不需使用设计软件,比如 PhotoShop。 在本章中,您将学到以下边框属性: border...

好程序员IT
05/15
10
0
CSS3多列column布局

Properties属性 CSS Version版本 Inherit From Parent继承性 Description简介 column css3 无 设置或检索对象的列数和每列的宽度。复合属性 column-width css3 无 设置或检索对象每列的宽度 ...

罗马教堂的钟声
2015/12/02
48
0
CSS3 Border-color

CSS3中有关于Border的属性一共有三个:圆角border-radius,图片边框border-image,边框多颜色border-color,其中圆角border-radius是常用的一个属性,而且现在很多网站制作圆角效果都使用bor...

sunshinewyf
2015/10/22
24
0
CSS3 用户界面

CSS3 用户界面 在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸,框尺寸和外边框。 在本章中,您将了解以下的用户界面属性: resize box-sizing outline-offset 浏览器支持 Firefox、...

wybo521
2016/01/25
16
0

没有更多内容

加载失败,请刷新页面

加载更多

web前端开发高级

前端高效开发框架技术与应用 Vue 基础 Vue 框架简介 MVX 模式介绍 Vue 框架概述 如何使用 Vue.js 基础语法 实例对象 生命周期 模板语法 计算属性 Methods 方法 渲染 列表渲染 条件渲染 事件与...

达达前端小酒馆
28分钟前
4
0
PostgreSQL 11.3 locking

rudi
今天
5
0
Mybatis Plus sql注入器

一、继承AbstractMethod /** * @author beth * @data 2019-10-23 20:39 */public class DeleteAllMethod extends AbstractMethod { @Override public MappedStatement injectMap......

一个yuanbeth
今天
21
1
一次写shell脚本的经历记录——特殊字符惹的祸

本文首发于微信公众号“我的小碗汤”,扫码文末二维码即可关注,欢迎一起交流! redis在容器化的过程中,涉及到纵向扩pod实例cpu、内存以及redis实例的maxmemory值,statefulset管理的pod需要...

码农实战
今天
4
0
为什么阿里巴巴Java开发手册中不建议在循环体中使用+进行字符串拼接?

之前在阅读《阿里巴巴Java开发手册》时,发现有一条是关于循环体中字符串拼接的建议,具体内容如下: 那么我们首先来用例子来看看在循环体中用 + 或者用 StringBuilder 进行字符串拼接的效率...

武培轩
今天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部