CSS应用篇 - border边框竟然可以这么用

信我或关注微信号：狮范儿，回复：学习，获取免费学习资源包。

在我们平时网页中，想必大家一定用过border，可以根据border给我们提供的各种属性实现盒子的边框效果，那么今天就给大家分享一下边框的应用。

常规姿势

在CSS1中就定义了边框样式属性：border设置全部或指定具体边框样式。具体包括指定样式：宽度：width、样式：style（none、solid、dotted、dashed等）、颜色：color。可以通过border统一设置边框样式，也可以通过border-left:width style color独立设置边框样式。这部分相对比较简单，下面我们来使用div示例及样式展示一下基本设置方法：

特殊姿势

我们都知道，标准盒子模型的大小会受content（width,height）、padding、border的影响，所以，即使一个盒子未设置内容大小，只要有边框或内边距，盒子也是会有大小的。我们就从这里出发，假若盒子未设置宽度和高度，我们给盒子增加了边框大小为10px,给每边边框设置不同的颜色来看一下：

假使只有上边框有颜色，其他边框的颜色均为透明：

此时我们就会得到一个三角小图标，是不是感觉很神奇。

再比如，我们给盒子设置width，再来观察下，你就会发现你得到了一个梯形。

借助其他样式合并输出姿势

border边框还能与border-radius一起来做出我们希望效果。例如：

再做一个月亮给你呀：

再送你一朵小花花：

最后做一个火热的爱心送给你呀~~

私信我或关注微信号：狮范儿，回复：学习，获取免费学习资源包。

. CSS指的是下列( B )的缩写。

A. Computer Style Sheets

B. Cascading Style Sheets

C. Creative Style Sheets

D. Colorful Style Sheets

2在HTML文档中.应该在下列哪个部分引用外部样式表? (D)

A.文档的末尾

B.<title>部分

C.<body>部分

D.<head>部分

3.在以下的语句中，正确引用外部样式表的语句是（B）

A. <style src=" mystyle. css">

B. <link rel= "stylesheet" type=" text/css" href= "mystyle. css" >

C. <stylesheet> mystyle.css</stylesheet>

D. <link src=" mystye. css">

4. 下列哪个属性是用来定义内联样式的? (D )

A.font

B.class

C.styles

D.style

5.下列正确地在CSS文件中插人注释的语句是(C )

A. // this is a comment

B. // this is a comment //

C./* this is a comment * /

D. 'this is a comment

6.下列符合CSS语法的正确语句是( C )。

A.body :color = black

B.{body;color:black}

C.body {color: black;}

D.{body :color= black}

7. 下列代码中能够将所有p 标记内文字加粗的是(D)。

A. <p style =" text-size : bold" >

B. <p style =" font-size :bold">

C. p{text-size : bold}

D. p{font-weight :bold}

8.下列CSS属性中，控制文本尺寸的属性是( A )。

A. font-size

B. text-style

C. font-style

D.text-size9

9.在CSS的长度单位中,1 pc 等于多少pt? ( C)

A.8

B.10

C.12

D.14

10. 改变某个元素的文本颜色的CSS属性是(C )。

A. text-color

B. Fgcolor

C. color

D. text-color

11.下列可用于改变页面背景颜色的属性是(B )。

A. bgcolor

B. background-color

C. color

D. backcolor

12.下列语句中，显示没有下画线的超链接的语句是( A) 。

A. a{ text-decoration : none }

B. a{text-decoration : no underline}

C. a {underline :none}

D. a {decoration:no underline}

13.下列哪个样式能够显示这样一个边框:上边框 10像素、下边框5像素，左边框20像素，右边边框1像素（D）

A. border-width:10px 5px 20px 1px

B. border-width:10px 20px 5px 1px

C. border-width:5px 20px 10px 1px

D. border-width:10px 1px 5px 20px

14.下列哪个语句是设置活动状态超链接颜色的?(D)

A. a:link { color: #FF0000 }

B. a:visited{color: #00FF00C}

C. a:hover { color: #FFCC00 }

D. a:active {color: #0000FF}

15.CSS主要用下列哪个HTML标记构建页面布局?(B)

A. <dir>

B. <div>

C. <dif>

D. <dis>

计算机二级Web（4）：CSS基础（下）

计算机二级Web（4）：CSS基础（上）

一步：绘制出一个小正方形

1、html代码

<div class="ico"> </div>

2、css代码

.ico{ width:50px;height:50px; background:red; }

产生结果：

第二步：给小正方形加上不同的边框颜色

1、css样式

.ico{width:50px; height:50px; background:red; /*新增内容*/ border:20px solid blue;}

产生的结果：

第三步：给上边框单独加上一个颜色

1、css样式

.ico{width:50px;height:50px; background:red; border:20px solid #6600ff;/*新增内容*/border-top:20px solid #000000;}

产生的结果：

第四步：把长方形的宽度和高度从原来的50px 改为0px

1、css样式

.ico{/*--修改部分*/width:0px; height:0px; background:red; border:20px solid #6600ff;	border-top:20px solid #000000;}

产生的结果：

第五步：把边框的颜色设置为透明的，只留上边框的颜色为黑色

1、css样式

.ico{width:0px;height:0px; background:red; /*修改的样式*/border:20px solid transparent;;border-top:20px solid #000000;}

产生的结果：

解释：当边框变为transparent透明后，出现红色的区块，是因为我们在构建长方形时加红色的背景 background:red，最后一步，去掉background:red；就可以了

第六步：把background:red；去掉

.ico{width:0px;height:0px; /*background:red;*/ border:20px solid transparent;border-top:20px solid #000000;}

产生的结果：

终于一个完整的三角形制作出来了，写的步聚有点多，主要是想让大家看到这个三角形是如何演变而来的。

如果没有看懂，或有代码方面问题的，可以加群：611428142 来听我讲课吧

在线咨询

上一篇：怎么理解Html5?Html5和html4相比有哪些优势？怎么学好html5?
下一篇：HTML网页编程之表单详解

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

CSS应用篇 - border边框竟然可以这么用

您的项目需求