1：关于文本缩进，块级用text-indent，内联用margin-left
2：关于圆角边框
border-radius: 20px;
关于圆角的形成 1:从指定角顶端向内部出发，向内部引出垂直半径和水平半径； 2：将水平半径和垂直半径相较于元素内部的一点（圆心点）； 3：以改点为圆心，指定的水平半径和垂直半径画圆或椭圆； 4：与边框相交的部分就是边框圆角；
设置圆角完整格式：2个参数，8个值 border-radius: 20px 20px 20px 20px 20px 20px 20px 20px; 设置圆角完整格式：1个参数，4个值 border-radius: 10px 20px 30px 40px ;
设置圆角完整格式：1个参数，2个值（代表左上角和右上角） border-radius: 20px 60px;
设置圆角格式：1个参数 1个值(四个角的参数) border-radius: 20px;
代码演示：style样式表中
#box1{
width: 200px;
height: 200px;
border: 1px solid red;
border-radius: 20px;
#box2{
width: 200px;
height: 40px;
border:1px solid red;
border-radius: 10px 10px 0px 0px ;
}
#box3{
width: 200px;
height: 400px;
border:1px solid black;
border-radius: 0px 0px 10px 10px ;
}
#box4{
width: 200px;
height: 200px;
border: 1px solid yellow;
border-radius: 100px;
}
#box5{
width: 100px;
height: 200px;
border: 1px solid blue;
border-left: 100px solid blue;
/*一半实心圆，一半空心圆*/
border-radius: 100px;
}
</style>
3:关于css渐变
CSS渐变、style样式表中建立样式
#box1{
width: 200px;
height: 200px;
border: 1px solid red;
margin: 50px auto;
线性渐变
火狐浏览器
background-image: -moz-linear-gradient(red, orange, yellow, green);
谷歌浏览器
background-image: -webkit-linear-gradient(red, orange, yellow, green);
欧朋浏览器
background-image: -o-linear-gradient(red, orange, yellow, green);
标准浏览器
background-image: linear-gradient(red, orange, yellow, green);
渐变从下往上 to top/ 从左往右 to right/ 从右往左 to left background: linear-gradient( to top,red, orange);
角度渐变 用度数来设置 background: linear-gradient(0deg,red, blue);
用英文单词的形式来设置角度渐变 background: linear-gradient(to left top,blue, orange);
重复设置线性渐变 background: repeating-linear-gradient(red 20% ,blue 60%);
4:关于径向渐变
举例说明
<style>
#box{
width:200px;
height: 300px;
border: 1px solid red;
margin: 100px auto;
圆形渐变
background: radial-gradient(circle,red,blue);
background: radial-gradient(farthest-side circle at 20% 20% ,red, blue);
中心(at center center)
语法：(at x y)都是从左上角圆点为参考点
x y可以是像素，也可以是百分比 10% 50%
大小
最近边:closest-side
最远边:farthest-side
最近角:closest-corner
最远角:farthest-corner
形状
ellipse 椭圆，默认值
circle 圆形
}
</style>
5：浏览器私有前缀怎么设置
举例说明
<style>
div{
font-size: 30px;
镂空效果
-web谷歌前缀/-moz火狐前缀 / -ms IE浏览器前缀
-webkit-text-stroke: 1px red;
position: absolute;
color:transparent;
在实际使用中，日常书写正确格式，将标准使用格式写在最后
-moz-animation: ;火狐支持
-ms-accelerator: ;IE支持
-o-animation: ; 欧朋支持
-webkit-animation: ;谷歌支持
animation: ;
}
</style>
6：关于文字阴影与盒子阴影
盒子阴影 #box1{ font-size: 100px; margin-top: 100px; 水平偏移位置，垂直偏移位置，模糊度，阴影颜色 重合阴影部分，用逗号分割 text-shadow: 1px 1px 3px red,2px 3px 3px orange; }
#box3{
width: 200px;
height: 200px;
margin-top: 20px;
background-color: #dd0378;
box-shadow:-5px -5px 5px 20px black ;
box-shadow: 1px 2px 3px inset blue;内置阴影
}
#box4{
width: 100px;
height: 40px;
color: white;
font-weight: bold;
background-color: green;
margin: 50px auto;
line-height: 40px;
text-align: center;
border-radius: 10px;
box-shadow: 2px 2px 3px #000000;
}
#box4:hover{
box-shadow: 1px 2px 3px #000000 inset ;
}
#box5{
width: 200px;
height: 200px;
margin: 50px auto;
border-radius: 100px;
border: 1px solid red;
box-shadow: 0 0 5px 5px red,0 0 5px 10px orange,0 0 5px 15px yellow,0 0 5px 20px green;
}
盒子阴影
格式：box-shadow:阴影1 ，阴影2，
阴影的格式
水平偏移位置，垂直偏移位置，模糊度，外延值，颜色（内置阴影）
亮度模糊边框演示
#box6{
width: 300px;
height: 400px;
background-color: #ffffff;
margin: 100px auto;
border-radius: 10px;
box-shadow: 0 0 3px 3px #ffffff;
}
</style>
7：关于 animation动画
举例说明
<style>
body{
padding: 0px;
margin: 0px;
}
#banner{
width: 2100px;
border:1px solid blue;
height: 400px;
overflow: hidden;
}
#box{
border: 5px solid #000000;
width: 10500px;
height:400px;
加入动画 animation 动画名字 myname 动画完成时间 一般用秒数来计时 动画执行次数 无限播放 infinite 匀速播放 linear / 延时1秒钟 alternate 播放完成第一遍后进倒放
动画执行函数，过度是一样的 animation: myname 10s infinite linear 1s alternate; }
#box>img{
float: left;
}
#box:hover{
动画暂停属性，默认为running
animation-play-state: paused;
}
动画函数 @keyframes myname { 25%{ margin-left: -2100px; } 50%{ margin-left: -4200px; } 75%{ margin-left: -6300px; } 100%{ margin-left: -8400px; } }
8:关于transform 3D 效果
<style>
#box1{
width: 200px;
height: 200px;
margin: 20px auto;
border:1px solid red;
}
#box1:hover{
水平移动和垂直移动函数：translate，支持一个参数，代表水平移动
transform:translate(30px);
transform: translate(30px,50px);
}
#box2{
width: 200px;
height: 500px;
background: #dd0378;
border: 1px solid red ;
margin: 100px auto ;
}
#box2:hover{
transform: translate(0px,-10px);
box-shadow: 0px 0px 5px 5px lightgray ;
旋转角度 单位：deg 旋转只支持一个参数 transform:rotate(-20deg) ;
缩放，直接给倍数，支持两个参数，即水平方向和垂直方向的
也支持水平方向和垂直方向给同一个参数
transform:scale(2);
}
#box3{
width: 650px;
height: 112px;
border:1px solid blue;
background: url("../img/javajb.png") no-repeat;
margin: 100px auto;
过渡放大的速度
transition: all 1s;
}
#box3>div{
border: 1px solid red;
float: left;
margin-left: 25px;
margin-top: 10px;
}
#box3:hover{
transform: scale(1.2);
}
#box4{
width: 200px;
height: 200px;
border:1px solid blue;
margin: 100px auto;
}
#box4:hover{
倾斜,支持两个参数，水平和垂直，当一个参数的时候，代表水平
transform: skew(40deg,20deg);
}
</style>
9： 关于transform 3D效果演示
<style>
#parent{
width: 200px;
height: 200px;
background: pink;
margin:100px auto;
perspective:400px;
}
perspective 再加一个属性，透视，呈现出伪3D的效果
#son{
width: 100%;
height: 100%;
background: #63a7f2;
/*transform: translateZ(-100px);*/
transform: translate3d(-10px,-10px,-100px);
transition: all 3s;
}
缩放属性 #son:hover{ transform: perspective(100px) scaleZ(-1); }
div{
width: 200px;
height: 200px;
/*background: blue;*/
}
.p{
background: pink;
transform: perspective(400px) translateZ(-100px);
}
.c{
background: orange;
transform: perspective(400px) scale3d(0.8, 0.8,0.8) translateZ(-100px);
}
.y>img{
width: 300px;
height: auto;
}
.y>img{
perspective: 400px;
transition: all 3s;
}
.y>img:hover{
transform: rotateZ(180deg);
}
.num{
background: #dd0378;
width: 200px;
height: 200px;
margin: 200px auto;
过渡属性 transition-property: background-color;
过渡完成时间 transition-duration:4s ;
过度函数 transition-timing-function: linear;
过渡延时时间
transition-delay: 1s;
所有属性
transition-property: all;
执行时间
执行函数
transition-timing-function: linear;
过渡时间
transition-delay: 1s;
简写属性
transition: all 1s 1s linear;
}
.num:hover{
width: 300px;
transform:translate(3px,-10px) ;
box-shadow: 0 0 10px 10px #cccccc;
background: green;
}
</style>
