CSS3的新增边框属性
|
属性
|
版本
|
简介
|
|
border-image
|
CSS3
|
设置或检索对象的边框使用图像来填充
|
|
border-image-source
|
CSS3
|
设置或检索对象的边框是否用图像定义样式或图像来源路径
|
|
border-image-slice
|
CSS3
|
设置或检索对象的边框背景图的分割方式
|
|
border-image-width
|
CSS3
|
设置或检索对象的边框厚度
|
|
border-image-outset
|
CSS3
|
设置或检索对象的边框背景图的扩展
|
|
border-image-repeat
|
CSS3
|
设置或检索对象的边框图像的平铺方式
|
|
border-radius
|
CSS3
|
设置或检索对象使用圆角边框
|
|
border-top-left-radius
|
CSS3
|
设置或检索对象左上角圆角边框
|
|
border-top-right-radius
|
CSS3
|
设置或检索对象右上角圆角边框
|
|
border-bottom-right-radius
|
CSS3
|
设置或检索对象右下角圆角边框
|
|
border-bottom-left-radius
|
CSS3
|
设置或检索对象左下角圆角边框
|
|
box-shadow
|
CSS3
|
设置或检索对象阴影
|
|
box-reflect
|
CSS3
|
设置或检索对象的倒影
|
<style>
div{
width:300px;
height:300px;
background:url(./shuaige.jpg) no-repeat center ;
border-image-source:none;
}
</style>
</head>
<body>
<div></div>
</body>
2、
<style>
div{
width:300px;
height:300px;
background:url(./shuaige.jpg) center no-repeat ;
border-image-source:url(./border.png);/*边框图片属性*/
border-image-width:27px;/*边框图片宽度属性*/
border-image-slice:27;/*边框图片切割属性*/
border-image-outset:0px;/*边框图片扩展属性*/
border-image-repeat:stretch;/*边框图片重复属性*/
}
</style>
</head>
<body>
<div>
</div>
</body>
<style>
div{
width:300px;
height:300px;
background:url(shuaige.jpg) no-repeat center;
border-image-source:url(border.png);
border-image-width:27px;
border-image-slice:27;
border-image-outset:0px;
border-image-repeat:repeat;/*设定重复方式为重复*/
}
</style>
</head>
<body>
<div>
</div>
</body>
4、
<style>
div{
width:300px;
height:300px;
background:url(shuaige.jpg) no-repeat center;
border-image-source:url(border.png);
border-image-width:27px;
border-image-slice:27;
border-image-outset:0px;
border-image-repeat:round;/*设定重复方式为round 会看情况进行缩放或缩小*/
}
</style>
</head>
<body>
<div>
</div>
</body>
5、
<style>
div{
width:300px;
height:300px;
background:url(./shuaige.jpg) center no-repeat ;
border-image-source:url(./border.png);/*边框图片属性*/
border-image-width:27px;/*边框图片宽度属性*/
border-image-slice:27 fill;
/*设定边框图片背景填充内容部分,会显示第5块切割的内容*/
border-image-outset:0px;/*边框图片扩展属性*/
border-image-repeat:stretch;/*边框图片重复属性*/
}
</style>
</head>
<body>
<div>
</div>
</body>
6、
<style>
div{
width:300px;
height:300px;
background:url(./shuaige.jpg) center no-repeat ;
border-image-source:url(./border.png);
border-image-width:27px;
border-image-slice:54;/*切割为宽度的2倍 会自动缩放*/
border-image-outset:0px;
border-image-repeat:stretch;
}
</style>
</head>
<body>
<div>
</div>
</body>
7、
<style>
div{
width:300px;
height:300px;
background:url(./shuaige.jpg) center no-repeat ;
border-image-source:url(./border.png);
border-image-width:27px;
border-image-slice:81;/*切割为宽度的3倍*/
border-image-outset:0px;
border-image-repeat:stretch;
}
</style>
</head>
<body>
<div>
</div>
</body>
8、
<style>
div{
width:300px;
height:300px;
background:url(./shuaige.jpg) center no-repeat ;
border-image-source:url(./border.png);
border-image-width:27px;
border-image-slice:27;
border-image-outset:154px;/*向外扩展的大小*/
border-image-repeat:repeat;
}
</style>
</head>
<body>
<div>
</div>
</body>
CSS3的新增边框属性的更多相关文章
- css3新增的属性有哪些
徐先森讲web CSS3新增的属性有哪些: CSS 用于控制网页的样式和布局. CSS3 是最新的 CSS 标准. CSS3新增了很多的属性,下面一起来分析一下新增的一些属性: 1.CSS3边框: b ...
- CSS3新增的属性有哪些：
CSS 用于控制网页的样式和布局. CSS3 是最新的 CSS 标准. CSS3新增了很多的属性,下面一起来分析一下新增的一些属性: 1.CSS3边框: border-radius:CSS3圆角边框. ...
- css3新增文本属性
css3新增属性 边框属性 背景属性 文本属性 颜色属性 文本属性 属性 说明 text-shadow 为文字添加阴影 box-shadow 在元素的框架上添加阴影效果 text-overflow 确 ...
- CSS3新增基础属性总结——20160409（易达客）
1.box-shadow :h-shadow v-shadow blur spread color inset(outset) h-shadow:必须:水平阴影位置,允许负值. v-shadow:必须 ...
- CSS3新增文本属性实现图片点击切换效果
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- css3新增的属性 - 分享
CSS3新增属性 一.transform变换效果 CSS3 提供了元素变形效果,也叫做变换.它可以将元素实现旋转.缩放和平移的功能. 属性有两个:transform 和 transform-ori ...
- css3新增边框、阴影、边框、背景、文本、字体
css3和css有什么区别?简单来讲css3是css(层叠样式表)技术的升级版本,css3新特征有很多,例如圆角效果.图形化边界.块阴影与文字阴影.使用RGBA实现透明效果.渐变效果.使用@Font- ...
- css3设置边框属性
css设置边框属性:设置边框圆角 <!DOCTYPE html> <html> <head lang="en"> <meta charse ...
- CSS自学笔记（11）:CSS3背景和边框
CSS3 背景 在CSS3中新增了多个关于背景的属性,可以让我们对背景有了更多更好的操作,减少用第三方工具对背景图片进行修改美化. CSS3中主要是通过定义backgrounp中的各个属性来控制背景( ...
随机推荐
- vs2013 sn key
BWG7X-J98B3-W34RT-33B3R-JVYW9
- C#将Dll嵌入到EXE
感谢博主的方法: https://blog.csdn.net/lin381825673/article/details/39122257 我之前也看了网上的其他的方法试了都不行 第一种方法就是说用IL ...
- fzu 2155 盟国
Problem 2155 盟国 Accept: 39 Submit: 129Time Limit: 1000 mSec Memory Limit : 32768 KB Problem De ...
- tr，td高度不生效
功能:表格内容较长,但是页面高度有限,超出显示滚动条 阻碍:给tr或者td加高度都不生效,不显示滚动条 解决方案:td中加div,设置高度和内容溢出时的样式 <table border='1' ...
- cf444E. DZY Loves Planting(并查集)
题意 题目链接 Sol 神仙题啊Orzzzzzz 考场上的时候直接把树扔了对着式子想,想1h都没得到啥有用的结论. 然后cf正解居然是网络流??出给NOIP模拟赛T1???￥%--&((--% ...
- centos 快速安装wordpress
1.两种方式得到Wordpress 首先你可以去wordpress官方网站看下最新的wordpress的下载地址多少.比如wordpress 3.9.1的下载地址是: http://cn.wordpr ...
- 时间选择器（TimePicker）
时间选择器(TimePicker) 显示一个可供时间选择的界面 常用方法: setIs24HourView(true|false) 设置24小时格式,true为24小时格式 setCurrentHou ...
- fuzz实战之honggfuzz
Honggfuzz实战 前言 本文介绍 libfuzzer 和 afl 联合增强版 honggfuzz .同时介绍利用 honggfuzz 来 fuzz 网络应用服务. 介绍 honggfuzz 也是 ...
- maven 编译插件指定jdk版本的两种方式
第一种方式: <plugin> <artifactId>maven-compiler-plugin</artifactId> <configuration&g ...
- mvc5中重命名项目的名称后，出现"找到多个与名为“Home”的控制器匹配的类型"
1.已把项目中所有的Webapplication1改为了MvcMovie,但是运行后,还是报错: 找到多个与名为“Home”的控制器匹配的类型 2.已重新生成解决方安,还是不行. 解决方法:把bin文 ...