1. 前言

边框是使用频率很高的样式，图片可以加边框，表格基本都是带边框的，所以边框的学习是很重要的。

本篇就来介绍下CSS边框的用法。

2. 边框的样式

可以通过border-style设置边框样式，常用的有solid实线、dotted点线、dashed虚线三种。

 <p class="border-solid">演示实线边框</p><p class="border-dotted">演示点线边框</p><p class="border-dashed">演示虚线边框</p>

CSS代码：

     .border-solid {border-style: solid;}.border-dotted {border-style: dotted;}.border-dashed {border-style: dashed;}

效果如下：

3. 边框宽度

可以通过border-width调整边框的宽度，单位一般使用px像素。

 <p class="border-thick">演示粗边框</p><p class="border-thin">演示细边框</p>

CSS代码，当日具体的宽度，可以根据实际情况调整，我此处仅仅为了演示。

     .border-thick {border-style: solid;border-width: 4px;}.border-thin {border-style: solid;border-width: 1px;}

效果如下：

4. 边框颜色

可以使用bolder-color指定边框的颜色，HTML代码：

 <p class="border-red">演示红色边框</p><p class="border-green">演示绿色边框</p>

CSS代码：

     .border-red {border-style: solid;border-color: red;}.border-green {border-style: solid;border-color: green;}

效果如下：

5. 简写属性

大家想必发现了，我们在设定边框样式时，一般都会同时设定边框样式、宽度、颜色，如果逐一定义，比较麻烦。

所以CSS还提供了简写属性：

 <p class="border-simple">使用简写属性</p>

CSS代码：

         /* 使用简写属性，边框样式为实线、宽度1px、颜色蓝色 */.border-simple {border: solid 1px blue;}

效果如下：

一般情况下，边框都是使用简写属性来编写，因为这样写比较简单。

6. 单独设定各边样式

还支持单独设定上边框、下边框、左边框、右边框的样式：

 <p class="border-each">单独设定各边框样式</p>

CSS代码：

     .border-each {border-top: solid 1px blue;border-bottom: solid 1px green;border-left: dashed 1px grey;border-right: dashed 1px grey;}

效果如下：

7. 小结

边框一般掌握简写方法就够了。

零基础CSS入门教程(13)–边框样式相关推荐

零基础CSS入门教程(5)–背景样式
点此查看所有教程.项目.源码导航本文目录 1. 前言 2. 设置背景色 3. 设置背景图片 4. 背景图平铺 4.1 不平铺 4.2 水平平铺 4.3 垂直平铺 4.4 两个方向平铺 5. 背景定 ...
零基础CSS入门教程(1)–初识CSS
点此查看所有教程.项目.源码导航本文目录 1. 前言 2. HTML与CSS区别 3. CSS有哪些功能 4. 如何学习CSS 1. 前言学习CSS是离不开HTML的,HTML是CSS的基础,如 ...
零基础CSS入门教程(19)–盒子模型简述
点此查看所有教程.项目.源码导航本文目录 1. 前言 2. 实例解析 3. 小结 1. 前言之前我们讲过CSS的尺寸.边框.内边距.外边距. 其实这些都是占用网页空间,在CSS中,我们将网页元素 ...
零基础CSS入门教程(11)——无序列表样式
本章目录 1.任务目标 2.无序列表样式 3.代码如下 4.小结 1.任务目标我们再html里面有无序列表和有序列表,那我们这一小节学习一下列表样式,并熟练掌握. 2.无序列表样式 (1)list- ...
零基础CSS入门教程(22)–溢出
点此查看所有教程.项目.源码导航本文目录 1. 前言 2. 默认显示溢出部分 3. 隐藏溢出部分 4. 显示滚动条 5. 自动处理 6. 小结 1. 前言之前我们讲过了,网页元素会占据一个盒子的 ...
零基础CSS入门教程(16)–内边距
点此查看所有教程.项目.源码导航本文目录 1. 前言 2. 默认情况 3. 设置内边距 4. 简写属性 5. 小结 1. 前言上一篇介绍了外边距,也就是元素跟相邻元素的距离. 本篇来介绍内边距, ...
零基础CSS入门教程(6)–style标签与注释
点此查看所有教程.项目.源码导航本文目录 1. 前言 2. style标签 3. CSS注释 4. HTML注释与CSS注释的区别 5. 小结 1. 前言特别喜欢毛主席的一些文章,例如<论 ...
零基础CSS入门教程(18)–颜色值
点此查看所有教程.项目.源码导航本文目录 1. 前言 2. 三原色 3. RGB颜色值 4. 16进制颜色值 5. 取色 6. 小结 1. 前言世界是五彩缤纷的,不论是皑皑的白雪.还是飘落的秋叶 ...
零基础CSS入门教程(9)–class选择器
点此查看所有教程.项目.源码导航本文目录 1. 前言 2. 场景 3. 使用方法 4. 整体解析 5. class选择器的优点 6. 小结 1. 前言前2篇文章分别介绍了元素选择器.id选择器, ...

零基础CSS入门教程(13)–边框样式

本文目录

1. 前言

2. 边框的样式

3. 边框宽度

4. 边框颜色

5. 简写属性

6. 单独设定各边样式

7. 小结

零基础CSS入门教程(13)–边框样式相关推荐

最新文章

热门文章