1、css的重要模块
- 选择器
- 盒模型
- 背景和边框
- 文字特效
- 2D/3D转换
- 动画
- 多列布局
- 用户界面
1、css边框和圆角
border-radius: 被用于创建圆角
box-shadow: 被用来添加阴影
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow 必需的。水平阴影的位置。允许负值
v-shadow 必需的。垂直阴影的位置。允许负值
blur 可选。模糊距离
spread 可选。阴影的大小
color 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset 可选。从外层的阴影（开始时）改变阴影内侧阴影
border-image: 指定一个图片作为边框！
2、css3背景
background-image 属性添加背景图片。
background-size 指定背景图像的大小
background-origin 属性指定了背景图像的位置区域
background-clip 背景剪裁属性是从指定位置开始绘制
background-image实例
<style>
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
padding: 15px;
}
// 或者
#example1 {
background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
padding: 15px;
}
</style>
background-origin实例
<style>
div
{
border:1px solid black;
padding:35px;
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-position:left;
}
#div1
{
background-origin:border-box;
}
#div2
{
background-origin:content-box;
}
</style>
background-clip实例
<style>
#example2 {
border: 10px dotted black;
padding:35px;
background: yellow;
background-clip: padding-box;
}
#example3 {
border: 10px dotted black;
padding:35px;
background: yellow;
background-clip: content-box;
}
</style>
3、CSS3渐变
线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients）- 由它们的中心定义
渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）
background-image: linear-gradient(direction, color-stop1, color-stop2, …);
CSS3 渐变也支持透明度（transparent），可用于创建减弱变淡的效果。
<style>
#grad1 {
height: 100px;
background-color: red; /* 浏览器不支持的时候显示 */
background-image: linear-gradient(0deg, red, yellow);
}
#grad2 {
height: 100px;
background-color: red; /* 浏览器不支持的时候显示 */
background-image: linear-gradient(90deg, red, yellow);
}
#grad3 {
height: 100px;
background-color: red; /* 浏览器不支持的时候显示 */
background-image: linear-gradient(180deg, red, yellow);
}
#grad4 {
height: 100px;
background-color: red; /* 浏览器不支持的时候显示 */
background-image: linear-gradient(-90deg, red, yellow);
}
</style>
repeating-linear-gradient() 函数用于重复线性渐变：
```bash
#grad1 {
height: 200px;
background-color: red; /* 浏览器不支持的时候显示 */
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}
#grad2 {
height: 200px;
background-color: red; /* 浏览器不支持的时候显示 */
background-image: repeating-linear-gradient(45deg,red,yellow 7%,green 10%);
}
#grad3 {
height: 200px;
background-color: red; /* 浏览器不支持的时候显示 */
background-image: repeating-linear-gradient(190deg,red,yellow 7%,green 10%);
}
<style>
#grad1 {
height: 150px;
width: 200px;
background-color: red; /* 浏览器不支持的时候显示 */
background-image: radial-gradient(red 5%, green 15%, blue 60%); /* 标准的语法（必须放在最后） */
}
#grad2 {
height: 150px;
width: 200px;
background-color: red; /* 浏览器不支持的时候显示 */
background-image: radial-gradient(circle, red, yellow, green); /* 标准的语法（必须放在最后） */
}
</style>
size 参数定义了渐变的大小。它可以是以下四个值：
closest-side
farthest-side
closest-corner
farthest-corner
#grad1 {
height: 150px;
width: 150px;
background-color: red; /* 浏览器不支持的时候显示 */
background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}
#grad2 {
height: 150px;
width: 150px;
background-color: red; /* 浏览器不支持的时候显示 */
background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}
#grad3 {
height: 150px;
width: 150px;
background-color: red; /* 浏览器不支持的时候显示 */
background-image: radial-gradient(closest-corner at 60% 55%, red, yellow, black);
}
repeating-radial-gradient() 函数用于重复径向渐变：
#grad1 {
height: 200px;
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}
4、css文本效果
text-shadow ： text-shadow属性适用于文本阴影
box-shadow 属性适用于盒子阴影
·h-shadow v-shadow blur spread color insect
·水平阴影 垂直阴影 模糊 阴影尺寸 颜色 外阴影转到内阴影
text-overflow 属性指定应向用户如何显示溢出内容
word-wrap 规定非中日韩文本的换行规则。
word-break 允许对长的不可分割的单词进行分割并换行到下一行。
word-break ：keep-all; 不分割单词换行；
word-break ： break-all： 分割单词换行
<style>
div.test
{
white-space:nowrap;
width:12em;
overflow:hidden;
border:1px solid #000000;
}
</style>
</head>
<body>
<p>以下 div 容器内的文本无法完全显示，可以看到它被裁剪了。</p>
<p>div 使用 "text-overflow:ellipsis":</p>
<div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div>
<p>div 使用 "text-overflow:clip":</p>
<div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div>
<p>div 使用自定义字符串 "text-overflow: >>"(只在 Firefox 浏览器下有效):</p>
<div class="test" style="text-overflow:'>>';">This is some long text that will not fit in the box</div>
</body>
</html>
5、css2D转换
translate() 根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。 如：translate值（50px，100px）是从左边元素移动50个像素，并从顶部移动100像素。（元素平移）
rotate() 在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。如：rotate值（30deg）元素顺时针旋转30度。（元素在原有位置上本身角度旋转）
scale() 该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：如：scale（2,3）转变宽度为原来的大小的2倍，和其原始大小3倍的高度。
skew() 包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。
skewX();表示只在X轴(水平方向)倾斜。；skewY();表示只在Y轴(垂直方向)倾斜。
matrix() 方法把2D变换方法合并成一个。matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。
skew()
<style>
div#div2
{
-webkit-transform:skew(10deg,20deg); /* Safari and Chrome */
}
</style>
6、css3D转换
rotateX() 围绕其在一个给定度数X轴旋转的元素。
rotateY() 围绕其在一个给定度数Y轴旋转的元素。
7、css过渡
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点，必须规定两项内容：
1、指定要添加效果的CSS属性
2、指定效果的持续时间。
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s, height 2s, transform 2s;
}
div:hover {
width: 200px;
height: 200px;
transform: rotate(180deg);
}
</style>
<style>
div
{
width:100px;
height:100px;
background:red;
// 可用简写属性替代 transition: width 1s linear 2s;
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
}
div:hover
{
width:200px;
}
</style>
transtion简写属性对照
8、css动画
当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。
指定至少这两个CSS3的动画属性绑定向一个选择器：
规定动画的名称 、规定动画的时长
必须定义动画的名称和动画的持续时间。如果省略的持续时间，动画将无法运行，因为默认值是0。
<style>
div
{
width:100px;
height:100px;
background:red;
-webkit-animation:myfirst 2s; // 动画名称和时间
}
@-webkit-keyframes myfirst
{
from {background:red;} // 0%
to {background:yellow;} // 0%
}
// 多个状态
@keyframes myfirst
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
// 背景色和位置
@keyframes myfirst
{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
</style>
div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
}
// 等同于
div
{
animation: myfirst 5s linear 2s infinite alternate;
}
9、CSS3 多列
column-count 属性指定了需要分割的列数。
column-gap 属性指定了列与列间的间隙。
column-rule-style 属性指定了列与列间的边框样式：
column-rule-width 属性指定了列与列间的边框厚度：
column-rule-color 属性指定了列与列间的边框颜色：
column-rule 属性是 column-rule-* 所有属性的简写。
column-span 指定元素跨越多少列
column-width 属性指定了列的宽度。
<style>
.newspaper
{
column-count:3;
column-gap:20px;
column-rule-style: solid;
column-rule-width: 1px;
column-rule-color: red;
column-width:200px;
}
h2
{
column-span:all;
}
</style>
</head>
<body>
<p><b>注意:</b> Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。</p>
<div class="newspaper">
<h2>英国维斯米斯特教堂碑文</h2>
当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。
</div>
</body>
10、CSS3 多媒体查询
媒体查询可用于检测很多事情，例如：
viewport(视窗) 的宽度与高度
设备的宽度与高度
朝向 (智能手机横屏，竖屏) 。
分辨率
目前很多针对苹果手机，Android 手机，平板等设备都会使用到多媒体查询。
// 实例在屏幕可视窗口尺寸小于 600 像素时将 div 元素隐藏：
@media screen and (max-width: 600px) {
div.example {
display: none;
}
}
// 实例在屏幕可视窗口尺寸大于 480 像素时将菜单浮动到页面左侧：
@media screen and (min-width: 480px) {
leftsidebar {width: 200px; float: left;}
main {margin-left:216px;}
}
// 览器的宽度在 520 到 699px, 邮箱链接前添加邮件图标：
@media screen and (max-width: 699px) and (min-width: 520px) {
ul li a {
padding-left: 30px;
background: url(email-icon.png) left center no-repeat;
}
}
扫一扫
1200
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
