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中的各个属性来控制背景( ...
随机推荐
- ASPxComboBox 自带输入法确定之后再搜索解决方法
<dx:ASPxComboBox ID="comChargeSubject_FixedFee" ClientInstanceName="comChargeSubje ...
- eclipse查看源码
通常eclipse中按住ctrl+左键单击,可以查看源码,很方便学习使用 如果看不到源码,需要简单的设置 设置源码 window—preference--Java—Installed JREs –jr ...
- 深入理解java虚拟机---4虚拟机类加载机制
本文来源于翁舒航的博客,点击即可跳转原文观看!!!(被转载或者拷贝走的内容可能缺失图片.视频等原文的内容) 若网站将链接屏蔽,可直接拷贝原文链接到地址栏跳转观看,原文链接:https://www.cn ...
- CSS starts
I have not written any articles here since I graduated from my university. Now I begin to write down ...
- JDBC进行事务管理
JDBC进行事务管理 事务的四个特征:原子性 : 是指事务中包含的操作都被看做是一个逻辑单元一致性: 开始前和结束后数据库都处于一致性状态隔离性: 对数据库修改的多个事务是彼此隔离的持久性 事务完成之 ...
- 【java基础】从反射开始（Reflection）
Java学习笔记 https://github.com/SnailDev/java-learning 和我一起启程... 反射(Reflection) 定义 在运行状态中, 对于任意的一个类,都能够知 ...
- db2存储过程迁移
一.导出存储过程 EXPORT TO D:/PROCUDURE/procudure.del OF del MODIFIED BY LOBSINFILE SELECT 'SET CURRENT SCHE ...
- Python手写模拟单向链表对象，栈对象和树
单向链表: class error(Exception): def __init__(self,msg): super(error,self).__init__() self.msg=msg def ...
- gulp入门实践
前言:大家可能都听说过gulp,知道它是一种前端自动化开发工具,可以用来文件压缩.语法检查.文件合并和编译less等,但可能并不知道要怎么用?看过官方文档,也看过许多博客,但基本都是讲gulp的API ...
- hibernate、java、数据库对应类型
引自 https://my.oschina.net/heau/blog/498874 java.数据库对应类型 类型名称 显示长度 数据库类型 JAVA类型 JDBC类型索引(int) 描述 ...