当前位置:首页 >> 电脑基础知识 >>

CSS3边框应用

《前端开发基础》

专业:

学号:

姓名:

实 CSS3 边框应用 验





实 掌握 Css3 新增边框属性的设置方法并能熟练应用 验





1、多色边框 border-colors与CSS2.0的border-color相比就多了一个字母,用于给边框设置多个颜色,该 属性出来了好几年,目前为止,只有火狐浏览器支持,也不被W3C收录,也许是因为颜色 过多,怕被设计不好。

Border:5px 语法:border-colors:color color color color color 说明:边框宽度为n,颜色数为n,各颜色显示1像素的宽度,边框为n,颜色数小于n,最 后一个颜色会被填入剩下的宽度中。

2、边框巧用 在CSS中,其border属性有很多的规则。
四个方向边框单独设置

border-left 设置左边框,一般单独设置左边框样式使用 border-right 设置右边框,一般单独设置右边框样式使用 border-top 设置上边框,一般单独设置上边框样式使用 border-bottom 设置下边框,一般单独设置下边框样式使用,有时可将下边框样式作为css下 知 划线效果应用。



边框三个样式

提 通常我们可以对边框设置宽度(厚度)、边框样式、边框颜色这三个属性与参数。

示 边框颜色:border-color:#000; 边框厚度(宽度):border-width:1px;边框border为0时样式无效 border边框样式:border-style:solid 边框样式值如下:

none : 无边框。与任何指定的border-width值无关 hidden : 隐藏边框。IE不支持 dotted : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线(常 用)

dashed : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线(常 用)

solid : 实线边框(常用) double : 双线边框。两条单线与其间隔的和等于指定的border-width值 groove : 根据border-color的值画3D凹槽 ridge : 根据border-color的值画菱形边框 inset : 根据border-color的值画3D凹边 outset : 根据border-color的值画3D凸边

DQ

-1-

《前端开发基础》

通过灵活使用边框的这些规则,可以实现一些特殊样式。

3、边框背景 CSS3 新增加一个 border-image 用于设置边框背景,用这个属性,可以定义一个图像来为 四条边设置边框背景,减少了页面元素,而且边框的样式就不像以前那样只有实线、虚线

那么单调。border-image 模拟了 background-image 属性,与背景图像的设置有相通之处。 语法格式:

border-image : none | <image url> | <border-image-slice>{1,4} number|percentage

|<border-width>{1,4} |outset |<repeat> border-image 有五大属性值,分别如下表所示:



描述

border-image-source 用于指定要用于绘制边框的图像的位置

border-image-slice

图像边界向内偏移(切片宽度)

border-image-width 图像边界的宽度

border-image-outset 用于指定在边框外部绘制 border-image-area 的量

border-image-repeat

用于设置图像边界是否应重复(repeated)、拉伸(stretched)或 铺满(rounded)。

1、图片地址:<image url>可以是相对地址也可以是绝对地址 2.边框的宽度:<number>使用数值时同样不需要加上 px,这里可以设置 1-4 个值。 或者 百分比<percentage> 3.图片的排列方式:[ stretch 图片水平拉伸(默认) | repeat 水平重复 | round 水平平铺] 4、图片切片: <border-image-slice>[ length | percentage | number | auto ]{1,4}数值百分比等, 数值没有单位。指定边框图像顶部、右侧、底部、左侧内的偏移量。把边框图片切成 9 个 部分,俗称“九宫格”,如图所示:

切片详解: 1)四个边角的菱形区域称为“角边框图片”,在 border-image 中,角边框图片是没有任何展

DQ

-2-

《前端开发基础》
示效果的,不会平铺,不会重复,也不会拉伸,有点类似于视觉中盲点的意思。 而对边的四个区域属于展示效果的作用区(也是边框宽度计算剩余区),上下区域即 border-top-image 和 border- bottom-image 区域受到展示效果属性的第一个参数——水平方 向效果影响:如果为 repeat,则此区域图片会水平重复,如果是 round,则此 框框内的图 片会水平平铺,如果是 stretch,则此矩形域中的图片就会被水平拉伸。左右区域只有垂直 方向上的效果,与上下 区域效果对应。 2)border-image 被分成了九部分-八个边块和最中间的内容区域,分别用以下 9 个子属性控 制: border-top-image, border-right-image, border-bottom-image, border-left-image, border-top-right-image, border-bottom-right-image, border-bottom-left-image, border-top-left-image。
提示: border-image 的实际功能是它的字面意思有点不一样。从字面上来看 border-image 只是针 对边框有效,但是在实际运用中非边框区域也可以进行添加。比如内容区域,对象内容区 域默认为空,设置 fill 属性后,将填充九宫格正中的图片
切片效果展示: 本部分演示实例用下图做素材(总大小 81*81 每个小方块大小是 27*27)
素材图 border-image-slice 1、上下和左右>=背景图像的宽度,背景图被缩放填充到边框的四个角中

