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中的各个属性来控制背景( ...
随机推荐
- docker 简单安装java web项目
前言: Docker 是一个开源的应用容器引擎,基于 Go 语言 并遵从Apache2.0协议开源. Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级.可移植的容器中,然后发布到任何流行 ...
- Python__组合数据类型
组合数据:集合类型.序列类型(元组类型.列表类型).字典类型 集合: 定义:集合是多个元素的无序组合.(无序,唯一,Python中要求放入集合中的数据类型是不可变的). 集合用大括号 {}表示,元素间 ...
- MVC 使用Quartz.Net组件实现定时计划任务
最近,项目中需要执行一个计划任务,组长就让我了解一下Quartz.net 这个组件,挺简单的一个组件,实现起来特别的方便,灵活,值得推荐给大家一起学习一下这个小工具.以前我有的时候是使用定时器Time ...
- node.js（http协议）
七层网络协议 应用层:浏览器(http,FTP,DNS,SMTP,TeInet)(邓哥)表示层:加密,格式转换(怕别人偷看,加密摩斯电码)会话层:解除或者建立和其他节点的联系(邓哥在想追这个女孩,不再 ...
- css实现div不定宽高垂直水平居中解决方案
在项目中我们经常能碰见然图片垂直水平居中,不定宽高的div垂直水平居中,等等~~ 现在我将介绍我所知道的几种用css来解决的几种方案. 1.父元素text-align:center;display:t ...
- Spring Boot—19Session
pom.xm <dependency> <groupId>org.springframework.boot</groupId> <artifactId> ...
- 大数据量报表APPLET打印分页传输方案
1 . 问题概述 当报表运算完成时,客户端经常需要调用润乾自带的runqianReport4Applet.jar来完成打印操作, 然而数据量比较大的时候,会导致无法加载完成,直至applet内存 ...
- Oracle存储过程简单实例
转自 http://www.cnblogs.com/nicholas_f/articles/1526029.html /*不带任何参数存储过程(输出系统日期)*/create or replace p ...
- Python Socket实现简单web服务器
#!/usr/bin/python env # coding:utf-8 import socket ip_port = ('127.0.0.1', 80) back_log = 10 buffer_ ...
- STL中set和map
set 可以认为是数学上的集合,集合中的元素不允许有重复.set特有的操作是高效的插入.删除和执行基本查找. set的插入方法是 insert,由于集合元素的唯一性,insert操作不一定会成功,in ...