-
border透明边框足够兼容 bakground-position定位 三角圆形 优雅增加响应区域的大小 不使用图片，实现单复选框区域大小 .checbox{ width:16px; height:16px; border:1px solid #f00; } 边框使用盒阴影，原先border变透明用来增加点击区域 box-shaw:inset 0 1px,inset 1px 0,inset-2px 0,inset 0 -1px; 增加可视渲染区域： drow-shaw可以给PNG图标赋色 在谷歌浏览器下，页面中不可见元素的drop-shadow也是不可见的 text-indent负值隐藏原始图，无投影，失败！ clip裁剪隐藏，无投影，失败！ margin负值隐藏原始图，无投影，失败！ left负值隐藏原始图，无投影，失败! (可视区域元素外无投影) 透明border突破可视区域的限制查看全部
-
实现三角的原理：凹口变大，颜色变透明 实际使用场景，1、下拉菜单 2、两个三角叠加 模拟圆角（有四个小圆角、border梯形组合而成、）查看全部
-
background定位的局限 只能相对左上角数值定位，不能相对于右下角 background-position:50px 40px;（background-position默认相对于左上方定位的） 距离左边缘一直50px一直很简单，但是距离右边边缘 借助border定位（background-position定位）查看全部
-
border-color默认颜色就是color .box{ border:10px solid; color:#00f;} 当没有指定border-color的时候，会使用color作为边框色！ box-shadow盒阴影 hover: 选择器用于选择鼠标指针浮动在上面的元素 只要一个color hover变化，就可以一起变色！且transition过渡也只要一个color属性查看全部
-
border-style:solid;实线 border-style:dotted;点线（实线圆角效果） border-style:double;双线 border-style:inset;内凹，大眼瞪小眼 border-style:outset;外凸 border-style:groove;沟槽查看全部
-
border-width不支持百分比值：语义和使用场景决定，边框不会因设备大小而变化 类似：outline,box-shadow,text-shadow,... border-width支持关键字thin，medium,thick,默认medium：3px，用的最多是thin：1px，因为border-style:double至少3px才有效果查看全部
-
border宽度不可使用百分比，受此限制，无法用于百分比布局需要； boder-color属性可继承color，因此可用于一次性优化多个布局； border可以透明，transparent属性，可利用此属性生成三角或者梯形； border-style中的double及dotted可用于创建三条短线样式、圆。 border以及background配合使用，可以定位背景图片至右侧。（backgroud-positon默认相对左上角）查看全部
-
三角： { width:0px height:0px border:100px solid boder-color:red green transition transition(透明) }查看全部
-
border-right:50px solid transparent; background-position:100% 40px查看全部
-
background-position：50px 40px 默认左边距查看全部
-
transition查看全部
-
增加响应区域查看全部
-
border-color颜色未指定时，使用color的颜色查看全部
-
border-color 就是color查看全部
-
border-width不支持百分比查看全部
举报
0/150
提交
取消