div {

height:160px;

border-width:27px;

border-image: url(../images/e1405/border2.png) 81; }

html:<div>borderImage</div>

2、一对值>=背景图像的尺寸,另一对值之和=背景图像的尺寸,背景图被分为两半,分 别填充到边框的四个角中。

DQ

-3-

《前端开发基础》

border-width:81px; border-image: url(../images/e1405/border2.png) 40 81 41 112;
3、每一对值之和=背景图像的尺寸,背景图被分为四部分,分别填充到边框的四个角中。

border-image: url(../images/e1405/border2.png) 40 32 41 49;
4、一对值或两对值之和>背景图像的尺寸,参数值都不大于背景图像的宽度或高度,背 景图被分为有重叠区域的四部分,分别填充到边框的四个角中。
border-image: url(../images/e1405/border2.png) 50 60 50 60;
5、一对值之和<背景图像的尺寸,另一对值之和=背景图像的尺寸,背景图被分为 6 部 分,分别填充到边框的四个角合对应的两个边中。

border-image: url(../images/e1405/border2.png) 41 30 40 30 ;

DQ

-4-

《前端开发基础》
border-image: url(../images/e1405/border2.png) 30 40 30 41;
6、一对值之和<背景图像的尺寸,另一对值都不大于背景的宽或高度,背景图被分为 3 部分,分别填充到边框的一边的两角和边中,另一边重复。

border-image: url(../images/e1405/border2.png) 40 80 40 80; 7、每一对值之和<背景图像的尺寸,背景图被分为 9 部分,分别填充到边框的四角四边 和内容区。

border-width:81px; border-image: url(../images/e1405/border2.png) 10;

border-width:10px; border-image: url(../images/e1405/border2.png) 10;

border-image 的实际功能是它的字面意思有点不一样。从字面上来看 border-image 只

DQ

-5-

《前端开发基础》
是针对边框有效,但是在实际运用中非边框区域也可以进行添加。比如内容区域,对象 内容区域默认为空,设置 fill 属性后,将填充九宫格正中的图片 本例使用如下素材:

80*80
height: 160px; border-width: 20px; border-image: url(../images/e1405/borderimage.png) 20;

border-image: url(../images/e1405/borderimage.png) 20 fill;

使用说明: 1 、 border-image 适 用于所 有 元 素( 行 内元 素 和块 级 元 素 ), 但 是不 适 用于 设 置了 border-collapse 的 table-cells 2、top right bottom left 不要加单位

4、圆角border-radius 圆角border-radius: 语法:border-radius : none | <length>{1,4} [/ <length>{1,4} ] 两个<length>由浮点数字和单位标识符组成,不可为负值。一般会把"/"省略,表示水平和 垂直半径都相等。 如果只设置了一个值,那么radius将作用于4个圆形角 >两个值,那么第一个值作用于左上角与及右下角,第二个值作用于右上角及左下角(X交 叉) >三个值,那么第一个值作用于左上角,右上角和和左下角公用第二个值,第三个值将是 右下角(左下和右上共用) >四个值,那么第一个值作用于左上角,右上角,右下角,左下角(顺时针) Border-radius初始值为none,适用于所有元素,除了border-collapse为collapse的table元素。 派生了四个子属性: border-top-left-radius、 border-top-right-radius、 border-bottom-right-radius、
border-bottom-left-radius

实 验 内容:略 内 容 1、用边框属性分别实现如下效果

项目一、多色边框 项目二、边框应用

DQ

-6-

《前端开发基础》 2、巧用边框实现如下导航效果

3、边框背景 素材如下:

边框背景图,我是一张电子邮票,记得空闲时候给我投递哦!边框背景图,我是一 张电子邮票,记得空闲时候给我投递哦!边框背景图,我是一张电子邮票,记得空 闲时候给我投递哦!边框背景图,我是一张电子邮票,记得空闲时候给我投递哦! 边框背景图,我是一张电子邮票,记得空闲时候给我投递哦!边框背景图,我是一 张电子邮票,记得空闲时候给我投递哦!

用边框背景属性,实现如下效果:

DQ

-7-

《前端开发基础》 4、CSS 的 border-radius 属性模拟柠檬的形状









学 能熟练完成


需要查阅相关资料完成

自 未能完全完成


觉得非常困难

教 界面完成了预定要求


界面布局工整

评 代码规范 阅

命名规范

