CSS深入理解之border

2018-01-30 10:46:05来源:网络收集作者:管理员人点击

分享
第七城市th7cn

慕课学习-->前端开发-->HTML/CSS-->CSS深入理解之border


border
一、border-width不支持百分比

类似的还有outline,box-shadow,text-shadow,......都不支持百分比值。


属性border-width支持关键字:thin(细的),medium(默认值,中等的),thick(粗的)


在CSS2.1之后,IE8+浏览器:thin(1px),medium(3px),thick(5px)


为什么border-width默认值是medium(3px)呢?


因为border-style:double至少3px才有效果。


二、了解各种border-style类型

1、border-style属性值:


(1)border-style:solid;实线


(2)border-style:dashed;虚线


CSS深入理解之border


(3)border-style:dotted; 点线


CSS深入理解之border


在IE7,IE8下,利用dotted圆点CSS实现圆角效果。





absolute的破坏性

(4)border-style:double; 双线边框。双线宽度相等,中间间隔与线宽±1.兼容性好


举例:


 CSS深入理解之border






(5)border-style:inset; 内凹。


border-style:outset; 外凹。


border-style:groove; 沟槽。


border-style:ridge; 山脊。


这四种兼容性差。


CSS深入理解之border


三、Border-color与color

Border-color的默认颜色就是color。


没有指定border-color时,会使用color作为边框色。类似的还有box-shadow,text-shadow等,也是默认使用color作为颜色。


四、Border与background定位

1、background定位的局限


CSS2.1里,background定位只能相对于左上角数值定位,不能相对于右下角


利用border实现距离容器右侧50px:


CSS深入理解之border


五、Border与三角等图形的构建

利用border-style:solid
构建三角形和梯形。


1、构建三角形


CSS深入理解之border







2、构建梯形


CSS深入理解之border





构造梯形
六、border与透明边框

1、background定位的局限,三角形实现


2、增加响应区域大小


.checkbox{
border:1px solid #999;
width:16px;height:16px;
}

复选框视觉区域大小(不含边框)是16px*16px


.checkbox{
border:2px solid transparent;
box-shadow:inset 0 1px,inset 1px 0,inset -1px 0,inset 0 -1px;
background-color:#fff;
background-clip:content-box;
color:#d0d0d5;
}

边框使用盒阴影,border变透明用来增加点击区域,现在复选框点击区域大小是20px*20px。


3、增加可视渲染区域





增加可视渲染区域

CSS3中drop-shadow可以给png图标赋色


但是在Chrome浏览器下,页面中不可见元素的drop-shadow也是不可见的!例如:


(1)text-indent负值隐藏原始图,无投影;


(2)Clip剪裁隐藏,无投影;


(3)Margin负值隐藏原始图,无投影;


(4)Left负值隐藏原始图,无投影。


使用透明边框解决问题。


七、border在布局中的应用

border与等高布局(不支持百分比宽度,因为border不支持百分比)





模块1
模块1
模块1
模块1



第七城市th7cn

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台