CSS3
2018-05-09 本文已影响0人
黑色的五叶草
- 圆角边框 和 圆形
- 圆角属性：
border-radius - 当
border-radius像素值达到width和height的一半时，变为圆形
- 边框阴影
-
box-shadow: 10px 10px 5px #888888;
第一个参数表示：水平向右偏移距离
第二个参数表示：垂直向下偏移距离
第三个参数表示：模糊距离
第四个参数表示：阴影颜色
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
/* 双冒号是CSS3中为了区分伪类新增的，用法一样 */
content: '';
position: absolute;
z-index: -1;
/* hide shadow behind image */
-webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
width: 70%;
left: 15%;
/* one half of the remaining 30% */
height: 100px;
top: 0;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
边框阴影
- 2D 转换
-
translate() 方法：偏移
translate
-
rotate() 方法：旋转
原始位置
旋转位置
-
scale() 方法：缩放
scale
-
skew() 方法：倾斜
原始位置
倾斜位置
- 3D 转换
- rotateX()
- rotateY()
- 背景
- background-image：背景图
#div1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
padding: 15px;
}
/*
#div1 {
background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
padding: 15px;
}
*/
image.png
- background-size：规定背景图像的尺寸
background-size:100% 100%;
image.png
image.png
- background-origin：背景图像的定位区域
参数：content-box、padding-box、border-box
background-origin:content-box;
image.png
- background-clip：属性规定背景的绘制区域
参数：content-box、padding-box、border-box
background-clip:content-box;
- 背景色渐变
浏览器支持两种类型的渐变：
1.线性渐变 (linear)，通过 linear-gradient 函数定义
2.径向渐变 (radial)，通过 radial-gradient 函数定义- linear-gradient(渐变轴，color1,color2...)
background: linear-gradient(direction, color-stop1, color-stop2, ...);
background: linear-gradient(red, blue); /* 从上到下 */
background: linear-gradient(to right, red , blue); /* 从左到右 */
background: linear-gradient(to bottom right, red , blue); /* 左上到右下 ，从红色渐变到蓝色*/
background: linear-gradient(180deg, red, blue); /* 从上到下 */
background: linear-gradient(red, green, blue); /* 从上到下均匀分布 */
background: linear-gradient(red 10%, green 85%, blue 90%); /* 百分比是色标的位置 */
background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)), url(http://foo.com/image.jpg); /* 透明到不透明 */
image.png
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html, body {
margin: 0;
padding: 0;
}
div {
width: 100%;
height: 100%;
height: 1011px;
background: linear-gradient(180deg, red, blue); /* 从上到下 */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
image.png
- radial-gradient(圆心位置，形状 大小，color1,color2...)
径向渐变(Radial gradients)由其中心点、边缘形状轮廓及位置、色值结束点（color stops）定义而成
background: radial-gradient(shape size at position, start-color, ..., last-color);
redial-gradient
- repeating-linear-gradient()：
background: repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...);
repeating-linear-gradient
image.png
- 过渡
transition
详见：https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition - 动画
- @keyframes
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@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;}
}