需要帮扶才能完成 完全不懂
色彩搭配合理 内容切合主题

语言应用:( 超前

熟练

准确合理 不够熟练 练习量不够 )

综合评定等级:

教师:代琴

DQ

-8-


相关文章:
对CSS3盒模型边框应用的研究.doc
CSS3盒模型边框应用的研究 - 龙源期刊网 http://www.qikan.com.cn 对 CSS3 盒模型边框应用的研究 作者:郑伟 来源:《电脑知识与技术》2016 年第 36 期...
css3边框(border)模型_图文.ppt
css3边框(border)模型_计算机软件及应用_IT/计算机_专业资料。css3边框(border)模型 CSS3 边框(border)模型 css3<hack> 因为css3并不是所有的浏览器都支持,有...
css3边框.pdf
css3边框 - css3 边框 CSS3 中的边框(Border). 这对我们
CSS3边框相关.doc
CSS3边框相关 - Css3 边框 CSS3 边框 圆角效果 border-r
CSS3边框_图文.ppt
CSS3边框_计算机软件及应用_IT/计算机_专业资料。hdgdttetete4
CSS3边框属性1_图文.ppt
CSS3边框属性1 - CSS3的新增边框属性 主讲:丛浩 @LAMP兄弟连丛浩
HTML5应用开发与实践第11章 CSS3美化背景与边框_图文.ppt
HTML5应用开发与实践第11章 CSS3美化背景与边框_计算机软件及应用_IT/计算机_专业资料。第11章 本章要求: CSS3美化背景与边框 ? ? ? ? ? ? 设置背景颜色 ...
15 CSS3中新增边框属性_图文.ppt
15 CSS3中新增边框属性 - CSS3新增边框属性 博士、副教授 E_Mail:csit_xiayu@163.com 夏 瑜 计算机科学与工程学院 CSS3新增边框属性 本章内...
CSS3 边框图片效果.doc
CSS3 边框图片效果 - 海文国际 http://www.hwua.com CSS3 边框图片效果 学习要点: 1.属性初探 2.属性解释 3.简写和版本 本章主要探讨 HTML5 中 C...
CSS3中新增边框属性4_图文.ppt
CSS3中新增边框属性4 - CSS3 授课教师:陈艳 网站教研组 CSS3新增边框属性 本章内容 ? CSS1&2中的边框属性(W3C标准) ? CSS3 新增的边框属性 ? CSS3...
第11章 CSS3美化背景与边框_图文.ppt
第11章 CSS3美化背景与边框_计算机软件及应用_IT/计算机_专业资料。第11章本章要求: CSS3美化背景与边框 ? ? ? ? ? ? 设置背景颜色 设置背景图片 CSS 3...
css3实现圆角边框渐变.doc
css3实现圆角边框渐变 - 官方网站:http://www.cnwenhui.
HTML5+CSS3 边框阴影.doc
HTML5+CSS3 边框阴影 - HTML5+CSS3 边框阴影 box-sh
HTML5+CSS3 使用图像边框.doc
HTML5+CSS3 使用图像边框 - HTML5+CSS3 使用图像边框CSS 3 中,使用 border-image 属性,可以让处于随时变化状态标签长或宽的 边框,统一使用一个...
HTML5+CSS3 圆角边框的绘制.doc
HTML5+CSS3 圆角边框的绘制 - HTML5+CSS3 圆角边框的绘制 在 CSS 3 中,使用 CSS 样式完成圆角边框绘制,是经常用来美化页面效果的手 法之一。 1.borde...
基于HTML5+CSS3的网页布局.doc
基于HTML5+CSS3的网页布局 - 龙源期刊网 http://www.qikan.com.cn 基于 HTML5+CSS3 的网页布局 作者:葛蓝 来源:《数字技术与应用》2017 年第 ...
网站建设之如何使用css3实现圆角边框渐变.doc
网站建设之如何使用css3实现圆角边框渐变_计算机软件及应用_IT/计算机_专业资料。如何使用css3实现圆角边框渐变 网站建设:www.cnwenhui.cn 如何使用 css3 实现圆角...
css3边框.pdf
css3边框 - css3 边框 CSS3 中的边框(Border). 这对我们
css圆弧边框=.doc
css圆弧边框= - css 圆弧边框 一、CSS3 圆角的优点 传统的圆角生成方案,必须使用多张图片作为背景图案。CSS3 的出 现,使得我们再也不必浪费时间去制作这些图片...
CSS3.doc
CSS3_计算机软件及应用_IT/计算机_专业资料。css3 常用文档 css3 学习笔记 ...box-sizing:padding-box 3 背景与边框相关样式在 firefox 中,除了 background-...