一、圆角
1、border-radius属性(圆角)
通过border-radius
属性可以给任何元素设置“圆角”
。
如果你在border-radius
属性中只指定一个值
,那么将生成 4个圆角
。
但是,如果你要在四个角上
一一指定
,可以使用以下规则:
-
四个值
: 第一个值为左上角
,第二个值为右上角
,第三个值为右下角
,第四个值为左下角
。-
三个值
: 第一个值为左上角
, 第二个值为右上角和左下角
,第三个值为右下角
-
两个值
: 第一个值为左上角与右下角
,第二个值为右上角与左下角
-
一个值
: 四个圆角值相同
下面例子是设置一个值的效果:
HTML代码:
<html>
<head>
<link rel="stylesheet" href="CSS3.css">
</head>
<body>
<div >hello everyone</div>
</body>
</html>
CSS代码:
div {
border-radius: 20px;
background-color: green;
color: white;
}
执行结果:
下面例子是设置四个值的效果:
CSS代码:
div{
border-radius: 0 0 20px 20px;
background-color: green;
color: white;
}
执行结果:
2、通过border-radius创建一个圆形
通过将元素的border-radius
设置成元素高度
以及宽度
的一半
可以将元素变成圆形
。也可以使用百分比
哟。
示例中矩形元素的宽度和高度均为200px。通过将border-radius设置为100px
,或者50%
;矩形元素将变成圆形。
HTML代码:
<html>
<head>
<link rel="stylesheet" href="CSS3.css">
</head>
<body>
<div class= "div1">hello world</div>
<div class= "div2">hello world</div>
</body>
</html>
CSS代码:
div {
width: 200px;
height: 200px;
border-radius: 100px;
background-color: green;
color: white;
text-align: center;
line-height: 200px;
}
.div1 {
border-radius: 100px;
background-color: green;
margin-bottom: 20px;
}
.div2 {
border-radius: 50%;
background-color: red;
}
执行结果:
二、阴影
1、box-shadow属性(阴影效果)
box-shadow
属性可以为元素增加阴影效果
。
注意:
boxShadow
属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔
阴影的列表,每个阴影由2-4个长度值
、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。
box-shadow的属性介绍(使用的时候必须按顺序设置)
box-shadow:
h-shadow v-shadow blur spread color inset;
-
h-shadow
: 必需。水平阴影
的位置。允许负值 。-
v-shadow
: 必需。垂直阴影
的位置。允许负值。-
blur
: 可选。模糊距离
。-
spread
: 可选。阴影的尺寸
。color
: 可选。阴影的颜色
。参阅CSS颜色值。-
inset
: 可选。从外层的阴影(开始时)改变阴影内侧阴影
如下,给div添加阴影
HTML代码:
<html>
<head>
<link rel="stylesheet" href="CSS3.css">
</head>
<body>
<div >hello world</div>
</body>
</html>
CSS代码:
div {
width: 300px;
height: 100px;
background-color: #9ACD32;
box-shadow: 10px 10px #888888;
}
执行结果:
2、box-shadow的模糊和扩散
除了颜色(color)
外,box-shadow
元素还有两个可选值,它们是模糊(blur)
和扩散(spread)
。
如下例子:
HTML代码:
<html>
<head>
<link rel="stylesheet" href="CSS3.css">
</head>
<body>
<div >hello world</div>
</body>
</html>
CSS代码:
div {
width: 300px;
height: 100px;
background-color: #9ACD32;
box-shadow: 10px 10px 5px 5px #888888;
}
执行结果:
3、在box-shadow中使用负值
负值
也可以用于box-shadow
中:
h-shadow
- 阴影将在框的左侧
v-shadow
- 阴影将在框上方
blur
- 不允许使用负值
spread
- 负值会导致阴影缩小
如下例子:
HTML代码:
<html>
<head>
<link rel="stylesheet" href="CSS3.css">
</head>
<body>
<div >hello world</div>
</body>
</html>
CSS代码:
div {
width: 300px;
height: 100px;
background-color: #9ACD32;
box-shadow: -15px -15px 5px -5px #888888;
}
执行结果:
三、动画
1、CSS3动画
动画让一个元素从一种风格逐渐转变为另一种风格。
您可以根据需要更改任意数量的CSS属性。
关键帧将保存元素在特定时间的样式
当您在@keyframes规则中指定CSS样式时,动画将在某些时间从当前样式逐渐变为新样式。
要使动画起作用,必须将动画绑定到元素。
2、@keyframes创建动画
使用@keyframes规则,你可以创建动画
@keyframes name{
from|0% {
css样式
}
50% {
css样式
}
70% {
css样式
}
to|100% {
css样式
}
}
name:动画名称,开发人员自己命名;
percent:为百分比值,可以添加多个百分比值;
3、animation执行动画
animation:name duration timing-function delay iteration-count direction;
(animation-timing-function)
动画定时功能指定动画的速度曲线
。 它可以有以下值:
-
ease
- 逐渐变慢(默认值)-
linear
- 匀速-
ease-in
- 加速-
ease-out
- 减速-
ease-in-out
- 先加速后减速-
cubic-bezier(n,n,n,n)
- 让你在一个cubic-bezier函数中定义你自己的值,可能的值是从 0 到 1
的数值。
animation-direction
属性指定如何应用关键帧
,值可以设置为:
-
normal
- 默认值,这意味着它从0%到100%前进。-
reverse
- 从100%到0%的相反方向播放关键帧-
alternate
- 动画首先向前,然后向后,然后向前。-
alternate-reverse
- 动画首先倒退,然后前进,然后倒退。
3.1切换背景颜色
以下示例将更改元素的背景颜色三次:动画完成50%,完成70%,动画完成100%时。
<head>
<style>
div{
width:200px;
height:200px;
background-color:grey;
animation:hello 3s linear 0s infinite;
/*动画名称为hello, 持续时间为3s,
动画效果匀速,延时0s,无限循环*/
}
div:hover{
animation-play-state: paused; /*鼠标触碰时停止*/
}
@keyframes hello{
0% {background-color:red;}
50% {background-color:yellow;}
70% {background-color:blue;}
100% {background-color:green;}
}
</style>
</head>
<body>
<div></div>
</body>
执行结果:
3.2呼吸效果
动画呈现出来的效果像呼吸一样
<head>
<style>
.box{
width:300px;
height:300px;
margin:40px auto;
background-color: #2b92d4;
border-radius: 50%;/*圆形*/
box-shadow: 0 1px 2px rgba(0,0,0,0.3);/*阴影*/
animation:breathe 1s ease-in-out infinite alternate;
/* 动画名称为breathe,持续时间为1s,动画先加速后减速,无限循环,动画播放方向:首先向前,然后向后,然后向前*/
}
@keyframes breathe{
0% {
opacity:0.2;/*透明度*/
box-shadow: 0 1px 2px rgba(255,255,255,0.1)}
50% {
opacity:0.5;/*透明度*/
box-shadow: 0 1px 2px rgba(18,190,84,0.76)}
100% {
opacity:1;/*透明度*/
box-shadow: 0 1px 30px rgba(59,255,255,1)}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
执行结果:
四、媒体查询
媒体查询能使页面在不同终端设备下达到不同的效果
媒体查询会根据设备的大小自动识别加载不同的样式
1、设置meta标签
使用设备的宽度作为视图宽度并禁止初始的缩放。在<head>标签里加入这个meta标签。
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1,user-scalable=no">
参数解释:
- width=device-width宽度等于当前设备的宽度
- initial-scale初始的缩放比例(默认设置为1.0)
- maximum-scale允许用户缩放到的最大比例(默认设置为1.0)
- user-scalable用户是否可以手动缩放(默认设置为no)
2、媒体查询语法
<head>
<style>
.box{
width:300px;
height:300px;
}
@media screen and (max-width:768px){/*and与括号之间需有空格*/
.box{
background-color: aqua;/*当屏幕尺寸小于768px时,背景颜色为蓝色*/
}
.p1{
display: none;/*当屏幕尺寸小于768px时,不显示p1内容*/
}
.p2{
display: none;/*当屏幕尺寸小于768px时,不显示p2内容*/
}
}
@media screen and (max-width:996px)and (min-width:768px){/*and与括号之间需有空格*/
.box{
background-color: blueviolet;/*当屏幕尺寸大于768px,小于996px时,背景颜色为紫色*/
}
.p1{
display: none;/*当屏幕尺寸大于768px,小于996px时,不显示p1内容*/
}
.p2{
display: block;/*当屏幕尺寸大于768px,小于996px时,显示p2内容*/
}
}
@media screen and (min-width:996px){/*and与括号之间需有空格*/
.box{
background-color:red;/*当屏幕尺寸大于996px时,背景颜色为红色*/
}
.p1{
display: block;/*当屏幕尺寸大于996px时,显示p1内容*/
}
.p2{
display: block;/*当屏幕尺寸大于996px时,显示p2内容*/
}
}
</style>
</head>
<body>
<div class="box"></div>
<div class="p1">哈哈哈</div>
<div class="p2">呵呵呵</div>
</body>
执行结果: