慕课网CSS工作应用+面试（4）CSS效果

刺骨的言语ヽ痛彻心扉 2022-02-27 23:34 218阅读 0赞

**1.box-shadow**

box-shadow（阴影）  
text-shadow（文字阴影）  
border-radius（圆角边框）  
clip-path（可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。）

box-shadow：

box-shadow: h-shadow v-shadow blur spread color inset;
    box-shadow: 10px 10px 25px 20px #888888;

h-shadow:必需的。水平阴影的位置。允许负值  
v-shadow:必需的。垂直阴影的位置。允许负值  
blur:可选。模糊距离  
spread:可选。阴影的大小  
color:可选。阴影的颜色。

**2.text-shadow**

text-shadow:立体感、印刷的品质感、

text-shadow: h-shadow v-shadow blur color;
    text-shadow: 5px 5px 5px #FF0000;

h-shadow:必需。水平阴影的位置。允许负值。  
v-shadow:必需。垂直阴影的位置。允许负值。  
blur:可选。模糊的距离。  
color:可选。阴影的颜色。

**3.border-radius**

border-raduis:圆角矩形、圆形、半圆/扇形、一些奇怪的角角

border-radius：圆角的边框

每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。

border-radius:2em;
    
    is equivalent to:
    
    border-top-left-radius:2em;
    border-top-right-radius:2em;
    border-bottom-right-radius:2em;
    border-bottom-left-radius:2em;
    
    border-radius: 2em 1em 4em / 0.5em 3em;
    
    is equivalent to:
    
    border-top-left-radius: 2em 0.5em;
    border-top-right-radius: 1em 3em;
    border-bottom-right-radius: 4em 0.5em;
    border-bottom-left-radius: 1em 3em;

**4.background**

纹理、图案、渐变

雪碧图动画、背景图尺寸适用

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70]

利用渐变做的效果。

示例1雪碧图动画：

.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;
    }
    
    <div class="container">
        <div class="i"></div>
    </div>

![鼠标划入前][20190323191701644.png]  
![鼠标划入后][20190323191757486.png]  
background-position属性设置背景图像的起始位置。第一个值是水平位置，第二个值是垂直。

示例2背景图尺寸适用：

.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; */
    }
    
    <div class="container">
    </div>

background-position属性设置背景图像的起始位置。第一个值是水平位置，第二个值是垂直。

图片大于容器时候，使用`background-position:center center`会让图片居中，其他部分会裁掉。

同时我们还可以使用background-size设置背景图尺寸。

background-size: cover会覆盖整个画面，同时长宽比不变。background-size:contain也有类似功能

background-size cover和contain的区别：  
不同之处在于：

1.  在no-repeat情况下，如果容器宽高比与图片宽高比不同，  
    cover：图片宽高比不变、铺满整个容器的宽高，而图片多出的部分则会被截掉；  
    contain:图片自身的宽高比不变，缩放至图片自身能完全显示出来，所以容器会有留白区域；  
    PS:其实，从英文的意思来说：cover意味着“遮罩、遮盖”—此处理解为“塞满”较恰当，contain意为“包含”–也就是：我图片虽然缩放了，但是整个图是被“包含”在你里面的，你必须把我显示完整、不能裁剪我一丝一毫~
2.  在repeat情况下：cover:与上述相同；contain:容器内至少有一张完整的图，容器留白区域则平铺背景图，铺不下的再裁掉。

参考文章：  
[https://zhidao.baidu.com/question/2079356359943570108.html][https_zhidao.baidu.com_question_2079356359943570108.html]  
[https://blog.csdn.net/zchcode/article/details/42773581][https_blog.csdn.net_zchcode_article_details_42773581]

**5.clip-path**

参考文章：[https://segmentfault.com/a/1190000010936207][https_segmentfault.com_a_1190000010936207]

clip-path：对容器进行裁剪、常见几何图形、自定义路径

clip-path 直译过来就是裁剪路径，使用SVG或形状定义一个HTML元素的可见区域的方法。

clip-path可以用于动画效果。

1.inset 基本图形矩形

//分别对应top,right,bottom,left的裁剪位置,round radius（可选，圆角）
    clip-path: inset(2em 3em 2em 1em round 2em);

2.circle 基本图形圆形

//2个可选参数:圆的半径，默认元素宽高中短的那个为直径，支持百分比 ; 圆心位置，默认为元素中心点
    clip-path: circle(30% at 150px 120px);

3.ellipse 基本图形椭圆

//3个可选参数:
    椭圆的X轴半径，默认是宽度的一半，支持百分比;
    椭圆的Y轴半径，默认是高度的一半，支持百分比;
    椭圆中心位置，默认是元素的中心点
    clip-path: ellipse(45% 30% at 50% 50%);

4.polygon 基本图形多边形

**6.3D-transform**

**7.CSS面试真题**

1.如何用一个div画XXX

box-shadow无限投影  
::before  
::after

2.如何产生不占空间的边框

第1种方法：box-shadow  
第2种方法：outline  
第3种方法：box-sizing

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。  
例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 “border-box”。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。

就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。  
通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

3.如何实现圆形元素（头像）

border-raduis:50%

4.如何实现IOS图标的圆角

clip-path:(svg)

5.如何实现半圆、扇形等图形

通过border-raduis组合：  
有无边框  
边框粗细  
圆角半径

6.如何实现背景图居中显示/不重复/改变大小

background-position  
background-repeat  
background-size（cover/contain）

7.如何平移/放大一个元素

transform:translateX(100px)  
transform:scale(2)

transform这个属性允许你将元素旋转，缩放，移动，倾斜等。  
transition是动画效果。

8.如何实现3D效果

perspective:500px;
    transform-style:preserve-3d;
    transform:translate rotate ...

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70]: /images/20220228/1a08a345d04b404c905931514d98de3c.png
[20190323191701644.png]: /images/20220228/7906c26c76504423b7b2be25cecc5df6.png
[20190323191757486.png]: /images/20220228/4524b480a5e4436fa979e5671cb5820c.png
[https_zhidao.baidu.com_question_2079356359943570108.html]: https://zhidao.baidu.com/question/2079356359943570108.html
[https_blog.csdn.net_zchcode_article_details_42773581]: https://blog.csdn.net/zchcode/article/details/42773581
[https_segmentfault.com_a_1190000010936207]: https://segmentfault.com/a/1190000010936207