# 效果属性
- box-shadow
- text-shadow
- border-radius
- background
- clip-path
# box-shadow
- 营造层次感（立体感）
- 充当没有宽度的边框
- 特殊效果
首选设置扩展区域像素如果为负值只是区域变的很小不会消失，因为这个可以看做是一个元素的复制：
<style>
.container {
background: red;
width: 200px;
height: 200px;
margin: 100px;
/* 第一个数是x放心偏移第二个是y方向偏移第三个是模糊区域10个像素
第四个是扩展区域大小。最后是阴影的颜色。
*/
/* 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>
<div class="container">
</div>
css实现一个机器猫： 内阴影与外阴影不同的是内阴影多了一个inset标志
<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>
<div class="container">
</div>
# text-shadow
text-shadow 属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表，每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0。
.container {
margin: 0 auto;
max-width: 800px;
font-size: 18px;
line-height: 2em;
font-family: STKaiti;
/* text-shadow: 1px 1px 0 #aaa; */
/* text-shadow: 0 0 1px rgba(128, 128, 128, .2); */
background: black;
text-shadow: -1px -1px 0 white,
-1px 1px 0 white,
1px -1px 0 white,
1px 1px 0 white;
text-shadow: 0 0 2px white;
}
# border-radius
- 圆角矩形
- 圆形
- 半圆、扇形
- 一些奇怪的角
.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;
}
# background
- 纹理、图案
- 渐变
- 雪碧图动画
- 背景图尺寸适应
雪碧图动画：实现一个向下的箭头，当鼠标移动到箭头上就会向上。
<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>
<div class="container">
<div class="i"></div>
</div>
背景图尺寸适应：
.container {
width: 400px;
height: 300px;
border: 1px solid red;
background: url(./panda.jpg);
/* 背景图的大小 ，可以设置为50% 50%；contain是将背景图完整的显示出来 */
/* background-size: contain; */
/* 背景图的重复 */
background-repeat: no-repeat;
/* 控制背景图的位置：设置图片居中 */
background-position: center center;
/* 覆盖整个画面保存长宽比不变 */
background-size: cover;
}
# clip-path
- 对容器进行裁剪
- 常见几何图形
- 自定义路径
<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;
/* 用方形裁剪100* 50 */
/* clip-path: inset(100px 50px); */
/* 100 * 100 有一个50px的半径圆 */
/* clip-path: circle(50px at 100px 100px); */
/* clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%, 10% 10%, 40px 10px); */
/* 指定裁剪的元素 裁剪的元素是一个svg */
clip-path: url(#clipPath);
/* background-size: cover; */
/* 支持动画 */
transition: clip-path .4s;
}
.container:hover {
/* clip-path: circle(80px at 100px 100px); */
}
</style>
<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>
# 3D 变换
- 变换 transform
- 在 3D 空间中进行变换
一个立体的盒子：
<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);
/* transform属性有变化的时候给一个400ms的动画 */
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 {
/* rotateY为以y轴进行旋转 */
/* 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>
<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>
# CSS 面试真题
# 如何用一个div画XXX
- box-shadow 无线投影
- ::before
- ::after
# 如何产生不占空间的边框
- box-shadow
- outline
# 如何实现圆形元素（头像）
- border-radius：50%
# 如何实现IOS图标的圆角
- clip-path（svg ）
# 如果实现半圆、扇形等图形
- border-radius组合
- 有无边框
- 边框粗细
- 圆角半径
# 如何实现背景图居中显示/不重复/改变大小
- background-position
- background-repeat
- background-size(cover/contain):cover覆盖整个容器,contain包含整个背景图
# 如何平移、放大一个元素
- transform:translateX(100px)
- transform:scale(2)
# 如何实现 3D 效果
- perspective: 500px
- transform-style:preserve-3d
- transform: translate rotate
阅读量：