box-shadow
- 营造层次感（立体感）
- 充当没有宽度的边框
- 特殊效果
/* x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: 60px -16px teal;
/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 10px 5px 5px black;
/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
/* 插页(阴影向内) | x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: inset 5em 1em gold;
/* 任意数量的阴影，以逗号分隔 */
box-shadow: 3px 3px red, -1em 0 0.4em olive;
/* 全局关键字 */
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;
基本用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.container{
background:red;
width:200px;
height:200px;
margin: 100px;
/* box-shadow: 5px 5px 10px 0 rgba(0,0,0,.2); */
/* box-shadow: inset 5px 5px 10px 0 rgba(0,0,0,.2); */
box-shadow: 0 0 0 5px green;
}
</style>
</head>
<body>
<div class="container">
</div>
</body>
</html>
高级用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.container{
background:red;
width:10px;
height:10px;
margin: 10px;
border-radius: 5px;
box-shadow: 200px 200px 0 5px green,
230px 200px 0 5px green,
215px 215px 0 -3px red;
}
</style>
</head>
<body>
<div class="container">
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.container{
position: relative;
width: 36px;
height: 36px;
border-radius: 50%;
margin: 300px auto;
background-color: #C63D01;
box-shadow: 0px 0px 0 1px #000,
-20px -26px 0 -10px #333333,
-34px -40px 0 15px #fff,
-34px -40px 0 16px,
20px -26px 0 -10px #333333,
34px -40px 0 15px #fff,
34px -40px 0 16px,
0px 55px 0 75px #fff,
0px 55px 0 76px #000,
0 22px 0 120px #08BDEB,
0 22px 0 121px #000;
}
/*叮当猫的鼻子*/
.container::before{
content: '';
position: absolute;
bottom: -81px;
left: 17px;
height: 80px;
width: 2px;
background-color: #000;
}
/*叮当猫的嘴巴*/
.container::after{
content: '';
position: absolute;
bottom: -83px;
left: -44px;
width: 125px;
height: 70px;
border-bottom-right-radius: 28px;
border-bottom: solid 2px black;
border-bottom-left-radius: 28px;
}
</style>
</head>
<body>
<div class="container">
</div>
</body>
</html>
text-shadow
- 立体感
- 印刷质感
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.container{
margin:0 auto;
max-width: 800px;
font-size: 18px;
line-height: 2em;
font-family: STKaiti;
text-shadow: 1px 1px 0 #aaa;
}
.container p{
text-indent: 2em;
}
</style>
</head>
<body>
<div class="container">
<p>我与父亲不相见已二年余了，我最不能忘记的是他的背影。那年冬天，祖母死了，父亲的差使也交卸了，正是祸不单行的日子，我从北京到徐州，打算跟着父亲奔丧回家。到徐州见着父亲，看见满院狼藉的东西，又想起祖母，不禁簌簌地流下眼泪。父亲说，“事已如此，不必难过，好在天无绝人之路！”</p>
<p>回家变卖典质，父亲还了亏空；又借钱办了丧事。这些日子，家中光景很是惨淡，一半为了丧事，一半为了父亲赋闲。丧事完毕，父亲要到南京谋事，我也要回北京念书，我们便同行。</p>
<p>到南京时，有朋友约去游逛，勾留了一日；第二日上午便须渡江到浦口，下午上车北去。父亲因为事忙，本已说定不送我，叫旅馆里一个熟识的茶房陪我同去。他再三嘱咐茶房，甚是仔细。但他终于不放心，怕茶房不妥帖；颇踌躇了一会。其实我那年已二十岁，北京已来往过两三次，是没有甚么要紧的了。他踌躇了一会，终于决定还是自己送我去。我两三回劝他不必去；他只说，“不要紧，他们去不好！”</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.container{
margin:0 auto;
max-width: 800px;
font-size: 18px;
line-height: 2em;
font-family: STKaiti;
background: black;
text-shadow: -1px -1px 0 white,
-1px 1px 0 white,
1px -1px 0 white,
1px 1px 0 white;
}
.container p{
text-indent: 2em;
}
</style>
</head>
<body>
<div class="container">
<p>我与父亲不相见已二年余了，我最不能忘记的是他的背影。那年冬天，祖母死了，父亲的差使也交卸了，正是祸不单行的日子，我从北京到徐州，打算跟着父亲奔丧回家。到徐州见着父亲，看见满院狼藉的东西，又想起祖母，不禁簌簌地流下眼泪。父亲说，“事已如此，不必难过，好在天无绝人之路！”</p>
<p>回家变卖典质，父亲还了亏空；又借钱办了丧事。这些日子，家中光景很是惨淡，一半为了丧事，一半为了父亲赋闲。丧事完毕，父亲要到南京谋事，我也要回北京念书，我们便同行。</p>
<p>到南京时，有朋友约去游逛，勾留了一日；第二日上午便须渡江到浦口，下午上车北去。父亲因为事忙，本已说定不送我，叫旅馆里一个熟识的茶房陪我同去。他再三嘱咐茶房，甚是仔细。但他终于不放心，怕茶房不妥帖；颇踌躇了一会。其实我那年已二十岁，北京已来往过两三次，是没有甚么要紧的了。他踌躇了一会，终于决定还是自己送我去。我两三回劝他不必去；他只说，“不要紧，他们去不好！”</p>
</div>
</body>
</html>
border-radius
- 圆角矩形
- 圆形
- 半角/扇形
- 特殊角
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.container{
width: 0;
height: 0;
background: red;
border: 10px solid green;
/* border-radius: 10px; */
border-radius: 50%;
/*border: 50px solid green;
border-top-left-radius: 100px 50px;
border-top-right-radius: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;*/
/* border-radius: 10px 10px 10px 10px / 20px 20px 20px 20px; */
}
</style>
</head>
<body>
<div class="container">
</div>
</body>
</html>
background
- 纹理、图案
- 渐变
- 雪碧图动画
- 背景图尺寸适应
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.container{
}
.i{
width: 20px;
height: 20px;
background: url(./background.png) no-repeat;
background-size: 20px 40px;
transition: background-position .4s;
}
.i:hover{
background-position: 0 -20px;
}
</style>
</head>
<body>
<div class="container">
<div class="i"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.container{
width: 400px;
height: 300px;
border: 1px solid red;
background:url(./panda.jpg);
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
/* background-size: cover; */
}
</style>
</head>
<body>
<div class="container">
</div>
</body>
</html>
clip-path
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.container{
width: 400px;
height: 300px;
border: 1px solid red;
background:url(./panda.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
padding:10px;
/* clip-path: inset(100px 50px); */
/* clip-path: circle(50px at 100px 100px); */
/* clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%, 10% 10%, 40px 10px); */
clip-path: url(#clipPath);
/* background-size: cover; */
transition:clip-path .4s;
}
.container:hover{
/* clip-path: circle(80px at 100px 100px); */
}
</style>
</head>
<body>
<div class="container">
你好，我是熊猫
</div>
<svg>
<defs>
<clipPath id="clipPath">
<!-- <circle cx="60" cy="60" r="50" fill="#34538b" /> -->
<polygon stroke="#979797" points="0.4921875 81.2070313 92.640625 81.2070313 121.601562 0.21875 153.648437 81.2070313 247.390625 80.7734375 173.394531 140.496094 200.308594 227.09375 121.601562 172.71875 53.4960937 227.09375 80.859375 140.496094"></polygon>
</clipPath>
</defs>
</svg>
</body>
</html>
3D-transform
变换 transform
3D变换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.container{
margin:50px;
padding: 10px;
border: 1px solid red;
width: 200px;
height: 200px;
position: relative;
perspective: 500px;
}
#cube{
width:200px;
height:200px;
transform-style: preserve-3d;
transform: translateZ(-100px);
transition:transform .4s;
}
#cube div{
width: 200px;
height:200px;
position: absolute;
line-height: 200px;
font-size:50px;
text-align: center;
}
#cube:hover{
/* transform: translateZ(-100px) rotateX(270deg); */
transform: translateZ(-100px) rotateX(90deg) rotateY(90deg);
}
.front{
transform: translateZ(100px);
/* transform: translateX(100px); */
/* transform: translateX(100px) translateY(10px) rotate(25deg); */
/* transform: rotate(25deg) translateX(100px) translateY(10px); */
background:rgba(255,0,0,.3);
}
.back{
/* transform: translateZ(-100px); */
transform: translateZ(-100px) rotateY(180deg);
background:rgba(0,255,0,.3);
}
.left{
transform: translateX(-100px) rotateY(-90deg);
background:rgba(0,0,255,.3);
}
.right{
transform: translateX(100px) rotateY(90deg);
background:rgba(255,255,0,.3);
}
.top{
transform: translateY(-100px) rotateX(-90deg);
background:rgba(255,0,255,.3);
}
.bottom{
transform: translateY(100px) rotateX(90deg);
background:rgba(0,255,255,.3);
}
</style>
</head>
<body>
<div class="container">
<div id="cube">
<div class="front">1</div>
<div class="back">2</div>
<div class="right">3</div>
<div class="left">4</div>
<div class="top">5</div>
<div class="bottom">6</div>
</div>
</div>
</body>
</html>
补充
如何用一个DIV画东西
- box-shadow无限投影
- ::before
- ::after
如何产生不占空间的边框
- box-shadow
- outline
如何实现圆形元素
border-radius:50%
如何实现IOS的圆角图标
clip-path:(svg)
如何实现半圆、扇形等图形
border-radius组合:有无边框，边框粗细，圆角半径
如何实现背景图片居中/不重复/改变大小
background-position
background-repeat
background-size(cover/contain)
如何平移/放大一个元素
transform:translateX(100px)
transform:scale(2)
如何实现3D效果
perspective:500xp
transform-style:preserve-3d
transform: translate rotate...