目录
min-width属性：配置元素的内容在浏览器可视区域中最小的宽度。
max-width属性：配置元素的内容在浏览器可视区域中最大宽度。
CSS3 background-clip属性：配置背景图片的剪裁和大小
CSS3 background-origin属性：配置背景图片的位置
CSS3 background-size属性用于改变图片的大小和进行缩放
1.学习和运用CSS框模型;
width属性：配置元素的内容在浏览器可视区域中的宽度。
可以指定带单位的数值（比如700px或20em）或相对于父元素的百分比（比如80%）。但是这并不是元素的实际宽度。实际宽度有元素的内容、填充、边框和边距构成。width属性只指定内容宽度。
min-width属性：配置元素的内容在浏览器可视区域中最小的宽度。
可以指定带单位的数值（比如100px或20em）或相对父元素在百分比（比如75%）。设置最小宽度可防止内容在网页浏览器改变大小时跑来跑去。如果浏览器变得比最小宽度还小，就显示滚动条。
max-width属性：配置元素的内容在浏览器可视区域中最大宽度。
可以指定带单位的数值（比如90px）或相对父元素的百分比（比如90%）。设置最大宽度可以防止文本在高分辨率屏幕中显示很长的一行。
height属性：配置元素的内容在浏览器可视区域的高度。
可以指定带单位的数值（比如90px）或者相对父元素的百分比（比如60%）。没有配置height或者line-height属性可能造成背景图片的一部分被裁掉。
框模型
2.用CSS配置宽度和高度;
元素块的高度和宽度不止可以在HTML网页中的标签中设置，还可以用CSS设置配置，包括配置width、height、min-width、max-width；
eg:
#border2{ background-color: #6A6AA7; width:500px; min-width:400px; max-width:600px; height:100px; margin-left: auto; margin-right: auto; }
3.用CSS配置边距、边框和填充；
margin属性：配置元素各边的边距
- 配置元素与相邻元素之间的空白。
- 边距总是透明，在该区域看到的时网页或父元素的背景色；
- 使用带单位的数值（px或em）配置边距大小。设为0（不写单位）将消除边距。值"auto"告诉浏览器自动计算边距。
- 可单独配置margin属性值；
padding属性：配置HTML元素内容与边框之间的空白
padding默认为0.如果为元素配置了背景颜色或图片，该背景会同时应用于填充区域和内容区域。
边框 border属性：配置围绕元素的边框
边框默认设为0，就是不显示。
以下是CSS配置border-width设置为3px,border-color设置为#000033,border-style设置为dashed:
.dashedborder{ border-width:3px; border-style:dashed; border-color:#000033; }border-style 属性值 : 边框样式
border-width: 边框宽度
你可以通过 border-width 属性为边框指定宽度。
为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)，或者使用 3 个关键字之一，它们分别是 thick 、medium（默认值） 和 thin。
注意：CSS 没有定义 3 个关键字的具体宽度，所以一个用户可能把 thick 、medium 和 thin 分别设置为等于 5px、3px 和 2px，而另一个用户则分别设置为 3px、2px 和 1px。
4.用CSS居中页面内容；
在第五章中学习了如何在div或者其他元素快中居中显示文本，但是如何在网页中举重显示元素快呢？一个流行的写法就是用CSS样式规则配置；将元块的margin-right和margin-left设置成auto，这就是告诉浏览器自动分配左右边距；
eg：
#border2{ background-color: #6A6AA7; width:500px; height:100px; margin-left: auto; margin-right: auto; }结果：
5.用CSS3添加阴影；
CSS3的box-shadow属性:为边框模型创建阴影效果
属性值包括阴影的水平偏移、垂直偏移、模糊半径（可选）、伸缩距离（可选）和颜色；
水平偏移：像素值。正值在右侧显示阴影，负值在左侧显示。
垂直偏移：像素值。正值在下方显示阴影，负值在上方显示。
模糊半径（可选）：像素值。不能为负值。值越大越模糊。默认值0配置锐利的阴影。
伸展距离（可选）：像素值。默认值0，正值时阴影扩大，负值使阴影收缩。
颜色值：为阴影配置有效颜色。
要配置内部阴影效果，请包含可选的inset关键字。默认阴影是在边框外。使用inset后，阴影在边框内（即使是透明边框）背景内容之上。
eg：设置边框阴影为 框内 深灰色，水平和垂直偏移都是5px，模糊半径是5px；使用默认伸展距离：
#border2{ width:500px; height:100px; margin-top: 20px; margin-left: auto; margin-right: auto; border-style:ridge; box-shadow:inset 5px 5px 5px #828282; }结果:
CSS3的text-shadow属性:为文本创建阴影效果
属性值包括阴影的水平偏移、垂直偏移、模糊半径（可选）和颜色；
水平偏移:像素值。正值在右侧显示阴影，负值在左侧显示。
垂直偏移:像素值。正值在下方显示阴影，负值在上方显示。
模糊半径（可选）:像素值。不能为负值。值越大越模糊。默认值0配置锐利的阴影。
颜色:为阴影配置有效颜色。
eg：为文本配置一个黄色的阴影，水平和垂直都是3px，模糊半径5px：
#TextShadow{ text-shadow: 3px 3px 5px #FF0000; }结果：
6.用CSS3配置圆角；
border-radius属性:创建圆角边框
border-radius属性指定的是圆角的半径,可以是1~4个数值(包括像素或em单位)或百分比.如果只提供一个值,标识该值应用于全部4个角.就按左上、右上、右下和左下的顺序配置（顺时针）。
另外还有border-bottom-left-radius（左下）、border-bottom-right-radius（右下）、border-top-left-radius（左上）、border-top-right-radius（右上）属性配置每个角。
eg
#border1 { background-color: #74C0FF; margin-left:60px; padding:5px 20px; border-top-left-radius: 90px; border-bottom-left-radius: 90px; }结果：
7.用CSS3配置背景图片在框模型的显示；
CSS3 background-clip属性：配置背景图片的剪裁和大小
属性值：
content-box： 剪裁图片使之适应内容后面的区域；
padding-box：剪裁图片使之适应内容和填充后面的区域；
border-box（默认）：剪裁图片使之适应内容、填充和边框后面的区域；
eg：content-box：
#border2{ background-image:url(../img/1.jpg); background-clip: padding-box; width:500px; height:200px; margin-top: 20px; margin-bottom: 10px; margin-left: auto; margin-right: auto; padding :20px; border-style:dashed; border-width: 20px; }content-box：
padding-box：
border-box：
CSS3 background-origin属性：配置背景图片的位置
属性值：
- content-box：相对内容区域定位；
- padding-box：相对填充区域定位；
- border-box：相对边框区域定位；
样例就留给大家把，这个样例就相当与游标图片相对信封的位置；
CSS3 background-size属性用于改变图片的大小和进行缩放
属性值：
- 一对百分比值（宽度、高度）：如果只提供一个值，第二个值默认为auto；
- 一堆像素值（宽度、高度）：如果只提供一个值，第二个值默认为auto；
- cover：缩放背景图片并保持图片的比例不变，使图片高度和宽度完全覆盖区域；
- contain：缩放背景图片并保持图片比例不变，使图片高度和宽度适应区域；
eg：一张完整的图片如图
；用做div元素块的背景图片：代码：
#border2{ background-image:url(../img/2.jpg); background-clip: padding-box; background-size: cover; width:500px; height:200px; margin-top: 20px; margin-bottom: 10px; margin-left: auto; margin-right: auto; padding :20px; border-style:dashed; border-width: 20px; }cover效果：
contain效果：
8.用CSS3配置透明、RGBA颜色和渐变；
CSS3的opacity属性：配置元素的不透明度
opacity的值从0（完全透明）到1（完全不透明），就是约靠近1越不透明。文字和背景同时透明。
eg：将标题h1文字和背景设置为50%透明：
body{ background-image:url(../img/1.jpg); } h1{ text-align: center; padding-top: 100px; height: 150px; background-color: #828282; opacity:0.5; }结果：
后面会有文字不透明、图片不透明和背景透明，文字不透明的CSS3设置。
CSS3 RGBA颜色：
CSS3允许通过color属性配置透明度颜色，称为RGBA颜色。需要4个值：红、绿、蓝和alpha值（透明度）。RGBA颜色使用不是十六进制而是使用十进制。
红、绿和蓝必须使0~225的十进制。alpha值必须是0（完全透明）~1（完全不透明）之间的数字；
CSS3 HSLA颜色：
Web开发人员多年一直在用十六进制或者十进制配置RGB颜色.RGB颜色依赖于硬件,即使计算机显示屏发出红、绿、和蓝光。CSS3引进称为HSLA的一种新的颜色表示系统。它基于一个色轮模型。HSLA是Hue（色调）、Saturetion（饱和度)、Lightness(亮度）、Alpha（透明度）的手写字母缩写。
- 色调：是一个彩色的圆，色调定义实际的颜色。是0~360的一个数值；
- 饱和度：配置颜色的强度。用百分比值表示；
- 亮度：决定颜色明暗。用百分比值表示；
- alpha：表示颜色的透明度。取值范围是0~1.要省略alpha的值，就用hsl关键字代替hsla关键字。
RGBA、HSLA和opacity有什么区别？
opacity属性值同时设置文字和背景的透明度。
如果只想配置半透明背景，请用background-color属性编码RGBA颜色或者HSLA颜色。
如果只想配置半透明文字，请用color属性编码RGBA颜色或者HSLA颜色。
eg：半透明背景，文本不透明；
代码：
h1{ text-align: center; padding-top: 100px; height: 150px; background-color: #828282; background-color: rgba(100, 100, 100, 0.5); font-size: 5em; color:black }结果：
eg：半透明文本，背景不透明；
代码：
h1{ text-align: center; padding-top: 100px; height: 150px; color: rgba(225, 100, 100, 0.5); font-size: 5em; }结果：
啊啊啊————终于写完了，洗脸洗脸打游戏
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
