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中的各个属性来控制背景( ...
随机推荐
- SQL Server - 文件组，文件，备份，分区
FileGroup:文件组,为逻辑划分:Files:文件,为实际文件,需要指定文件属于哪个文件组. 使用多个文件的有点:可以将磁盘I/O压力分散,提供按文件和文件组(按文件和文件组进行备份需要设置数据 ...
- WPF Datagrid横向排列
<DataGrid.ItemsPanel> <ItemsPanelTemplate> <StackPanel Orientation="Horizontal&q ...
- [C语言] 数据结构-离散存储链表定义
离散存储[链表] 1.定义: n个节点离散分配,彼此通过指针相连 每个节点只有一个前驱节点 只有一个后续节点 首节点没有前驱节点,尾节点没有后续节点 2.专业术语: 首节点:第一个有效节点 尾节点:最 ...
- git 查看和撤销
linux下文本的新建和追加内容 git cat-file -p ID可查看当前master的数据 观察Git 內部如何储存Commit 随便便抓一個 Commit 的 SHA1 开始: git ca ...
- 如何优雅的爬取 gzip 格式的页面并保存在本地（java实现）
1. 引言 在爬取汽车销量数据时需要爬取 html 保存在本地后再做分析,由于一些页面的 gzip 编码格式, 获取后要先解压缩,否则看到的是一片乱码.在网络上仔细搜索了下,终于在这里找到了一个优雅的 ...
- Docker（一）：入门教程
2013年发布至今, Docker 一直广受瞩目,被认为可能会改变软件行业. 但是,许多人并不清楚 Docker 到底是什么,要解决什么问题,好处又在哪里?本文就来详细解释,帮助大家理解它,还带有简单 ...
- AJAX-XMLHttpRequest和本地文件
网页中可以使用相对URL的能力通常意味着我们能使用本地文件系统来开发和测试HTML,并避免对Web服务器进行不必要的部署. 然而当使用XMLHttpRequest进行Ajax编程时,这通常是不行的. ...
- 安卓脱壳&&协议分析&&burp辅助分析插件编写
前言 本文由 本人 首发于 先知安全技术社区: https://xianzhi.aliyun.com/forum/user/5274 前言 本文以一个 app 为例,演示对 app脱壳,然后分析其 协 ...
- Android自带语音播报+讯飞语音播报封装(直接用)
一.Android自带的语音播报 1.查看是否支持中文,在测试的设备中打开‘设置’ -->找到 '语言和输入法'-->查看语音选项,是否支持中文,默认仅支持英文. 使用如下: public ...
- 结对编程的感想&收获
关于结对编程的感想.感受,见我的另一篇随笔——<构建之法>结对编程 感想 下面我来谈谈本次结对编程的收获以及发现的问题 收获 ①这是我人生中第一次做UI界面设计,刚拿到这个题目还是比较 ...