深入理解border属性
1 .css属性是为了显示图文。
2 .边框设计的初衷可能是为了白底的图片和外面区分，所以加一个1px的边框就能看清
3 .边框一般不需要跟随设备变大而变大。
4 .所以其他属性outline,box-shadow,text-shadow也是这来原因而决定的.
1 .1px
2 .thin:1px
3 .medium:3px，默认值。主要是因为border-style:double。至少需要3px才生效
4 .thick:4px
1 .none:所以单纯设置border-width,border-color没有边框显示的原因. 1.5px solid #000 .默认样式是这样
2 .solid:实线
3 .dashed:虚线 :颜色区和透明区的比例所占的不一样，chrome是2:1，IE,火狐是3:1
4 .dotted:圆点边框
5 .double:双线板框。线框的表现还和宽度有关系，宽度不同最后的表现也不一样
6 .其他：inset（内凹）,out（外凹），沟槽（groove），ridge(山脊)
1 .border-color默认颜色是color色值，如果没有指定边框颜色，就会使用color的颜色,outline,,box-shadow,text-shadow也是这样
1 .右下方background定位技巧.background定位的一个局限是只能根据左上角定位，而不能相对右下角.一个宽度不固定的元素，我们需要在距离右边缘50像素的位置设置一个背景图片
2 .增加点击区域大小：通过使用透明边框可以增加点击区域的大小
border:50px solid transparent;
3 .三角形绘制
1 .背景图片相对于background-image属性的位置
2 .border-box
3 .content-box
4 .padding-box
1 .center:居中图片
2 .top.left
1 .上面构造出来的全等三角形，其实是由两个直角三角形拼接成的。
2 .所以如果设置某一条边的宽度是0，就可以只显示左边的，实现一个直角三角形
【css】边框border的属性和使用方法
顾名思义，就是元素外面的一圈边框，下图中虚线圈起的部分是内容，外面橙色的一圈是它的边框，可以理解成在照片外面加一个相框，使用border属性。 边框样式border-style必须写！否则其它属性全部失效。 边框的样式： border后面可跟多个值，中间用空格分离，含义如下： 注意顺序， 边框样式不可省略 ，颜色和宽度可以省略，会显示默认的效果。 ——以上规律在padding和margin一样适用。 边框样式border-style必须设置 如果我们的四条边框属性都是一样的，那么统一设置就可以啦，注意边框类型不可省略。 首先我们放置一个宽高为200px的粉色盒子。 接下来我们为它加上一条宽度为10px，样式为实线，颜色为红色的边框。 我们可以看到，添加边框的时候，是在盒子外面套一圈边框，而不是加在里面，在Chrome浏览器中点击右键检查，可以看到div的大小变成了220x220。 套在外面的边框的宽度是会加进盒子尺寸的（上下左右各增加了10px），如果我们想盒子保持大小不变，要对div本身的width和height进行减小，在这个样例中，通过计算可得，减少到180px即可保持大小不变。 当我们使用点状、虚线等边框样式时，多出来的缝隙，会使用元素本身的 背景颜色 填充。 点和虚线的具体样式，不同浏览器中可能会不一样。 我们为刚刚的盒子设置上边框为红色，左边框为绿色，效果如下图所示： 我们会发现在两条边框交界处的小方块，通过一条对角线分隔，上边框和左边框各占一半。当边框不一样宽时，同样也是用对角线把交界处的小长方形一分为二，如下图所示： 当被添加边框的元素宽度为0，不设置高度（高度默认是0）的情况下，我们可以巧妙利用 边框组合 和 transparent（透明） 绘制三角形，可以体验下哦。 三角形1-css： 三角形2-css： 多彩三角形-css： 绘制梯形只要对应添加宽度或者高度就可以啦 梯形1-css： 梯形2-css：
在CSS里，border的作用是什么？
border
语法：
border : border-width || border-style || border-color
取值：
该属性是复合属性。请参阅各参数对应的属性。
默认值为： medium none 。 border-color 的默认值将采用文本颜色。
说明：
设置对象的边框样式。
当你指定了边框颜色( border-color )和边框宽度( border-width )时，你必须同时指定边框样式( border-style )，否则边框不会被呈现。
如使用该复合属性定义其单个参数，则其他参数的默认值将无条件覆盖各自对应的单个属性设置。
例如：设置 border : thin 等于设置 border : thin none ，而 border-color 的默认值将采用文本颜色。因此此前的任何 border-color 和 border-width 设置都会被清除。
在 IE5.5+ 中，边框属性可以直接应用于内联要素。而在此前的版本中，内联要素要使用该属性，必须先设定对象的 height 或 width 属性，或者设定 position 属性为 absolute ，或者设定 display 属性为 block 。对应的脚本特性为 border 。
示例：
p { border: 1px double yellow; }
blockquote { border: dotted gray; }
p { border: 25px; }
css border=1什么意思?
HTML语句中“border=1”是边框为1像素的意思。border 是 CSS 的一个属性，用 border 可以给能确定范围的 HTML 标记（如 TD、DIV 等等）画边框，它可以定义边框线的类型、宽度和颜色，利用这个特性，可以制作一些特殊效果。一、border-width:thin medium thick 10px;上边框是细边框，右边框是中等边框，下边框是粗边框，左边框是 10px 宽的边框。二、border-width:thin medium thick;上边框是 10px，右边框和左边框是中等边框，下边框是粗边框。三、border-width:thin medium;上边框和下边框是细边框，右边框和左边框是中等边框。四、border-width:thin;所有 4 个边框都是细边框。扩展资料：边框其他样式：none定义无边框。solid定义实线。dotted定义点状边框。在大多数浏览器中呈现为实线。dashed定义虚线。在大多数浏览器中呈现为实线。double定义双线。双线的宽度等于 border-width 的值。groove定义 3D 凹槽边框。其效果取决于 border-color 的值。ridge定义 3D 垄状边框。其效果取决于 border-color 的值。inset定义 3D inset 边框。其效果取决于 border-color 的值。outset定义 3D outset 边框。其效果取决于 border-color 的值。inherit规定应该从父元素继承边框样式。参考资料：百度百科-border
