css3基础总结
选择器
段落中的第一个字符：p::first-letter{font-size:40px;}段落中的第一行：p::first-line{color:red;}选中时的样式：p::selection{background-color:red;color:green;}p::before{content:' ';display:block;border:1px solid #ccc;height:30px;}目标伪类p:target{background-color}
css3文本增强
文本阴影：text-shadow:x坐标，y坐标，模糊度，阴影颜色；2px,3px,4px,green;
利用这个可以做出立体的感觉：text-shadow:2px,3px,4px,green,-2px,-3px,-4px,green;
或者直接两个参数也可以有立体的感觉：text-shadow:2px,3px,#fff;
- 多样式参考地址 www.w3cplus.com/blog/52.html;
文本溢出：text-overflow:ellipsis;(必须要和overflow:hidden;来配合使用) 多出的部分用省略号显示文本不换行：white-space:nowrap;
圆角边框：border-radius- 登陆按钮例子：
height:40px;
background-color:red;
border:2px solid red;
border-radius:20px;
text-align:center;
color:#fff;
line-height:40px;
- 综合使用
border-radius: 100px 25px 50px 50px / 50px 25px 50px 25px; x轴方向/y轴方向
边框阴影
box-shadow:x坐标，y坐标，模糊度，扩展量（一般的时候省略和原盒子一般大），颜色;（当偏移值都为负值的时候就是内阴影）
- 图片上加阴影效果
img-box{
200px;
height:200px;
overflow:hidden;
margin:100px;
border:2px solid #ccc;
box-shadow:inset 3px 3px 9px 30px rgba(88,88,88,.3);
}
img{
100%;
z-index:-1;
position:relative;
}
边框背景图
- border-image-source:url();
- border-image-source: linear-gradient(to top, red, yellow);
- 图片切割：
border-image-slice:27;/* 27指的是角上的图的大小*/
border-image-repeat:space;
/* 可用属性有：
stretch 拉伸图片以填充边框, 也是默认值。
repeat 平铺图片以填充边框。
round 平铺图像。当不能整数次平铺时，根据情况放大或缩小图像。
space 平铺图像 。当不能整数次平铺时，会用空白间隙填充在图像周围（不会放大或缩小图像） */
- 实例
border-image-repeat: repeat;
/* 设置水平：spac 垂直为：round */
border-image-repeat: space round;
- 边框背景图例子：
<style>
.box {
380px;
height: 380px;
/* 必须设置border的属性，不然边框背景图的设置就没有效果 */
border: 30px solid #cf0;
/*border-image: url(./img/border.png) 27 space;*/
border-image-source: url(./img/border.png);
border-image-repeat: round;
border-image-slice: 27;/*四个方向都是27像素的切割*/
}
</style>
<div class="box">
12344
</div>
- 边框图片合写样式
语法：border-image: source slice outset repeat;
- 例如
/* 前提是必须写边框属性 */
border-image: url("/images/border.png") 30 30 repeat;
border-image: url("/images/border.png") 30 20 19 repeat round;
border-image: url("/images/border.png") 30 10 20 18 space stretch;
border-image: url("/images/border.png") 30 repeat;
新的盒模型
之前的盒模型是content-box (之前的宽度是内容的宽度加上内边距的宽度加上boder的宽度，就是盒子的一个完整的宽度)
box-sizing在新的盒模型中可以指定content-box和border-box
也就是border-sizing:content-box; box-sizing:border-box;
因为在一个大盒子中可能会出现小盒子的边框，但是有的会掉下来，所以这时候就用box-sizing:border-box;这时候如果边框增大这时候就会挤压内容区域的大小
新的背景属性
background-size设置背景图片的尺寸
background-size:cover;
/*自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏 （铺满整个div） */
background-size:contain;
/* 会自动调整缩放比例，保证图片始终完整显示在背景区域(把图片能完整的显示背景图) */
background-size: 100% 100%;
/* 可以设置具体的值或者是百分比，可以是两个值第一个是水平方向第二个是垂直方向。 */
background-origin设置背景定位的原点
背景图默认是在padding处开始显示
background-origin:content-box;
/* 背景图从内容区域开始显示 */
background-origin:padding-box;
/* 背景图从内边距区域开始显示 */
background-origin:border-box;
/* 背景图从边框区域开始显示(边框的颜色是压在图片上边的 可以将边框的宽度设大点就能看出来了) */
background-clip:设置背景区域裁剪（一般和background-origin配合使用）
background-clip:content-box;
background-clip:padding-box;
background-clip:border-box;
/* border-box裁切边框以内为背景区域；
padding-box裁切内边距以内为背景区域；
content-box裁切内容区做为背景区域； */
多背景图应用
在设置css的background的图片的时候，可以设置多个背景图，背景图之间用逗号隔开。而且背景图可以用线性渐变代替。- 示例
.box {
300px;
height:300px;
background: linear-gradient(to right, transparent, red),
url("./img/a.jpg") right bottom no-repeat,
url("https://mdn.mozillademos.org/files/15525/critters.png") no-repeat;
/* background-size:cover; */
padding:100px;
background-origin:border-box;
background-clip:content-box;
/* cover: 铺满整个div */
/* background-size: cover; */
/* 把图片缩放到能完整的显示整个背景图 */
/* background-size: contain; */
/* 设置具体的宽度和高度，可以是百分比或者像素 */
/* background-size: 200px 50%; */
}
渐变
1.线性渐变
- linear-gradient()方法，第一个参数方向，后面参数是渐变的颜色，颜色可以是多个颜色后面可以设置百分比表示渐变到盒子的位置。
- liner-gradient(to left/top/right/bottom)从x的反方向位置到具体的x位置
示例：background:liner-gradient(to left,red,green)
background: linear-gradient(to right, red, blue 20%, white); 意思是向右渐变，颜色由红色渐变到蓝色（20%的位置为蓝色）然后到白色
- 线性渐变还可以设置按照某个角度进行渐变（deg,角度）
- 渐变还支持颜色的透明度：
background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1));
示例代码
.box-line {
color: red;
200px;
height: 200px;
border: 1px solid #089;
float: left;
background: linear-gradient(0deg, black, white);
}
.box-line:nth-child(1) {
background: linear-gradient(90deg, black, white);
}
.box-line:nth-child(1) {
background: linear-gradient(135deg, black, white);
}
.box-line:nth-child(2) {
background: linear-gradient(180deg, black, white);
}
.box-line:nth-child(3) {
background: linear-gradient(270deg, black, white);
}
- 设置多个渐变的颜色
background: linear-gradient(45deg, blue, red 50%, yellow 70%, purple);
2.径向渐变
- 径向渐变使用 radial-gradient 函数语法.
background: radial-gradient(red, yellow, rgb(30, 144, 255));
设置百分比 background: radial-gradient(red, yellow 15%, rgb(30, 144, 255));
示例代码
.box {
/* 像线性渐变一样，色标之间是等间距的 */
background: radial-gradient(red, yellow, rgb(30, 144, 255));
/* 椭圆使用最近端的值, 这就意味着从开始点(中心点)到封闭盒子的最近端的距离来指定椭圆的尺寸。 */
background: radial-gradient(ellipse closest-side, red, yellow 10%, #1E90FF 50%, white);
/* 渐变的尺寸为起始点到封闭盒模型最远端的起始点的距离。 */
background: radial-gradient(ellipse farthest-corner, red, yellow 10%, #1E90FF 50%, white);
/* 指定开始点(中心)和最近端的距离为圆的尺寸。 */
background: radial-gradient(circle closest-side, red, yellow 10%, #1E90FF 50%, white);
/*100px的渐变半径 圆心点坐标 50px 50px*/
background: radial-gradient(100px at 50px 50px, rgba(0,0,255,1), rgba(0,0,255,.5));
}
3.重复渐变
重复线性渐变：background: repeating-linear-gradient(-45deg, red, red 5px, white 5px, white 10px);
重复径向渐变：background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
过渡 transition
-
transition-property:过度的属性,比如width或者是height(如果是all表示所有的都进行过渡动画)
-
transition-duration:0.5s;动画间隔时间,默认值为 0s ，表示不出现过渡动画
-
transition-timing-function:可取值为：ease、ease-in、ease-out、ease-in-out、linear、step-start、step-end、steps(4, end)等.一般用线性ease-in的比较多
-
transition-delay:开始作用之前需要等待的时间
-
transition: margin-right 4s, color 1s; 应用两个过渡属性的时候
-
transition: margin-right 4s ease-in-out 1s;
.box{
100px;
height: 100px;
border: 1px solid #ccc;
margin:10px 10px;
transition: margin-left 2s ease-in-out 0.1s;
}
.box:hover{
margin-left: 200px;
}
过渡合写：transition: all 0.5s ease-out 0.5s;(可过渡的属性，过度的持续时间，动画函数，delay延迟执行的时间)
2D转换 transform
- 转换原点 transform-origin 设置转换图形的原点。可以设置两个值，类型可以是：百分比、像素、位置名（left、top、bottom、right）
设置旋转的中心点：transform-origin: 0 0;或者是100% 100%;(右下角)
- 移动 translate(x, y) 可以改变元素的位置，x、y可为负值，带像素坐标。
transform:translate(10px,12px);//移动
- 缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放，x、y的取值可为小数，不可为负值，不带参数。
transform:scale(2,0.5);//缩放 水平扩大2倍 垂直缩小0.5倍
- 旋转 rotate(deg) 可以对元素进行旋转，正值为顺时针，负值为逆时针；值可选：30deg或者0.5turn。
transform:rotate(30deg);//默认围绕中心旋转30度
- 倾斜 skew(deg, deg) 可以使元素按一定的角度进行倾斜。单位deg
如果有多个转换操作需要用空格隔开多个css变换函数。
li{
100px;
height:100px;
border:1px solid #ccc;
margin:10px;
transition:all 1s liner;
}
li:nth-child(1):hover{
transform:translate(10px,12px);
}
转换和过渡合用
transition:transform 1s ease;
transform:rotate(30deg);
- 案例 （旋转的扑克牌）
<ul class="list">
<li class="item"><img src="./images/k.jpg" alt=""></li>
<li class="item"><img src="./images/k.jpg" alt=""></li>
<li class="item"><img src="./images/k.jpg" alt=""></li>
<li class="item"><img src="./images/k.jpg" alt=""></li>
<li class="item"><img src="./images/k.jpg" alt=""></li>
<li class="item"><img src="./images/k.jpg" alt=""></li>
</ul>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
.list .item{
position: absolute;
left: 50%;
top: 50%;
150px;
height: 200px;
margin-top: -100px 0 0 -75px;
transition:transform 0.9s ease;
transform-origin: left top; //旋转中心原点
}
.list .item img{
100%;
height: 100%;
}
.list:hover .item:nth-child(6){
transform: roitate(60deg);
}
.list:hover .item:nth-child(5){
transform: roitate(120deg);
}
.list:hover .item:nth-child(4){
transform: roitate(180deg);
}
.list:hover .item:nth-child(3){
transform: roitate(240deg);
}
.list:hover .item:nth-child(2){
transform: roitate(300deg);
}
.list:hover .item:nth-child(1){
transform: roitate(360deg);
}
</style>
3D转换
- 移动 translate3d(tx, ty, tz) 可以改变元素的位置，x、y,z可为负值，带像素坐标。translate3d(10px,0px,0px) 。z方向的移动必须配合perspective。三个方向分别可以对应：translateX、translateY、translateZ
- 缩放 scale3d(x, y,z) 可以对元素进行x,y, z三个方向的缩放，x、y、z的取值可为小数，不可为负值，不带参数。也可以用scaleX、scaleY、scaleZ替代
- 旋转 rotate3d(x1,y1,z1,a) 可以对元素进行x、y、z三个方向的旋转，a正值为顺时针，负值为逆时针；值可选：30deg或者0.5turn。c ss3的3d旋转满足左手坐标系的法则，掌心指向的方向就是正方向。x1、y1、z1的取值0-1，表示旋转的矢量。一般直接用rotateX、rota teY、rotateZ代替。
- perspective视距,作为transform的函数，作用于自身，必须写在最前面。表示观察者和 z平面的距离。
注意：在Z轴上是有视距的
例子
.box{
100px;
height:100px;
border:1px solid #ccc;
margin:100px auto;
transition: transform 1s ease;
}
.box:hover{
transform:perspective(1000px) translate3d(10px,-20px,100px );
/* z轴越大 看到的矩形越大 */
}
/* 也可以给body设置perspective body{perspective:1000;}这样transform中就不用写了 */
css3中旋转后都是按照左手坐标系进行运转。旋转的正值的方向就是：手指弯曲的方向。
- 单独沿着某个轴来旋转
<style type="text/css">
body{
perspective:1000px;
}
.box{
100px;
height: 100px;
border: 1px solid #ccc;
transition:all 1s ease;
margin: 100px auto;
}
.box:hover{
/*transform:rotateX(-30deg);*/
transform:rotateY(-30deg);
/*transform:rotateZ(-30deg);*/
}
</style>
<body>
<div class="box"></div>
</body>
案例：3D立方体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cube</title>
<style>
html, body, div {
padding: 0;
margin: 0;
}
.cube {
position: relative;
margin: 200px auto;
202px;
height: 202px;
perspective: 1000px;
/* 设置显示效果为3d效果 */
transform-style: preserve-3d;
transform: rotateX(-10deg) rotateY(20deg);
}
.cube div {
border: 1px solid #ccc;
200px;
height: 200px;
position: absolute;
left: 0;
right: 0;
line-height: 200px;
text-align: center;
opacity: 0.7;
}
.cube .right {
transform: rotateY(90deg) translateZ(100px);
background-color: blue;
}
.cube .left {
transform: rotateY(90deg) translateZ(-100px);
background-color: red;
}
.cube .top {
transform: rotateX(90deg) translateZ(100px);
background-color: yellow;
}
.cube .bottom {
transform: rotateX(90deg) translateZ(-100px);
background-color: lightcoral;
}
.cube .front {
transform: translateZ(100px);
background-color: purple;
}
.cube .back {
transform: translateZ(-100px);
background-color: green;
}
</style>
</head>
<body>
<div class="cube">
<div class="left">left</div>
<div class="right">right</div>
<div class="top">top</div>
<div class="bottom">bottom</div>
<div class="front">front</div>
<div class="back">back</div>
</div>
</body>
</html>
案例：3D导航案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3D导航案例</title>
<style>
html, body, div, ul, li {
margin: 0;
padding: 0;
}
ul { list-style: none; }
.nav .nav-item {
float: left;
150px;
height: 30px;
/* border: 1px solid #ccc; */
text-align: center;
line-height: 30px;
position: relative;
/* 要有3d的效果：需要设置以下两个属性 */
perspective: 1000px;
transform-style: preserve-3d;
transition: transform 0.6s ease;
}
.nav .nav-item:hover {
transform: rotateX(-90deg);
}
/* 约定： a标签是立方体的前面。 */
/* div是立方体的上面 */
.nav .nav-item a, .nav .nav-item .des {
150px;
height: 30px;
opacity: .7;
color: #fff;
position: absolute;
left: 0;
top: 0;
}
.nav .nav-item a {
display: block;
background-color: darkcyan;
text-decoration: none;
transform: translateZ(15px)
}
.nav .nav-item .des {
background-color: blue;
transform: rotateX(90deg) translateZ(15px);
}
</style>
</head>
<body>
<ul class="nav">
<li class="nav-item">
<a href="javascript:">item1</a>
<div class="des">item==1</div>
</li>
<li class="nav-item">
<a href="javascript:">item2</a>
<div class="des">item==2</div>
</li>
<li class="nav-item">
<a href="javascript:">item3</a>
<div class="des">item==3</div>
</li>
<li class="nav-item">
<a href="javascript:">item4</a>
<div class="des">item==4</div>
</li>
<li class="nav-item">
<a href="javascript:">item5</a>
<div class="des">item==5</div>
</li>
<li class="nav-item">
<a href="javascript:">item6</a>
<div class="des">item==6</div>
</li>
</ul>
</body>
</html>
/* 要有3d的效果：需要设置以下两个属性 */
perspective: 1000px;
transform-style: preserve-3d;