css中的border边框属性使用总结

程序员文章站 2022-03-25 22:10:08

...

初学css的朋友可能觉得 border 属性只是简单的绘制边框。其实， border是控制对象的边框边线宽度、颜色、虚线、实线等样式。可以对单个边框进行控制，也可以控制所有的边框。使用border属性可以制作更多的效果。在 CSS 中，你可以透过 border 的语法来对边框做许多样化的设计变化，例如设定边框的宽度、样式、颜色等等，也可以隐藏边框，原则上 CSS 对于 border 的设计不只局限于 p 区块或 span 的边框，也可以应用到其他的网页元素的边框上，例如网页标题的边框、图片的边框（img border）... 等，所有的主流浏览器都支援 CSS border 属性。下面就来具体的说明下border边框属性的使用。

首先学习相关的免费课程

1. 学习《html/css快速入门》中的 css边框样式课程

2. 观看《极客学院CSS及CSS3视频教程》的 CSS盒子模型-边框视频教程

border边框属性

1. 关于CSS之border属性的详细介绍

1）border-width：不支持百分比，支持关键字，thin（1px），medium（默认值，3px，默认值是3px的原因是只有当border是3px及以上时，border-style才有效果），thick（5px）

2）border-style:有不同值，下面分析分别为不同值时的应用 a.solid：可以实现三角，梯形；b.dashed:虚线，在chrome/Firefox浏览器中，虚线和实线的比例是3:1（稀），在IE浏览器中，比例是2：1（密）；c.dotted:点线，在chrome/Firefox浏览器中，是方点，在IE浏览器中，是圆点（可以利用圆点实现圆角效果）；d.double:双线,计算规则，双线宽度永远相等，中间间隔+-1，例如，3px=1（内）+1（中间间隔）+1（外），可以实现三道杠图形；e.inset（内凹）,outset（外凸）,ridge（沟槽）:风格过时，兼容性差，没有什么使用场景

2. 详解css样式之border属性

border-width 属性设置边框的宽度可能的值：像素

border-style 属性设置边框的样式可能的值：solid(直线)，dashed(虚线)，dotted(点线)

border-color 属性设置边框的颜色可能的值：red,#f00,#ff0000,rgb(255,0,0),transparent

border-left 属性设置左边框

border-right 属性设置右边框

border-top 属性设置上边框

border-bottom 属性设置下边框

3. 你所不知道的border用法

思路：当底边和水平线平行时，我们直接通过控制宽高比来实现我们想要的三角形效果；当与水平线不重合时这个时候就比较复杂了，就需要用到宽高比和CSS3中的transform属性和rotate相结合，让我们的三角形呈现出我们想要的效果（这里只是介绍思路，不去具体实现，其中有涉及到数学方面的知识可以自己百度）。

4. 使用CSS的border属性构建变形边框的方法总结

border 顾名思义就是边框的意思，在 CSS 中，你可以透过 border 的语法来对边框做许多样化的设计变化，例如设定边框的宽度、样式、颜色等等，也可以隐藏边框，原则上 CSS 对于 border 的设计不只局限于 p 区块或 span 的边框，也可以应用到其他的网页元素的边框上，例如网页标题的边框、图片的边框（img border）... 等，所有的主流浏览器都支援 CSS border 属性。

5. border三角形阴影和多重边框的整理转述

边框可以根据方向单独设置，上下左右，border-top | border-bottom | border-left | border-right ;

所以属性也可以单独设置，border-top-width | border-top-style | border-top-color ;

单属性也可以有组合写法：

border-width:上右下左；（顺时针方向）

border-width:上左右下；

border-width:上下左右；

border-width:四个方向；

border-style | border-color也可以这样设置；

6. CSS：Border属性

扩展知识许多设计师一直用的是目前为止在本章列出的知识，然而，有一些方法我们可以进一步扩展！

多个边当给一个元素应用多个边的时候，有各种各样的技术可以参考。