目录
5-1 圆角边框与阴影
CSS3新特性
- 文本阴影
- 鼠标悬停动态效果
- 文字分栏
- 盒子的圆角边框、阴影、倾斜
浏览器支持度
因为w3c定制标准比较慢，这是一个长期的过程。所以在这过程中，浏览器厂商需要快速加入对新属性的支持，加前缀。
在w3c这个网站中，我们可以看到各大浏览器厂商对CSS3新特性的支持度。
圆角边框 border-radius属性
四个子属性
在没有新特性的时候，我们需要对盒子添加背景图片，以此来添加圆角边框。
现在我们可以通过设置border-radius属性来达到圆角边框效果。
border-radius有四个子属性
我们通过设置水平值和垂直值得大小来确定圆角边框弧度的大小。
实例
在sublime中的快速输入
使用bdrs（boder-radius简写）进行快速输入。
阴影 box-shadow属性
五个参数
box-shadow属性有五个参数：
insert、水平偏移、垂直偏移、模糊距离、颜色
第一个参数决定是内部阴影还是外部阴影，默认是外部阴影。
水平/垂直距离
模糊距离
实例
在sublime中的快速输入
使用简写bxsh简写输入可以快速生成阴影代码。
5-2 文字与文本
文本阴影 text-shadow属性
与盒子阴影类似，文字阴影有四个参数
我们常用的文字阴影效果有文字描边和凸起浮雕
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
h1 {
text-shadow:2px 2px #FF0000;
}
</style>
</head>
<body>
<h1>Web design</h1>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
h1 {
text-shadow:2px 2px 8px blue;
}
</style>
</head>
<body>
<h1>Web design</h1>
</html>
长文本换行 word-wrap属性
在正常情况下，长单词文字会溢出文本框，如图：
这时，就需要我们设置word-wrap属性进行换行。
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p.wdrp
{
width:8em;
border:1px solid #333;
word-wrap:break-word;
}
</style>
</head>
<body>
<p class="wdrp">这是最长的英文单词,
pneumonoultramicroscopicsilicovolcanoconiosis.</p>
</html>
网络字体 @font-face规则
无论是浏览器还是其他的软件，里面呈现出来的用户可以选择的字体，都是在我们的本地硬盘上存在有特定的字体文件，如果没有这个字体文件，是无法显示该字体的。
在没有这个规则之前有两种方式：（如图）
现在对于CSS3的标准，我们把字体文件放在服务器端中，当使用到特殊字体时，将服务器端的字体文件，下载到客户端中。
不同的浏览器对字体文件的格式是有规定的。
实例
字体下载链接
字体文件格式转换工具
当我们只有一种字体格式文件时，可以使用该工具获得所有格式。
<!DOCTYPE html>
<html>
<head>
<style>
@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>
</head>
<body>
<p>Web front-end development</p>
</body>
</html>
5-3 2D变换
2D变换主要有：旋转、缩放、移动、拉伸
这里主要介绍旋转和缩放。
旋转transform:rotate()
rotate函数的参数为旋转的度数。
快捷输入
快捷输入：trsf
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div
{
width:100px;
height:75px;
background-color:#ccc;
border:1px solid black;
}
#rotateDiv
{
transform:rotate(30deg);
}
</style>
</head>
<body>
<div id = "container">
<div>web前端开发</div>
<div id="rotateDiv">web前端开发</div>
</div>
</html>
缩放transform:scale()
scale()函数有两个参数x，y分别代表水平和垂直方向上的缩放倍数。
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 300px;
height: 300px;
border:1px solid;
}
.box:hover{
transform: scale(1.2);
}
</style>
</head>
<body>
<div class = "box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore iusto facilis nihil voluptatibus, nobis corrupti quae ipsum possimus dolorum, repudiandae unde illum nemo quibusdam tempora fuga nisi? Eius, enim, minima?
</div>
</html>
5-4 过渡与动画
过渡transition属性
过渡： 将元素的某个属性从“一个值”在指定的时间内过渡到“另一个值”
完成的效果：让当前的一个元素从一种状态过渡到另外一种状态，发生两个状态之间的一个变化。
其中transition-timing-function主要设置过渡的快慢程度，通过函数控制。
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
height: 30px;
width: 100px;
line-height: 30px;
border-radius: 5px; /*圆角边框*/
color: #000;
background-color: silver;
transition: all 1s linear;
}
div:hover{
color: white;
background-color: #45B823;
}
</style>
</head>
<body>
<div>web design</div>
</body>
</html>
动画 animation属性
当我们需要让元素在几种状态之间转换时，这时候就需要使用动画。
动画： 让一个元素，通过animation属性来完成若干种状态之间的一个转换。
首先需要定义动画，然后调用动画。
animation属性有四个子属性。
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background-color: black;
}
@keyframes mycolor
{
0% {background-color:red;}
30% {background-color:blue;}
60% {background-color:yellow;}
100% {background-color:green;}
}
div:hover
{
animation: mycolor 5s linear;
}
</style>
</head>
<body>
<div class = "box">
</div>
</html>
5-5 3D变换
坐标系
有无透视的区别
透视的具体设置
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3D</title>
<style>
#stage{ /**舞台，主要设置透视效果*/
width: 300px;
margin: 100px auto;
perspective: 200px; /*眼睛距离舞台的距离*/
}
.box{
width: 100px;
height: 100px;
float: left;
transition: linear 1s;
transform-style: preserve-3d; /*设置3D效果*/
}
img{
width: 100px;
height: 75px;
}
.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="https://img-blog.csdnimg.cn/img_convert/40d457717d03f863d8078f3a4c0ae83c.png" alt="">
</div>
<div class="box y">
<img src="https://img-blog.csdnimg.cn/img_convert/40d457717d03f863d8078f3a4c0ae83c.png" alt="">
</div>
<div class="box z">
<img src="https://img-blog.csdnimg.cn/img_convert/40d457717d03f863d8078f3a4c0ae83c.png" alt="">
</div>
</div>
</body>
</html>
变换综合实例
实现效果
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background-color: #0D3462;
}
/*舞台*/
#piclist{
width: 760px;
height: 220px;
margin: 100px auto;
}
/*容器*/
.picbox{
position: relative;
float: left;
width: 170px;
height: 190px;
margin: 10px;
transform-style: preserve-3d;
transition: 1.5s;
}
/*鼠标悬停翻转*/
.picbox:hover{
transform: rotateY(180deg);
}
/*共同样式*/
.face{
position: absolute;
width: 170px;
height: 190px;
}
/*正面*/
.front{
border: 2px solid #4b2518;
}
/*反面*/
.back{
transform: rotateY(180deg);
background-color: #4b2518;
border: 2px solid white;
}
.back h3{
color: white;
text-align: center;
}
</style>
</head>
<body>
<div id="piclist">
<div class="picbox">
<div class="face front"><img src="https://cdn.jsdelivr.net/gh/Crtd-Code/image/img/1.jpg" alt=""></div>
<div class="face back">
<h3>浓缩咖啡</h3>
</div>
</div>
<div class="picbox">
<div class="face front"><img src="https://cdn.jsdelivr.net/gh/Crtd-Code/image/img/2.jpg" alt=""></div>
<div class="face back">
<h3>卡布奇诺</h3>
</div>
</div>
<div class="picbox">
<div class="face front"><img src="https://cdn.jsdelivr.net/gh/Crtd-Code/image/img/3.jpg" alt=""></div>
<div class="face back">
<h3>拿铁</h3>
</div>
</div>
<div class="picbox">
<div class="face front"><img src="https://cdn.jsdelivr.net/gh/Crtd-Code/image/img/4.jpg" alt=""></div>
<div class="face back">
<h3>摩卡</h3>
</div>
</div>
</div>
</body>
</html>
咖啡店案例
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<div id="header">
<img src="images/banner.jpg" alt="">
<div id="icon-list">
<img src="images/1.bmp" alt="">
<img src="images/2.bmp" alt="">
<img src="images/3.bmp" alt="">
<img src="images/4.bmp" alt="">
</div>
</div>
<div id="nav">
<a href="#">咖啡MENU</a>|
<a href="#">咖啡COOK</a>|
<a href="#">咖啡STORY</a>|
<a href="#">咖啡NEWS</a>|
<a href="#">咖啡PARTY</a>
</div>
<div id="main">
<div id="aside"><!--边栏-->
<h2>咖啡MENU</h2>
<table >
<tr>
<th ></th>
<th >拿铁<br />Latte</th>
<th >卡布奇诺<br />Cappuccino</th>
<th >摩卡<br />Mocha</th>
<th >浓缩咖啡<br />Espresso</th>
</tr>
<tr>
<th scope="row" >大杯</th>
<td>35</td>
<td>35</td>
<td>35</td>
<td>30</td>
</tr>
<tr>
<th scope="row" >中杯</th>
<td>30</td>
<td>30</td>
<td>30</td>
<td >25</td>
</tr>
<tr>
<th scope="row" >小杯</th>
<td>25</td>
<td>25</td>
<td>25</td>
<td>20</td>
</tr>
</table>
<table></table>
<div id="imglist"><!--pol为相同样式 ，rotate为不同样式images/-->
<div class="pol rotate-left"><img src="images/Latte.jpg" alt=""></div>
<div class="pol rotate-right"><img src="images/Cappuccino.jpg" alt=""></div>
<div class="pol rotate-left"><img src="images/Espresso.jpg" alt=""></div>
<div class="pol rotate-right"><img src="images/Mocha.jpg" alt=""></div>
</div>
</div>
<div id="content"><!--主体部分-->
<!--四块>图片+文字>标题+段落-->
<div class="subcon">
<img src="images/Latte.jpg" alt="">
<subtext>
<h2>拿铁Caffè Latte</h2>
<p>这是一种传统的经典饮料——浓缩咖啡调入热牛奶，其上覆盖一层轻盈的奶沫。<br>品尝此款咖啡时，您可以选择特别加入某种口味（如香草，焦糖或杏仁口味）的糖浆。</p>
</subtext>
</div>
<div class="subcon">
<img src="images/Cappuccino.jpg" alt="">
<subtext>
<h2>卡布奇诺Cappuccino</h2>
<p>这款咖啡沿袭传统技法，由我们技艺娴熟的咖啡吧员将手工制作的热奶与细腻奶泡轻柔地浇在浓缩咖啡之上制作而成。</p>
</subtext>
</div>
<div class="subcon">
<img src="images/Mocha.jpg" alt="">
<subtext>
<h2>摩卡Caffè Mocha</h2>
<p>这款咖啡由醇香的摩卡酱，浓缩咖啡和蒸奶相融相合，上面覆以搅打奶油。<br>寒冷的日子里，忧伤的时光中,任何人都无法抵抗她的诱惑。</p>
</subtext>
</div>
<div class="subcon">
<img src="images/Espresso.jpg" alt="">
<subtext>
<h2>浓缩咖啡Espresso</h2>
<p>这是咖啡的精粹，以最浓缩的方式显现。浓缩咖啡带点焦糖味道，浓厚馥郁。</p>
</subtext>
</div>
</div>
</div>
<div id="footer"></div>
</div>
<div id="l-fix">
<img src="images/Latte.jpg" alt="">
</div>
</body>
</html>
style.css
/*默认样式清零*/
*{
margin: 0px;
padding: 0;
}
body{
font-size: 16px;
color: #673929;
}
#container{
width: 900px;
margin:0 auto;/*水平居中*/
}
#header{
height: 220px;
margin-bottom: 5px;
position: relative;
}
#icon-list{
position: absolute;
top: 170px;
right: 30px;
width: 130px;
height: 30px;
font-size: 0;/*去除图标之间的空隙*/
}
#nav{
height: 30px;
line-height: 30px;/*添加行高已达到垂直居中*/
margin: 5px;
background-color: #09c;
font: 18px/30px;/*第二个参数为行高*/
color: #fff;
letter-spacing: 2px;/*字符间距*/
text-align: center;
}
#nav a{
text-decoration: none;/*没有下划线*/
}
/*没有点击的超链接*/
a:link{
color: #fff;
}
/*已访问的超链接*/
a:visited{
color: #fff;
}
/*鼠标悬停*/
a:hover{
color: yellow;
}
/*超链接激活*/
a:active{
color: yellow;
}
#main{
background-color: #000;
/* height: 2050px; */
}
#aside{
float: left;
width: 300px;
/* height: 500px; */
background-color: #6cf;
text-align: center;
font-size: 14px;
color:#000
}
#aside h2{
margin: 20px;
}
#imglist{
width:130px;
margin: 0 auto;
}
.pol{
width: 85px;
padding: 10px;
background-color: #eee;
border: 1px solid #bfbfbf;
box-shadow: 2px 2px 4px #aaa; /*盒子阴影*/
border-radius: 5px;
}
#imglist img{
height: 95px;
width: 85px;
margin: 0 auto;
}
.rotate-left{
-ms-transform:rotate(7deg); /* IE 9 */
-moz-transform:rotate(7deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
-o-transform:rotate(7deg); /* Opera */
transform:rotate(7deg);
}
.rotate-right{
-ms-transform:rotate(-7deg); /* IE 9 */
-moz-transform:rotate(-7deg); /* Firefox */
-webkit-transform:rotate(-7deg); /* Safari and Chrome */
-o-transform:rotate(-7deg); /* Opera */
transform:rotate(-7deg);
}
#content{
float: right;
width: 595px;
/* height: 2050px; */
margin-bottom: 5px;
background-color: #cff;
}
.subcon{
width: 570px;
margin: 10px auto;
clear: both;
}
.subcon img{
margin: 5px;
padding: 5px;
float: left;
border: 1px dashed #000;
}
.subcon subtext{
width: 60%;
float: left;
margin: 5px;
}
.subcon h2{
margin: 5px;
}
.subcon p{
font: 16px/2px;
}
#footer{
height: 60px;
line-height: 60px;
background-color: #6cf;
clear: both;/*清除浮动，防止footer占位*/
text-align: center;
}
#l-fix{
position: fixed;
top: 100px;
left: 5px;
}
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
