1.圆角边框与阴影
文本阴影：
鼠标悬停动态效果：图片上停留出现说明文字
文字排版分列：文字分为两列，类似报刊
盒子：圆角边框，阴影，倾斜，旋转效果。
-
浏览器前缀表:(w3school)
| 浏览器内核 | 浏览器 | css3前缀 |
|---|---|---|
| Webkit | Safari | -webkit- |
| Webkit | Chrome | -webkit- |
| Gecko | Firefox | -moz- |
| Presto | Opera | -o- |
| Trident | IE | -ms- |
1.1圆角边框border-radius属性：
border-top-left-radius左上角的形状
border-top-right-radius 右上角的形状
border-bottom-left-radius 左下角的形状
border-bottom-right-radius 右下角的形状
border-radius：水平值 垂直值
//方型，对角椭圆<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>D</title> <style type="text/css" media="screen"> div{ height: 100px; width: 150px; border:1px solid blue; border-top-left-radius: 40px 20px; border-bottom-right-radius: 20px; } </style></head><body> <div> </div></body></html>
//导航栏格式，两头圆<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>D</title> <style type="text/css" media="screen"> div{ height: 50px; width: 350px; border:2px solid #a1a1a1; background:#ddd; border-radius: 25px;//上下左右都是25px; } </style></head><body> <div> </div></body></html>
//圆形 width=height&&border-radius=0.5*height<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>D</title> <style type="text/css" media="screen"> div{ height: 50px; width: 50px; border:2px solid #a1a1a1; background:#ddd; border-radius: 25px; } </style></head><body> <div> </div></body></html>
-
sublime里面用 bdrs扩展 -webkit-border-radius:|;
-moz-border-radius:|;
border-radius:|;
1.2阴影 box-shadow属性
inset 水平偏移 垂直偏移 模糊距离 颜色；
inset 可选，内部阴影
outset 默认值，外部阴影
//阴影<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>D</title> <style type="text/css" media="screen"> div{ height: 100px; width: 300px; background-color: #f90; box-shadow: 10px 10px 5px #888;//10px都是指阴影位置，5px指模糊范围，#888指阴影颜色 } </style></head><body> <div> </div></body></html>
-
bxsh扩展
-webkit-box-shadow:inset hoff voff blur color;
-moz-box-shadow:inset hoff voff blur color;
box-shadow:inset hoff voff blur color;
2.文本与文字
2.1text-shadow属性
水平偏移 垂直偏移 阴影大小 颜色 <h1>Web Design<h1>
//阴影
h1{
text-shadow:2px 2px #FF0000;
}
//模糊背景
h1{
text-shadow:2px 2px 8px blue;//8px是模糊大小
}
h1{
text-shadow:0 0 3px #F00;//阴影位置没有偏移，阴影与原位置重合=描边
}
h1{
color:white;//文字设为白色
text-shadow:2px 2px 4px #000;//投影设为黑色
}
2.2word-wrap属性
允许长单词、URL强制进行换行
word-wrap属性：normal 、break-word(防止溢出效果)
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>D</title> <style type="text/css"> p.wdrp{ width: 8em; border: 1px solid #333; word-wrap: break-word; } </style></head><body> <p class="wdrp">这是最长的英文单词，pneumonoultramicroscopicsilicovolcsandfjhsisi.</p></body></html>
2.3@font-face规则
利用@font-face规则，定义web字体，并引用需要字体的四种文件格式，确保能在主流浏览器中都能正常显示该字体。
| 字体文件后缀 | 适用于浏览器 |
|---|---|
| .TTF或.OTF | Firefox ,Safari,Opera |
| .EOT | interner Explorer 4.0+ |
| .SVG | Chrome,IPhone |
| .WOFF | Chrome,Firefox |
-
下载字体只有一种.ttf格式。生成其他格式https://www.fontsquirrel.com/tools//webfont-
//特殊字体的显示<style type="text/css"> @font-face{ font-family: kastlerFont;/*定义字体的名称,可以起新的名字*/ src:url('fonts/kastler.ttf'), url('fonts/kastler.eot'), url('fonts/kastler.woff'), url('fonts/kastler.svg'); }/*指明下载的字体来源*/ p{ font-family: kastlerFont; } </style>
3.css3中的2D 转换方法
2D转换方法：
对元素进行旋转、缩放、移动、拉伸
transform属性
rotate()旋转
scale()缩放
3.1旋转transform:rotate()
transform:rotate( deg);
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>D</title> <style type="text/css"> div{ width: 100px; height: 75px; background-color: #ccc; border: 1px solid black; } #rotateDiv{ transform: rotate(30deg);//30deg：旋转角度，-30deg逆时针旋转 } </style></head><body> <div id="container"> <div>web前端开发</div> <div id="rotateDiv">web前端开发/div> </div></body></html>
3.2缩放transform:scale()
transform:scale(x,y)
x:水平方向的缩放倍数
y:垂直方向的缩放倍数，若省略，同x
0~1，缩小；>1放大
.box:hover{ transform:scale(1,2);}
4.css3 过渡与动画
4.1过渡transition属性
将元素的某个属性从“一个值”在指定的时间内过渡到“另一个值”。
-
transition 属性名 持续时间 过度方法
-
transition-property 属性名|all 对哪个属性进行变化
-
transition-duration 持续时间
-
transition-timing-function 过渡使用的方法（函数）
值 描述 linear 匀速 ease 慢快慢 ease-in 慢快 ease-out 快慢 ease-in-out 慢快慢 //盒子中字体的颜色和背景都变了<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>D</title> <style type="text/css" media="screen"> div{ height: 30px; width: 100px; line-height: 30px; border-radius: 5px;//圆角边框 color: #000;//文字颜色 background-color: silver;//背景颜色 transition: all is linear;//所有属性都变化，linear匀速变化 } div:hover{//变化后的效果 color: white; background-color: #45B832; } </style></head><body> <div> web design </div></body></html> -
transition-delay
4.2动画
@keyframes
animation属性
animation动画
1.定义动画：采用@keyframes规则
2.调用动画：animation属性
//背景颜色动画渐变<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>D</title> <style type="text/css" media="screen"> @keyframes mycolor{//mycolor动画的名字 0% {background-color: red;}//0%表示关键帧动画出现的时刻，background-color表示当前关键帧状态下某个属性取值。 30% {background-color: blue;} 60% {background-color: yellow;} 100% {background-color: green;} } div:hover{ animation: mycolor 5s linear;//animation属性播放mycolor动画,利用5s时间完成动画播放。 } </style></head><body> <div> web sigin </div></body></html>
-
animation属性
值 描述 animation 简写 animation-name 引用@keyframes动画的名称 animation-duration 动画完成时间 animation-timing-function 规定动画的速度曲线。默认是"ease". animation-play-state running|paused
5.css3的3D变换
5.1 3D
transform-style:preserve-3d
5.2旋转 transform属性
rotateX()
rotateY() 角度deg 60deg
rotateZ()
5.3透视 perspective属性
像素值越小离舞台越近。
-
父容器：旋转
transform-style:preserve-3d;
transform:rotateY(60deg);
-
舞台：透视关系
眼睛到舞台的距离 perspective:100px;
像素值越小离舞台越近,效果越明显。
//🐸3d旋转<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>D</title> <style type="text/css" media="screen"> #stage{ width: 300px; margin:100px auto; perspective: 100px; } .box{ width: 100px; height: 100px; float:left; transition: linear 1s; transform-style: preserve-3d; } img{ width: 75px; height:100px; } .x:hover{ transform: rotateX(60deg); } .y:hover{ transform: rotateY(60deg); } .z:hover{ transform: rotateZ(60deg); } </style></head><body> <div id="stage"> <div class="box x"> <img src="img/frong.png"> </div> <div class="box y"> <img src="img/frong.png"> </div> <div class="box z"> <img src="img/frong.png"> </div> </div> </body></html>
一张图片悬停翻转背面出现内容：
父元素设置position:relative;
子元素设置position:absolutive;
运用了层定位：父元素用了相对定位，另个子元素都用了决定定位，丢失了原有文档流的位置所以两个子元素front,back重叠在一起。
背面子元素设置初始状态就翻转180度；
//图片翻转是文字（chrome）<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>D</title> <style type="text/css"> *{ margin: 0; padding: 0; } body{ background-color: #0d3462; } #pic{ width: 760px; height: 220px; margin: 100px auto; } .picbox{ float: left; width: 170px; height: 190px; margin: 5px; position: relative; transform-style: preserve-3d; transition:1.5s; } .picbox:hover{ transform: rotateY(180deg); } .face{ width: 170px; height: 190px; position: absolute; } .font{ border: 2px solid #4b2518; } .back{ transform: rotateY(180deg); background-color: #4b2518; border: 2px solid #fff; } .back h3{ color: white;/*文字颜色*/ text-align: center;/*文本内容：居中对齐*/ } </style></head><body> <div id="pic"> <div class="picbox"> <div class="face front"><img src="img/1.jpg" alt=""></div> <div class="face back"><h3>浓缩咖啡</h3></div> </div> <div class="picbox"> <div class="face front"><img src="img/2.jpg" alt=""></div> <div class="face back"><h3>浓缩咖啡</h3></div> </div> <div class="picbox"> <div class="face front"><img src="img/3.jpg" alt=""></div> <div class="face back"><h3>浓缩咖啡</h3></div> </div> <div class="picbox"> <div class="face front"><img src="img/4.jpg" alt=""></div> <div class="face back"><h3>浓缩咖啡</h3></div> </div> </div></body></html>