本篇博客主要针对CSS3样式用法的一些知识点进行归纳总结，本篇通过以下几方面介绍样式用法：
- 字体样式
- 盒子样式
- 背景及边框样式
- 变形样式
- 动画样式
- Media Queries样式
- 滤镜样式
- 定位样式
字体样式
字体基础样式设置：
font-family：字体格式
font-size：字体大小
font-weight：字体粗细
text-shadow：字体阴影
<style>
#d1 {
text-shadow: 5px 5px 5px gray;
font-size: 50px;
font-weight: bold;
font-family: "宋体";
}
</style>
<div id="d1">鹿鼎记</div>效果图：
关于font-size，em和rem的区别：
em单位：根据父元素的字体大小而计算出实际的字体大小
rem单位：根据页面上的根元素，一般是指html元素的字体大小而计算出实际的字体大小
以下是转换对照图表：
关于font-family，如何引用系统外的字体？
方法：下载后缀名为.otf格式的文件，把该文件放到服务器中，可通过url链接引用到浏览器中：
<style>
@font-face {
font-family: WebFont;
src: url('fonttype.otf') format("opentype");
/*font-style: italic;*/
/*上面注释代表表示定义为WebFont斜体，此时需要下载fonttype.otf的斜体字体,否则默认为常规字体*/
}
#d2 {
font-family: WebFont;
font-size: 50px;
}
/*使用服务端系统字体*/
</style>
<div id="d2">鹿鼎记</div>效果图：
盒样式
盒的阴影样式分为外阴影和内阴影，实现设置：box-shadow。
<style>
#d1 {
width: 100px;
height: 100px;
background-color: #87CEEB;
box-shadow: 10px 10px 10px gray;
}
/*box-shadow:x轴 y轴 模糊半径 颜色*/
/*外阴影*/
#d2 {
width: 100px;
height: 100px;
background-color: #87CEEB;
box-shadow:inset 0px 0px 5px 1px gray;
}
/*box-shadow:inset x轴 y轴 模糊半径 扩展半径 颜色*/
/*内阴影*/
</style>
<div id="d1"></div>
<br />
<div id="d2"></div>效果图：
盒模型组成样式设置：box-sizing。
box-sizing: content-box; 不包含边框width（默认）。盒的width=盒内容width
box-sizing: border-box; 包含边框width。盒的width=盒边框width+盒内容width
<style>
#d1 {
width: 100px;
height: 100px;
background-color: #87CEEB;
border: solid 5px black;
box-sizing: content-box;
}
/*box-sizing: content-box 表示盒子内容宽度为width值*/
#d2 {
width: 100px;
height: 100px;
background-color: #87CEEB;
border: solid 5px black;
box-sizing: border-box;
/*box-sizing: border-box 表示盒子内容加边框的宽度为width值*/
}
</style>
<div id="d1"></div>
<br />
<div id="d2"></div>效果图：
盒显示样式设置：display，它包含多种效果设定：
display: inline; 表示元素的宽度只等于内容所在的宽度,设置width无效
display: block; 表示元素的宽度占满了整个浏览器的宽度,且每一行只允许容纳一个block类型元素
display: inline-block; 当没设置宽度时与inline效果相同，但设置width后，以width为准,常与vertical-align:middle配合使用
display: table; 表示用div实现表格，通常tr设为display: table-row; td设为display: table-cell;
display: inline-table; 当元素为table时，与inline-block效果相同
display: none; 元素将不会被显示
<style>
div{
width: 100px;
height: 100px;
border: solid 1px orange;
}
#d1,
#d2 {
display: inline;
}
#d3,
#d4 {
display: block;
}
#d5,
#d6 {
display: inline-block;
}
</style>
<div id="d1">inline-盒1</div>
<div id="d1">inline-盒2</div>
<br />
<br />
<div id="d3">block-盒1</div>
<div id="d4">block-盒2</div>
<br />
<div id="d5">inline-block-盒1</div>
<div id="d6">inline-block-盒2</div>效果图：
当盒中的段落超出盒子宽度时，我们常用的样式处理方法就是用省略号代替超出部分，代码如下：
<style>
#d1 p {
width: 100px;
border: solid 1px black;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
/*规定段落中的文本不进行换行*/
}
/*word-wrap: break-word;表示div内长单子自动换行*/
/*1行带省略号*/
#d2 p {
width: 100px;
border: solid 1px #000000;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
/*显示的文本行数*/
}
/*多行带省略号*/
</style>
<div id="d1">
<p>新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻</p>
</div>
<div id="d2">
<p>新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻</p>
</div>效果图：
要使盒宽高变为可动态拉伸，可以通过设置resize: both实现：
<style>
#d1 {
background-color: pink;
overflow: auto;
resize: both;
width: 150px;
height: 150px;
}
/*宽高可拉伸盒子*/
#d2 {
width: 150px;
height: 150px;
background-color: orange;
}
/*宽高不可拉伸盒子*/
</style>要使盒模型设置背景色、边框或内容等透明，可把要透明的属性设为transparent实现：
<style>
div {
background-color: orange;
border: solid 5px black;
width: 100%;
height: 100px;
margin-top: 10px;
}
#d1 {
background-color: transparent;
}
#d2 {
border-color: transparent;
}
#d3 {
color: transparent;
}
</style>
<div id="d1">文字示例1</div>
<div id="d2">文字示例2</div>
<div id="d3">文字示例3</div>效果图：
背景及边框样式
背景基础样式设置：
background-clip : 指定背景的显示区域。
——border-box:指定背景的显示范围包括边框，为默认设置。
——padding-box:指定背景的显示范围不包括边框
——content-box:指定背景的显示范围只包括内容
background-origin : 指定背景的绘制开始区域,当背景为纯色时，该值无效，参数值与background-clip相同
background-size : 指定背景图片的尺寸，参数值为宽和高。
——当其中一个值为auto时，表示该值自动适应
——当值为contain时，将把图片完全显示在元素中
——当值为cover时，将把图片的宽或高经等比拉伸后填满元素内部
background-repeat : 指定背景图重复状态。
——repeat: 按图像原大小尺寸重复铺满背景
——no-repeat: 按单张图像原大小尺寸设置背景图
——space: 按图像原大小尺寸重复铺满背景并不裁剪掉图像超出的部分，而是自动调整图像与图像间的间距
——round: 重复铺满背景并不裁剪掉图像超出的部分，而是自动调整图像的尺寸
background-position : 设定显示背景图片的部位。
<style>
div {
background-color: #FAEBD7;
background-repeat: no-repeat;
border: dashed 10px green;
padding: 30px;
color: red;
}
#d1 {
background-clip: border-box;
background-origin: border-box;
background-image: url(../../../img/img.jpg);
}
#d2 {
background-clip: padding-box;
background-origin: padding-box;
background-image: url(../../../img/img.jpg);
}
#d3 {
background-clip: content-box;
background-origin: content-box;
background-image: url(../../../img/img.jpg);
}
#d4 {
background-size: contain;
background-image: url(../../../img/img.jpg);
}
#d5 {
background-image: url(../../../img/img.jpg);
background-origin: border-box;
background-repeat: space;
background-position: top;
/*显示图片底部*/
}
</style>
<div id="d1">示例文字1</div>
<br />
<div id="d2">示例文字2</div>
<br />
<div id="d3">示例文字3</div>
<br />
<div id="d4"></div>
<br />
<div id="d5"></div>效果图：
背景色渐变，包括线性渐变、圆形放射性渐变和椭圆形放射性渐变。
（1）线性渐变:
background: linear-gradient(参数1：度数或线性方向，参数2：颜色渐变);
——度数: 以图中心为原点，正上方位0deg，顺时针旋转
——线性方向: 8个方向。to bottom|to bottom right|to right|to up right|to up|to up left|to left|to bottom left
（2）圆形放射性: background-image: radial-gradient(circle,半径 at 坐标或起点位置，颜色渐变);
——半径: 以像素为单位
——坐标：坐标值，如30px 30px
——起点位置: 9方向。center center|left top|center top|right top|right center|right bottom|center bottom|left bottom|left center
（3）椭圆形放射性:
background-image: radial-gradient(ellipse,横向半径，纵向半径 at 起点位置或坐标,颜色渐变);
——横向半径，纵向半径: 以像素为单位
——起点位置: 9方向。同圆形放射性渐变。
——坐标位置：坐标值，如30px 30px
<style>
div {
widows: 200px;
height: 200px;
}
#d1 {
background: linear-gradient(to bottom, orange 0%, red 25%, yellow 50%, green 75%, black);
}
/*线性渐变*/
#d2 {
background-image: radial-gradient(circle 100px at center center, orange 0%, red 25%, yellow 50%, green 75%, black);
}
/*圆形放射性渐变*/
#d3 {
background-image: radial-gradient(ellipse 130px 100px at 130px 100px, orange 0%, red 25%, yellow 50%, green 75%, black);
}
/*椭圆形放射性渐变*/
</style>
<div id="d1"></div>
<br />
<div id="d2"></div>
<br />
<div id="d3"></div>效果图：
边框样式设置，通过border-radius实现：
border-radius : 指定圆角半径。
（1）当为一个参数时，表示4个角的圆角半径；
（2）当为两个参数时，第一个半径表示左上角和右下角，第二个半径表示右上角和左下角。
（3）当为4个角设置不同圆角半径时，使用border-top-left-radius、border-top-right-radius、border-bottom-left-radius和border-bottom-right-radius分别设置。
<style>
div {
width: 300px;
border: solid 5px chocolate;
background-color: #F0F8FF;
padding: 30px;
}
#d1 {
border: dashed 5px chocolate;
border-radius: 40px;
}
#d2 {
border-radius: 40px 0px;
}
#d3 {
border-top-left-radius: 40px;
border-bottom-right-radius: 40px;
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
}
</style>
<div id="d1">示例文字</div>
<br />
<div id="d2">示例文字</div>
<br />
<div id="d3">示例文字</div>效果图：
变形样式
变形样式可以通过设置transform实现：
transform: scale(); 缩放
transform: skew(); 斜切
transform: rotate(); 旋转
transform-origin: x.px y.px; 设置基点,默认为中心点
<style>
div {
width: 100px;
background-color: orange;
text-align: center;
padding: 30px;
}
#d2 {
transform: scale(0.7, 0.7);
}
/*水平缩放和垂直缩放*/
#d3 {
transform: skew(0deg, 10deg)
}
/*水平斜切和垂直斜切*/
#d4 {
transform: translate(30px, 30px);
}
/*水平移动和垂直移动*/
#d5 {
transform: translate(20px, 20px) rotate(30deg) scale(0.7);
}
/*多项改变*/
#d6 {
display: inline-block;
}
#d7 {
display: inline-block;
transform-origin: left bottom;
transform: rotate(30deg);
}
/*改变基点*/
</style>
<div id="d1">原始</div>
<br />
<div id="d2">缩放</div>
<br />
<div id="d3">倾斜</div>
<br />
<div id="d4">移动</div>
<br />
<div id="d5">移动+旋转+缩放</div>
<br />
<div id="d6">改变基点-旋转(原图)</div>
<div id="d7">改变基点-旋转(转变图)</div>效果图：
动画样式
动画样式的设置原生提供的有两种方式：transition和animation。它们的区别在于在渐变过程中transition仅支持开始和结尾的状态渐变，而animation支持多种过渡状态渐变。
（1）transition实现动画
<style>
div {
width: 300px;
padding: 30px;
background-color: yellow;
text-align: center;
}
#d1 {
transition: background-color 1s linear, width 1s linear;
}
/*transition:元素过渡属性 过渡时间 过渡效果*/
#d1:hover {
background-color: #D2691E;
width: 400px;
}
</style>
<div id="d1">示例文字</div>（2）animation实现动画
<style>
div {
width: 300px;
padding: 30px;
text-align: center;
border: solid 1px black;
color: powderblue;
}
@keyframes mycolor {
0% {
background-color: red;
width: 300px;
}
40% {
background-color: darkblue;
width: 330px;
}
70% {
background-color: yellow;
width: 370px;
}
100% {
opacity: 1;
background-color: red;
width: 400px;
}
}
div:hover {
animation-iteration-count: 2;
/*infinite表示无限次*/
animation-name: mycolor;
animation-duration: 3s;
animation-timing-function: ease-in;
-moz-animation-iteration-count: 2;
/*infinite表示无限次*/
-moz-animation-name: mycolor;
-moz-animation-duration: 3s;
-moz-animation-timing-function: ease-in;
-webkit-animation-iteration-count: 2;
/*infinite表示无限次*/
-webkit-animation-name: mycolor;
-webkit-animation-duration: 3s;
-webkit-animation-timing-function: ease-in;
}
</style>
<script>
var o = document.getElementById("d1");
// 动画开始时事件
o.addEventListener("webkitAnimationStart", function() {
console.log("动画开始");
})
// 动画重复运动时事件
o.addEventListener("webkitAnimationIteration", function() {
console.log("动画重复运动");
})
// 动画结束时事件
o.addEventListener("webkitAnimationEnd", function() {
this.className = "";
console.log("动画结束");
})
</script>（注）此处就不贴动态效果图了。
MediaQueries样式
mediaQueries是指根据不同的浏览器宽高，可以实现不同的显示样式布局的效果。比如同一个网页文件，根据PC端、IPAD端和手机端显示不同的布局效果。其中主要用到了@media only screen and...
测试代码：
<!DOCTYPE html>
<meta charset="utf-8" />
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#container {
width: 960px;
margin: 0px auto;
}
#wrapper {
width: 740px;
float: left;
}
#sub01 {
width: 200px;
float: left;
background-color: orange;
}
#main {
width: 520px;
float: right;
background-color: yellow;
}
#sub02 {
width: 200px;
float: right;
background-color: green;
}
#main,
#sub01,
#sub02 {
line-height: 600px;
text-align: center;
font-weight: bold;
font-size: 2em;
}
@media only screen and (min-width: 1000px) {
#container {
width: 960px;
}
#wrapper {
width: 740px;
float: left;
}
#sub01 {
width: 200px;
float: left;
}
#main {
width: 520px;
float: right;
}
#sub02 {
width: 200px;
float: right;
}
}
@media only screen and (min-width: 640px) and (max-width: 999px) {
#container {
width: 640px;
}
#wrapper {
width: 640px;
float: none;
}
#sub01 {
width: 200px;
float: left;
}
#main {
width: 420px;
float: right;
}
#main,
#sub01,
{
line-height: 400px;
}
#sub02 {
width: 100%;
float: right;
clear: both;
line-height: 150px;
margin-top: 10px;
}
}
@media only screen and (max-width: 639px) {
#container {
width: 100%;
}
#wrapper {
width: 100%;
float: none;
}
#sub01 {
width: 100%;
float: none;
}
#main {
margin-top: 10px;
width: 100%;
float: none;
}
#sub01,
#main {
line-height: 250px;
}
#sub02 {
width: 100%;
float: none;
margin-top: 10px;
line-height: 150px;
}
}
</style>
</head>
<body>
<div id="container">
<div id="wrapper">
<div id="sub01">
SUB 01
</div>
<div id="main">
MAIN
</div>
</div>
<div id="sub02">
SUB 02
</div>
</div>
</body>
<script>
</script>
</html>效果图：
滤镜样式
滤镜样式设置通过filter实现，测试代码如下：
<!DOCTYPE html>
<meta charset="utf-8" />
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div {
display: flex;
flex-direction: row;
}
figure {
width: 50%;
text-align: center;
color: red;
}
#f2 {
/*filter: grayscale(100%);
-webkit-filter: grayscale(100%);*/
/*灰度滤镜*/
/*filter: sepia(100%);
-webkit-filter: sepia(100%);*/
/*棕褐色滤镜*/
/*filter: saturate(200%);
-webkit-filter: saturate(200%);*/
/*饱和度滤镜*/
filter: hue-rotate(180deg);
-webkit-filter: hue-rotate(180deg);
/*光环滤镜*/
/*filter: invert(100%);
-webkit-filter: invert(100%);*/
/*颜色翻转滤镜*/
/*filter: opacity(10%);
-webkit-filter: opacity(10%);*/
/*透明度滤镜*/
/*filter: contrast(200%);
-webkit-filter: contrast(200%);*/
/*对比度滤镜*/
/*filter: blur(2px);
-webkit-filter: blur(2px);*/
/*模糊滤镜*/
/*filter: drop-shadow(4px -4px 6px purple);
-webkit-filter: drop-shadow(4px -4px 6px purple);*/
/*阴影滤镜*/
}
</style>
</head>
<body>
<div>
<figure id="f1">
<img src="../../../img/img.jpg" />
<figcaption>原图</figcaption>
</figure>
<figure id="f2">
<img src="../../../img/img.jpg" />
<figcaption>滤镜</figcaption>
</figure>
</div>
</body>
<script>
</script>
</html>效果图：
定位样式
position属性规定了元素的定位类型，通过定位，可准确地定义元素相对于其正常位置而应该出现的位置，或者是相对于父元素、另一元素和浏览器窗口等的位置。
position属性主要包含有4个属性值，分别为static、relative、absolute、fixed。
| 属性值 | 描述 | 所属类别 |
| static | 默认值，元素遵循默认的文档流。 | 默认 |
| relative | 元素遵循默认的文档流。 相对于元素的原位置进行移动，周围元素忽略该元素的移动。 需要设置top、bottom、left、right值进行定位。 | 相对定位 |
| absolute | 元素脱离正常文档流。 相对于包含该元素的最近一级的非静态定位（即static默认值）的元素进行定位，若不满足条件，则会根据最外层的window进行定位。 需要设置top、bottom、left、right值进行定位。 | 绝对定位 |
| fixed | 元素脱离正常文档流。 相对于最外层的window进行定位，固定在屏幕上的某个位置，不因屏幕滚动而消失。 需要设置top、bottom、left、right值进行定位。 | 绝对定位 |
（注）文档流是指标签中会默认从左至右，从上到下排列元素的规则，如div元素默认情况会独占一行。
参考案例：
<!DOCTYPE html>
<meta charset="utf-8" />
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="holder.js"></script>
<style>
#all {
width: 500px;
height: 400px;
border: dashed 5px black;
margin-left: 100px;
position: absolute;
}
/*黑色虚线边框*/
#container {
width: 300px;
height: 300px;
border: dashed 5px orange;
margin-left: 100px;
/*position: absolute;*/
}
/*橙色虚线边框*/
#d1 {
background-color: yellow;
width: 100px;
height: 100px;
position: absolute;
top: 0px;
left: 0px;
}
#d2 {
background-color: #B0E0E6;
width: 100px;
height: 100px;
position: relative;
top: 0px;
left: 100px;
}
#d3 {
background-color: #FFC0CB;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="all">
<div id="container">
<div id="d1">
div1
</div>
<div id="d2">
div2
</div>
<div id="d3">
div3
</div>
</div>
</div>
</body>
</html>效果图：
解析：上例中#d1为absolute布局，所以它以最近一级非静态定位的父结构元素为参考坐标系，即黑色虚线边框的#all。#d2为relative布局，所以它以当前容器为参考坐标系，其位移不会影响到周围元素，即#d3。
567
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
