首页专题 border

border

很多同学在进行编程学习时缺乏系统学习的资料。本页面基于border内容，从基础理论到综合实战，通过实用的知识类文章，标准的编程教程，丰富的视频课程，为您在border相关知识领域提供全面立体的资料补充。同时还包含 backbone、background、background attachment 的知识内容，欢迎查阅！

border相关知识

CSS3 Border-color
CSS3中有关于Border的属性一共有三个：圆角border-radius，图片边框border-image,边框多颜色border-color，其中圆角border-radius是常用的一个属性，而且现在很多网站制作圆角效果都使用border-radius来实现，具体的使用方法可以查阅本站有关于border-radius的介绍。今天我们主要来学习border-color的使用。border-color这个属性我想大家一定不会陌生，因为我们平时常能看到并使用这个属性。那么在CSS3中这个属性又有什么不同之处呢？又将如何使用呢？今天我们就带着这两个问题开始我们CSS3中的border-color的学习。在CSS2中，我们可以把border-color同时应用到不同的边框上，也可以分别在各边上色，如：  border-color: <color>/*其中可以上一个值，也可以是多个值，具体我在这里不多说了，大家来时用到的也特别多*/   /*我们可以
Border box-sizing resize
box-sizing，这个属性可以定义元素盒子的解析方式，从而可以选择避免掉布局元素盒子增加内边距和边框的长度增减问题。//设置 border-box 让 border 和 padding 不在额外增加元素大小aside {width: 200px; height: 500px;background-color: purple; padding: 10px;border: 5px solid red; box-sizing: border-box; float: left;}box-sizing 是 CSS3 推出的，各个厂商在实现时设置了私有前缀。//完×××式-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box; box-sizing: border-box;resizeCSS3 提供了一个 resize 属性，来更改元素尺寸大小。一般普通元素，默认值是不允许的。但如果是表单类
CSS border-image属性
border-image属性很容易记，它允许你将图片或CSS渐变形状作为一个元素的边框。.module {border-image: url(border.png) 25 25 round;} 该属性能被应用于任何元素，但当表格元素（如` tr,th,td `）的border-collapse属性值为collapse时border-image属性无效。属性对于border-image而言，border-image-souce是唯一必需的。若无特殊指定，其他属性即为默认值。以下为border-image包含的属性：border-image-source.module {border-image-source: url(border.png);}该属性指明了边框图片的地址。属性值可以是URL，数据URI，CSS渐变形状，或者行内SVG（尽管支持度有限，详情见SVG usage notes一节）border-image-slice.module{border-image-source: url(border.pn
CSS3 Test: 新border,padding,margin,offset
新边框现在还是草案阶段，还未有相关浏览器规范，目前仅firefox 41以上的版本才支持。border-inline-start,border-inline-end,border-block-start,border-block-end兼容性不说了，目前仅firefox 41以上的版本才支持。新边框跟已有的border一样，具备width,style,color三个参数。不一样的是，它取决于写入模式，方向和文本方向定义的值。看名字也能想到，inline文本行，block文本块。每行文字有顺序，上下左右。文本块亦如此。意思就是，border-inline-XX(start/end)是沿着文本行的方向，border-block-XX(start/end)是沿着文本块的方向。常规默认：文本行：left -> right；文本块：top -> bottom。如下图：border-inline.png示例代码，点此查看，效果图如下：效果图.pngpadding-inline-start,padding-i