border-image

border-image 可以将图像应用到盒子的边框上。

border-image 属性需要3个值同时存在：

  • URL 图片的地址
  • 切割图片的位，4个边需要写4个值
  • 如何处理边，它又3个种方式
    • stretch 伸展图片
    • repeat 重复图片
    • round 重复图片，同时会处理好边框效果

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子边框图像</title>
    <style>
        div{
            width:200px;
            height:50px;
            border: 2px outset green;
            margin:20px;
        }
        div.one{
            -moz-border-image: url("dots.gif") 11 11 11 11 stretch;
            -webkit-border-image: url("dots.gif") 11 11 11 11 stretch;
            border-image: url("dots.gif") 11 11 11 11 stretch;
        }
        div.two {
            -moz-border-image: url("GeS7.gif") 11 11 11 11 round;
            -webkit-border-image: url("GeS7.gif") 11 11 11 11 round;
            border-image: url("GeS7.gif") 11 11 11 11 round;
        }      
    </style>
</head>
<body>
<h1>利永贞网</h1>
<h2>学编程，上利永贞网</h2>
<div class="one"></div>
<div class="two"></div>
</body>
</html>

示例中演示两个盒子，计算结果如下：

注：

-moz-border-image 属性 和 -webkit-border-image 属性不在CSS规范内，它们是FireFox浏览器和Chrome浏览器的规范。

CSS 边框图像的更多相关文章

  1. 用CSS边框图像让你的网站更漂亮

    不久之前,添加一些装饰性元素,例如给网页中的图片添加花哨的边,以及耐心调整CSS文件才能使你的网页看起来不错.然而现在CSS已经做出了改变,用复杂的边框装饰你的网站只需几行代码.这篇文章将告诉你如何做 ...

  2. 理解CSS边框border

    前面的话   边框是CSS盒模型属性中默默无闻的一个普通属性,CSS3的到来,但得边框属性重新焕发了光彩.本文将详细介绍CSS边框 基础样式   边框是一条以空格分隔的集合样式,包括边框粗细(边框宽度 ...

  3. 第 17 章 CSS 边框与背景[下]

    学习要点: 1.设置背景 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 边框和背景,通过边框和背景的样式设置,给元素增加更丰富的外观. 一．设置背景 盒模型的尺寸可以通过两种方式实现可见性, ...

  4. 第七十四节，css边框与背景

    css边框与背景 学习要点: 1.声明边框 2.边框样式 3.圆角边框  本章主要探讨HTML5中CSS边框和背景,通过边框和背景的样式设置,给元素增加更丰富的外观. 声明边框 边框的声明有三个属性设 ...

  5. css边框小结

    css边框 CSS对界面的分割如上图,他们的含义如下: contend:包含HTML元素中包含的文本,图像或其他媒体.      padding:内容和边框之间的空格. 你可以想像这样的内在空间.   ...

  6. 复习-css边框和背景属性

    css边框和背景属性 border:所有边框属性 border-width:四条边框的宽度 border-style:设置边框样式,主要有dotted.solid.double border-colo ...

  7. HTML CSS边框阴影的实现

    一款用CSS控制背景图像平铺,从而实现区域边框阴影的效果,虽然用到了图片,但可贵之处是本代码不管你需要阴影的区域是多大,它都能自动适应,因些还是很值得收藏一下的,兼容所有的IE浏览器. <!DO ...

  8. html5--6-40 CSS边框

    html5--6-40 CSS边框 实例 div动态阴影 学习要点 掌握CSS边框属性的使用 元素的边框就是围绕元素内容和内边距的一条或多条线. 元素的边框属性: border 简写属性,用于把针对四 ...

  9. 第 17 章 CSS 边框与背景[上]

    学习要点: 1.声明边框 2.边框样式 3.圆角边框 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 边框和背景,通过边框和背景的样式设置,给元素增加更丰富的外观. 一．声明边框 边框的声明有 ...

随机推荐

  1. Java 13 - Java 数组

    Java 数组 数组对于每一门编程语言来说都是重要的数据结构之一,当然不同语言对数组的实现及处理也不尽相同. Java语言中提供的数组是用来存储固定大小的同类型元素. 你可以声明一个数组变量,如num ...

  2. requests模块报错：Use body.encode('utf-8') if you want to send it encoded in UTF-8.

    在做 企业向微信用户个人付款  功能时,调用第三方sdk,在 进行 requests 的post请求时, 代码如下 req = requests.post(url, data=data,cert(ap ...

  3. Centos7 开放80,3306端口解决办法

    所有扯iptables的文章都是扯淡!!! centos 7 默认防火墙由firewalld来管理!关iptables屁事! 以开放80端口为例,执行以下命令: 开放80端口:firewall-cmd ...

  4. Python的字典类型

    Python的字典类型为dict,用{}来表示,字典存放键值对数据,每个键值对用:号分隔,每个键值对之间用,号分隔,其基本格式如下: d = {key1 : value1, key2 : value2 ...

  5. rem 布局的闪现问题

    <script type="text/javascript"> var sizeRate = document.documentElement.clientWidth/ ...

  6. Eclispe让SVN插件显示英文

    eclipse\configuration\config.ini 文件添加以下内容: # Set Subversion English Version osgi.nl=en_US

  7. python中的type

    我们常用type()来查看类型,使用方法如下: 1 a = "zzzq" 2 b = 1 3 c = (1, "zzq123") 4 d = [2, " ...

  8. MySQL5.7.20 二进制包无ROOT权限下安装， 滴滴云服务器

    01, 下载安装包 =>  https://dev.mysql.com/downloads/mysql/ 02, 上传到linux系统, 笔者这里使用的 滴滴云服务器 安装在 home/dc2- ...

  9. ASP.NET前台代码绑定后台变量方法总结

    经常会碰到在前台代码中要使用(或绑定)后台代码中变量值的问题.一般有<%= str%>和<%# str %>两种方式,这里简单总结一下.如有错误或异议之处,敬请各位指教. 一方 ...

  10. MVC基于角色权限控制--菜单展示

    在用户成功登陆后台页面后,我们需要将当前用户拥有的权限通过菜单的形式展现出来,将未具备的权限隐藏 新建一个HomeController,用于展示后台首页和获取用户权限数据 namespace CZBK ...