美文网首页
深入理解border

深入理解border

作者: c05436bafae5 | 来源:发表于2017-03-01 00:16 被阅读0次

根据慕课网教程,整理相关知识如下:

一、border-width
border-width不支持百分比,类似的还有outline、box-shadow、text-shadow等。
border-width支持关键字:thin、medium(默认值)、thick。

二、border-style
none:定义无边框;
hidden:与 "none" 相同。不过应用于表时除外,对于表,hidden 用于解决边框冲突;
dotted:定义点状边框。在大多数浏览器中呈现为实线;
dashed:定义虚线。在大多数浏览器中呈现为实线;
solid:定义实线;
double:定义双线,双线的宽度等于 border-width 的值;
groove:定义 3D 凹槽边框,其效果取决于 border-color 的值;
ridge:定义 3D 垄状边框,其效果取决于 border-color 的值;
inset :定义 3D inset 边框(内凹),其效果取决于 border-color 的值;
outset:定义 3D outset 边框(外凸),其效果取决于 border-color 的值。
inherit 规定应该从父元素继承边框样式。

三、border-color
当没有指定border-color时,边框颜色被设置为当前元素color属性.

四、border与三角图形的构建

五、border与透明边框


六、border在布局中的应用
利用border实现等高布局(局限:不支持百分比宽度)

相关文章

  • 深入理解border

    根据慕课网教程,整理相关知识如下: 一、border-widthborder-width不支持百分比,类似的还有o...

  • CSS 深入理解 border

    第一节:border-width的特性 border-width 不支持百分比 原因:border 的语义决定,所...

  • 深入理解border属性

    border不支持百分比值 1 .css属性是为了显示图文。2 .边框设计的初衷可能是为了白底的图片和外面区分,所...

  • css border的深入理解

    border不支持百分比布局 border-style: dashed虚线 solid实现 dotted点 dou...

  • CSS border深入理解及应用

    Border 几种常见的边框用法。以下介绍均为个人见解,如有不对的地方,请多多指教,非常感谢。 目录 透明边框的实...

  • css border相关深入

    css border相关深入 通过border样式画出各种形状 html 通过边框阴影box-shadow 不同阴...

  • 深入border-radius

    在掘金上看到一个话题,如何用border-radius画一个半圆,初看到这个题目觉得应该很简单,于是开始动手写,结...

  • CSS理解之border

    border: 1px solid red;(border-width、border-style、border-c...

  • IE低版本带链接的图片出现边框

    方案一:border:0;把border设为“0”像素虽然在页面上看不见,但按border默认值理解,浏览器依然对...

  • border-radius的理解

    一、border-radius: 30px; border-radius: 30px; // 边框的上右下左,都是...

网友评论

      本文标题:深入理解border

      本文链接:https://www.haomeiwen.com/subject/hvbfgttx.html