深入理解之border属性（第一期）

一、border-width属性

border-width属性不支持百分比值,不会因为设备的尺寸变化而变大（类：outline,box-shadow,text-shadow）
border-width支持关键字，thin(1px 细),medium(3px 默认),thick(5px 粗)

二、border-style属性

border-style:solid; 经常使用的实线。

.Border{border：1px solid #dddddd;
}

border-style:dashed;虚线
注：IE中的虚线边框会比较密
border- style:dotted; 点线
注：IE中的点线是小圆形，Chrome/FireFox是小正方形的
border-style:double;双线
注：双线宽度永远相等，中间间隔±1(兼容性很好)
border-style:inset;内凹
注：价值不高

三、border-color属性

border-color的默认值是color。
类似默认的还有box-shadow,text-shadow。

四、border与background定位

background定位只能对于左上角
要使定位看上去是对于右边的，可以这样

{border-right:50px solid transparent;background-position:100% 顶部距离px;
}

这样的原理是用透明的右边边框来代替右边距的距离定位。

五、border与三角图形的构建

三横图标的构建

2. 三角图标的构建

{border-width:20px,20px;border-style:solid;border-color:red transparent transparent transparent;
}

原理如下,所有当没有内容时就会呈现三角形的形状。

溜了溜了

后排提示
之前在慕课看到了这个系列的教程，来自于张鑫旭老师，有兴趣的朋友可以搜索看看，本人在此做一个学习记录。
如果没有描述清楚，可以去慕课查看此课题（免费的哦，因为有钱我都看不起）

深入理解之border属性（第一期）相关推荐

图解CSS的padding,margin,border属性
图解CSS的padding,margin,border属性(详细介绍及举例说明) 图解CSS的padding,margin,border属性 W3C 组织建议把所有网页上的对像都放在一个盒(box)中 ...
CSS中的margin、border、padding区别 CSS padding margin border属性详解
图解CSS padding.margin.border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层 ...
wxPython官方文档翻译第一期初稿
wxPyWiki的目的是为了提供软件文档.示例.使用方法等.是为了帮助人们学习.理解和使用wxPython. 注解:想了解更多关于wxPython的内容,可以点击这里. 这里有多种类型的可用信息.当前 ...
UE4课堂笔记——《UE4C++游戏开发入门教程！》第一期开场，C++必须了解小知识
<UE4C++游戏开发入门教程!>第一期 UE4C++游戏开发入门教程!(第一期) 学习ue4 c++可以更好理解ue4,但需要已经了解或掌握至少以下两点: 已有编程经验了解蓝图所以可 ...
【校招VIP】“推电影”第一期电影详情模块Java开发文档作业评审1
前言:关于[推电影]免费在线实习项目一.本项目是基于年轻人的喜好,更个性的电影推荐网站.筛选各分类的知名电影,并给出推荐理由和下载链接.另外,通过标签功能匹配个人喜好,实现个性化推送. 二.项目表现 ...
Unity程序化地形教程第一期噪波图的制作
Unity程序化地形教程第一期前言:最近在准备作品集,想吧Blender里面利用shader实现的程序化地形导入Unity中,发现我弄不了,于是转向了直接在Unity中实现程序化地形的新途径,但是 ...
巧用CSS的Border属性
. 作者:冯永曜来源:黄山村夫制作过网页的人都有为画线而烦恼的经历,本文介绍的小技巧也许对你有所帮助.我们先来认识一下"Border"(画边框),它是CSS的一个属性,用它可以 ...
【活动报名 | 青源Talk第一期】喻纯 | 自然人机交互的进展与挑战
活动简介青源会是智源研究院发起的学术组织,为从事人工智能及相关学科研究的青年科学家,建立宽松.活跃的直接交流渠道,促进学科交叉与青年科学家之间的合作,提出具有引领作用的原创思想,开创新的科学前沿. ...
VIP群第一期讲座实屏片段摘录
应许多读者网友的要求,在一个月前我专门为购买了全套<网管员必读>第二版系列丛书的读者创建了VIP读者群.既然是VIP读者,当然就应该在服务级别上与一般读者有所区别,所以在保证VIP群中读者 ...

深入理解之border属性（第一期）

一、border-width属性

二、border-style属性

三、border-color属性

四、border与background定位

五、border与三角图形的构建

深入理解之border属性（第一期）相关推荐

最新文章

热门文章