CSS 边框图像
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 边框图像的更多相关文章
- 用CSS边框图像让你的网站更漂亮
不久之前,添加一些装饰性元素,例如给网页中的图片添加花哨的边,以及耐心调整CSS文件才能使你的网页看起来不错.然而现在CSS已经做出了改变,用复杂的边框装饰你的网站只需几行代码.这篇文章将告诉你如何做 ...
- 理解CSS边框border
前面的话 边框是CSS盒模型属性中默默无闻的一个普通属性,CSS3的到来,但得边框属性重新焕发了光彩.本文将详细介绍CSS边框 基础样式 边框是一条以空格分隔的集合样式,包括边框粗细(边框宽度 ...
- 第 17 章 CSS 边框与背景[下]
学习要点: 1.设置背景 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 边框和背景,通过边框和背景的样式设置,给元素增加更丰富的外观. 一.设置背景 盒模型的尺寸可以通过两种方式实现可见性, ...
- 第七十四节,css边框与背景
css边框与背景 学习要点: 1.声明边框 2.边框样式 3.圆角边框 本章主要探讨HTML5中CSS边框和背景,通过边框和背景的样式设置,给元素增加更丰富的外观. 声明边框 边框的声明有三个属性设 ...
- css边框小结
css边框 CSS对界面的分割如上图,他们的含义如下: contend:包含HTML元素中包含的文本,图像或其他媒体. padding:内容和边框之间的空格. 你可以想像这样的内在空间. ...
- 复习-css边框和背景属性
css边框和背景属性 border:所有边框属性 border-width:四条边框的宽度 border-style:设置边框样式,主要有dotted.solid.double border-colo ...
- HTML CSS边框阴影的实现
一款用CSS控制背景图像平铺,从而实现区域边框阴影的效果,虽然用到了图片,但可贵之处是本代码不管你需要阴影的区域是多大,它都能自动适应,因些还是很值得收藏一下的,兼容所有的IE浏览器. <!DO ...
- html5--6-40 CSS边框
html5--6-40 CSS边框 实例 div动态阴影 学习要点 掌握CSS边框属性的使用 元素的边框就是围绕元素内容和内边距的一条或多条线. 元素的边框属性: border 简写属性,用于把针对四 ...
- 第 17 章 CSS 边框与背景[上]
学习要点: 1.声明边框 2.边框样式 3.圆角边框 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 边框和背景,通过边框和背景的样式设置,给元素增加更丰富的外观. 一.声明边框 边框的声明有 ...
随机推荐
- Java平台编写运行Ruby和Python
Java不仅是一门编程语言,还是一个平台,通过JRuby和Jython,我们可以在Java平台上编写和运行Ruby和Python程序.
- Certbot免费https证书
安装https 获取certbot客户端 wget https://dl.eff.org/certbot-auto chmod a+x certbot-auto 停止nginxyunx service ...
- 将控制台信息重新导向到JTextArea
package com.function; import java.io.FileOutputStream; import java.io.IOException; import java.io.Ou ...
- 可变,不可变与 id 的关系
变量名不能使用关键字: 查看关键字 import keyword keyword.kwlist 可变与不可变: 列表添加元素后,id并不会改变.说明列表可变 元祖添加元素后,id会改变,就不是同一对 ...
- MIME Type和Content-Type
告知浏览器:资源的媒体类型MIME Type: application/json HTTP协议中的媒体类型,由 Web服务器告知浏览器的,更准确地说,是通过响应头中的Content-Type表示.Co ...
- Mybatis十( mybatis其他使用)
1.批量执行 public void addUser(User user); <insert id="addUser" parameterType="model.U ...
- spark 数据读取与保存
spark支持的常见文件格式如下: 文本,json,CSV,SequenceFiles,Protocol buffers,对象文件 1.文本 只需要使用文件路径作为参数调用SparkContext 中 ...
- Flex验证器 validate stringvalidate
1 validate <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns: ...
- jsp grid can not be used in this ('quirks') mode
设置: <!--设置IE文档模式 --> <meta http-equiv="X-UA-Compatible" content="IE=9" ...
- C# 中的 ConfigurationManager类引用方法
c#添加了Configuration;后,竟然找不到 ConfigurationManager 这个类,后来才发现:虽然引用了using System.Configuration;这个包,但是还是不行 ...