邊框陰影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 400px;
height: 400px;
margin: 100px auto;
border: 1px solid #000;
/*box-shadow: h-shadow v-shadow blur spread color inset;*/
/*box-shadow: 10px 10px 10px 10px #000 inset;*/
box-shadow: 10px 10px #000 ;
/*第一個(gè)參數(shù)水平偏移位*/
/*第二個(gè)參數(shù)垂直偏移位*/
/*第三個(gè)參數(shù)陰影模糊度*/
/*第四個(gè)參數(shù)陰影寬度*/
/*第五個(gè)參數(shù)陰影顏色*/
/*第五個(gè)參數(shù)將外陰影轉(zhuǎn)換為內(nèi)陰影*/
/*第一和第二個(gè)和第五個(gè)參數(shù)不可以不寫，第三和第四個(gè)參數(shù)可以不寫鞠苟，第六個(gè)看敘事需要轉(zhuǎn)換為內(nèi)陰影*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
文字陰影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
font:700 40px '宋體';
color: darkkhaki;
text-shadow: 5px 5px 5px #000;
/*第一個(gè)參數(shù)水平偏移位*/
/*第二個(gè)參數(shù)垂直偏移位*/
/*第三個(gè)參數(shù)陰影模糊度*/
/*第四個(gè)參數(shù)陰影顏色*/
/*第三個(gè)可以不寫*/
</style>
</head>
<body>
<p>
何時(shí)仗爾看南雪,我與梅花兩白頭.
</p>
</body>
</html>
background-size相關(guān)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
width: 600px;
height: 600px;
border: 1px solid #000;
margin: 0 auto;
list-style: none;
}
ul li {
width: 200px;
height: 200px;
box-sizing: border-box;
border: 1px solid #000;
float: left;
}
ul li:nth-child(1) {
background: url("http://img2.imgtn.bdimg.com/it/u=19183668,4097390486&fm=26&gp=0.jpg") no-repeat;
background-size: 100px 100px;
/*接受具體值*/
}
ul li:nth-child(2) {
background: url("http://img2.imgtn.bdimg.com/it/u=19183668,4097390486&fm=26&gp=0.jpg") no-repeat;
background-size: 50% 50%;
/*接受百分比*/
}
ul li:nth-child(3) {
background: url("http://img2.imgtn.bdimg.com/it/u=19183668,4097390486&fm=26&gp=0.jpg") no-repeat;
background-size: 100px auto;
/*寬度具體高度等比*/
}
ul li:nth-child(4) {
background: url("http://img2.imgtn.bdimg.com/it/u=19183668,4097390486&fm=26&gp=0.jpg") no-repeat;
background-size: auto 100px;
/*寬度等比高度具體*/
}
ul li:nth-child(5) {
background: url("http://img2.imgtn.bdimg.com/it/u=19183668,4097390486&fm=26&gp=0.jpg") no-repeat;
background-size: cover;
/*高度和寬度填充滿背景*/
}
ul li:nth-child(6) {
background: url("http://img2.imgtn.bdimg.com/it/u=19183668,4097390486&fm=26&gp=0.jpg") no-repeat;
background-size: contain;
/*高度或?qū)挾扔幸贿吿畛錆M背景*/
}
ul li:nth-child(7) {
background: url("http://img2.imgtn.bdimg.com/it/u=19183668,4097390486&fm=26&gp=0.jpg") no-repeat;
/*默認(rèn)*/
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
多重背景
1:CSS3之前一個(gè)元素只能接受一個(gè)背景圖片,CSS3新增多重背景,在第一個(gè)背景圖片后以,隔開添加第二個(gè)背景圖片,先寫的會覆蓋后面的.
2:在背景圖片后可以使用背景圖片定位 left top right bottom center值.
背景或視頻鋪滿
object-fit: cover;
