关键词：
第 17章 CSS边框和背景[上]
学习要点：
1.声明边框
2.边框样式
3.圆角边框
本章主要探讨 HTML5中 CSS边框和背景，通过边框和背景的样式设置，给元素增加
更丰富的外观。
一．声明边框
边框的声明有三个属性设置，样式表如下：
属性 值 说明 CSS版本
border-width 长度值 设置边框的宽度，可选 1
border-style 样式名称 设置边框的样式，必选 1
border-color 颜色值 设置边框的颜色，可选 1
这三个属性值，只有 border-style是必须声明，才可以出现边框。而其他两个属性
会出现默认值。
//最简单的边框，边框长度默认 3px，边框颜色为黑色
div {
border-style: solid;
}
//配置完整的边框
div {
border-style: solid;
border-width: 2px;
border-color: red;
}
如果元素长和高均为 200px时，四个边框均为 2时，元素的长高总尺寸均为 202px。
二．边框样式
边框的样式主要有三种，分别是边框长度取值、边框的颜色和边框的线条类型。颜色是
通用的颜色代码，和所有其他颜色取值一下。而长度和线条类型，边框有自己独到的部分。
边框宽度取值表如下：
值 说明
长度值 CSS长度值：比如 px、em等
百分数 直接设置百分数：1、2、3等
thin 使用长度名称的预设宽度。这三个值的具体意义由浏览器来定义，从小到大依次增大
medium
thick
一般来说，边框为了更加精准，还要计算元素盒子的总尺寸，使用长度值的比较多。而
定义边框线条的样式如下样式表：
值 说明
none 没有边框
dashed 破折线边框
dotted 圆点线边框
double 双线边框
groove 槽线边框
inset 使元素内容具有内嵌效果的边框
outset 使元素内容具有外凸效果的边框
ridge 脊线边框
solid 实线边框
//solid实线使用频率最高
div {
border-style: solid;
border-width: 10px;
border-color: red;
}
如果想对四条边中某一条边单独进行设置，可以使用如下样式表：
属性 说明 CSS版本
border-top-width 定义顶端 1
border-top-style
border-top-color
border-bottom-width 定义底部 1
border-bottom-style
border-bottom-color
border-left-width 定义左侧 1
border-left-style
border-left-color
border-right-width
border-right-style 定义右边 1
border-right-color
//只设置顶端
div {
border-top-style: solid;
border-top-width: 10px;
border-top-color: red;
}
如果四条变都一致，那么没必要分写成三句样式，直接通过简写即可：
属性 说明
border 设置四条边的边框
border-top 只设置上边框
border-bottom 只设置下边框
border-left 只设置左边框
border-right 只设置右边框
值 <宽度> <样式> <颜色>
CSS版本 1
//简写形式四条边设置
div {
border: 10px solid red;
}
三．圆角边框
CSS3提供了一个非常实用的圆角边框的设置。使用 border-radius属性，就可以达
到这种效果，样式表如下：
属性 说明
border-radius 四条边角
border-top-left-radius 左上边角
border-top-right-radius 右上边角
border-bottom-left-radius 左下边角
border-bottom-right-radius 右下边角
值:长度值或百分数
CSS版本：3
//设置圆角矩形
div {
border: 10px solid red;
border-radius: 10px;
}
//四条边分别设置
div {
border: 10px solid red;
border-radius: 10px 20px 30px 40px;
}
例子
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>CSS边框和背景[上]</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div>我是HTML5</div>
</body>
</html>
@charset "utf-8";
div {
width: 200px;
height: 200px;
/* border-style: solid;
border-color: red;
border-width: 10px;*/
/* border-top-style: solid;
border-top-color: red;
border-top-width: 10px;*/
border: 10px solid red;
/*border-radius: 10px 20px 30px 40px;*/
border-top-right-radius: 40px;
/*border-top: 10px solid red;*/
/*border-width: thin;*/
/*border-style: thick;*/
/*border-width: 10px;*/
/*border-style: none;*/
/*border-width: medium;*/
/*border-style: none;*/
/*border-style: dashed;*/
/*border-style: dotted;*/
/*border-style: double;*/
/*border-style: groove;*/
/*border-style: inset;*/
/*border-style: outset;*/
/*border-style: ridge;*/
}
css揭秘
第1章引言第2章背景与边框第3章形状第4章视觉效果第5章字体排印第6章用户体验第7章结构与布局第8章过渡与动画 第1章引言 Web标准:是敌还是友 CSS编码技巧第2章背景与边框 1半透明边框 2多重边框 3灵活的... 查看详情
第23章css边框图片效果
...3C或者百度 未排版的PDF转WORD（不想排版了）第23章CSS3边框图片效果学习要点：1.属性初探2.属性解释3.简写和版本本章主要探讨HTML5中CSS3中边框图片背景的效果，通过这个新属性让 查看详情
第18章css表格与列表
...有样式，样式表如下：属性值 说明 CSS版本border-collapse边框样式相邻单元格的边框样式2border-spacing长度值相邻单元格边框的间距 2caption-side位置名称表格标 查看详情
《图解css3——第3章css3边框-2》
3.2CSS3边框颜色属性3.2.1border-color属性的语法及参数border-color的语法看上去和CSS1中的完全相同，但为了避免与border-color属性的原功能发生冲突，CSS3在这个属性上做出了一定的修改。语法如下：border-color:[<color>|transparent]{1,4}|inh... 查看详情
22.css边框与背景上
第十七章 CSS边框与背景【上】一、声明边框 查看详情
《图解css3——第3章css3边框-3》
3.3CSS3图片边框属性border-image效果在CSS2中，只有使用背景图片来制作，而且制作过程非常复杂，做完后也很难维护。如今CSS3中增添了一个图片边框的属性，能够模拟出background-image属性的功能，功能比background-image强大，我们可以... 查看详情
《图解css3——第3章css3边框-4》
3.4CSS3圆角边框属性在web页面上圆角效果很常见。圆角给页面增添曲线之美，让页面不那么生硬，但是为了设计圆角效果。3.4.1broder-radius属性的语法及参数语法：border-radius：none|<length>{1,4}[/<length>{1,4}]?border-radius是一种缩... 查看详情
从零开始学习前端开发—17css3背景与渐变
...作用：用来设置背景的可见区域a)border-box默认值，背景在边框及边框以内的区域可见b)padding-box背景在padding及padding以内的区域可见c)content-box背景在content区域可见 二、背景原点:background-orig 查看详情
《图解css3——第3章css3边框-1》
提到边框，大家首先想到的是CSS的boder属性。不错，border属性是CSS种盒模型基础属性之一。在CSS3中，关于边框的运用会有什么样的不同之处呢？又将如何使用？本章我们带着这些问题开始我们的CSS3边框之旅。3.1CSS3边框简介border... 查看详情
css3边框与背景
一、css3边框1、border-image边框border-image:url(xxx.png)numberstretch很好理解就是拉伸，有多长拉多长。repeat(和4角上同等大小图片进行平铺当边框中间区域长度不是4角图片大小的整数倍时会被切割)铺满(round)(4角上的图片进行拉伸平铺不... 查看详情
css第五天背景，边框
总结一下今天所学习的内容，如下：背景属性例子或作用backgroundbackground:#00FF00url(bgimage.gif)no-repeatfixedtop;background-attachment背景图像是否固定或者随着页面的其余部分滚动。background-color设置元素的背景颜色。background-image... 查看详情
css权威指南的作品目录
...本装饰文本阴影小结第7章基本视觉格式化第8章内边距、边框和外边距第9章颜色和背景第10章浮动和定位第11章表布局第12章列表与生成内容第13章用户界面样式第14章非屏幕媒体附录A属性参考附录B选择器、伪类和伪元素参考附录... 查看详情
《图解css3——第4章css3背景-1》
CSS3背景4.1CSS3背景属性简介background是一个使用率很高的属性，也是一个十分有用的属性，能帮助设计师实现一些特殊的效果，使用起来也非常简单。4.1.1背景的基本属性背景主要包括五个属性：background-color（背景颜色）background-i... 查看详情
css3秘笈第三版涵盖html5学习笔记13~17章
第13章，构建基于浮动的布局使用的是float（浮动）属性注：float:none值将取消所有浮动，通常只用来取消元素中已经应用的浮动。切记：不需要给正文的div设计宽度，即使设计成固定宽度也不用用浮动进行布局LayoutGala网站（http:/... 查看详情
《图解css3——第4章css3背景-2》
4.2CSS3背景原点属性4.2.1background-origin属性的语法及参数background-origin属性主要就是用来决定background-position属性的参考原点，即决定背景图片定位的起点。在默认情况下，背景图片的background-position属性总是以元素左上角的坐标原点... 查看详情
第七十四节，css边框与背景
css边框与背景学习要点：1.声明边框2.边框样式3.圆角边框 本章主要探讨HTML5中CSS边框和背景，通过边框和背景的样式设置，给元素增加更丰富的外观。 声明边框边框的声明有三个属性设置，样式表如下 &... 查看详情
第17章发现过拟合和欠拟合
... 我们现在将更深入的研究和讨论在深度学习背景下的过拟合和欠拟合（underfittingandoverfitting）。这里将提供一些图表来将它们匹配到你自己的训练损失/精确度曲线上，这个对于第一次以本书来学习深度学习/机器学... 查看详情
23.css边框与背景下
第十七章 CSS边框与背景【下】一、设置背景 查看详情