文档章节

CSS3的边框(三)

博为峰教研组
 博为峰教研组
发布于 2017/03/23 10:46
字数 198
阅读 11
收藏 0

border-image有以下几个重要的属性需要了解一下:

round 会自动调整尺寸,完整显示边框图片

repeat 单纯平铺多余部分,会被“裁切”而不显示。

<!DOCTYPE html>

<html>

<head>

<style>

div

{

border:15px solid transparent;

width:300px;

padding:10px 20px;

}

 

#round

{

-moz-border-image:url(/i/border.png) 30 30 round; /* Old Firefox */

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

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

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

}

 

#stretch

{

-moz-border-image:url(/i/border.png) 30 30 stretch; /* Old Firefox */

-webkit-border-image:url(/i/border.png) 30 30 stretch; /* Safari and Chrome */

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

border-image:url(/i/border.png) 30 30 stretch;

}

</style>

</head>

<body>

 

<div id="round">在这里,图片铺满整个边框。</div>

<br>

<div id="stretch">在这里,图片被拉伸以填充该区域。</div>

 

<p>这是我们使用的图片:</p>

<img src="/i/border.png">

 

</body>

</html>

运行结果:

© 著作权归作者所有

博为峰教研组
粉丝 50
博文 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
15
0

没有更多内容

加载失败,请刷新页面

加载更多

Mybatis Plus删除

/** @author beth @data 2019-10-17 00:30 */ @RunWith(SpringRunner.class) @SpringBootTest public class DeleteTest { @Autowired private UserInfoMapper userInfoMapper; /** 根据id删除......

一个yuanbeth
今天
4
0
总结

一、设计模式 简单工厂:一个简单而且比较杂的工厂,可以创建任何对象给你 复杂工厂:先创建一种基础类型的工厂接口,然后各自集成实现这个接口,但是每个工厂都是这个基础类的扩展分类,spr...

BobwithB
今天
4
0
java内存模型

前言 Java作为一种面向对象的,跨平台语言,其对象、内存等一直是比较难的知识点。而且很多概念的名称看起来又那么相似,很多人会傻傻分不清楚。比如本文我们要讨论的JVM内存结构、Java内存模...

ls_cherish
今天
4
0
友元函数强制转换

友元函数强制转换 p522

天王盖地虎626
昨天
5
0
js中实现页面跳转(返回前一页、后一页)

本文转载于:专业的前端网站➸js中实现页面跳转(返回前一页、后一页) 一:JS 重载页面,本地刷新,返回上一页 复制代码代码如下: <a href="javascript:history.go(-1)">返回上一页</a> <a h...

前端老手
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部