• 【css揭秘】- 47个不可不知的 css 技巧(上篇0-19)

    我正在参与掘金创作者训练营第6期，点击了解活动详情

    前言

    《css 揭秘》这本书以案例的形式，介绍了 47 个网页设计经典难题的解决方案，我在学习之余将其一一记录下来，方便回顾，本文介绍前 19个案例效果及代码。

    在线预览 play.csssecrets.io

    1-半透明边框

    难题

    当你用 rgba() 或者 hsla() ，写了一个半透明的颜色，给到容器边框时候，你会发现，没有半透明效果，这是因为默认情况下，背景色会填充到边框区域，导致边框的半透明效果失效，当把 border 样式设置为 dashed 时候，你会很直观的发现这一点。

    方案

    使用 background-clip 属性调整上面的默认效果，这个属性的默认值为 border-box，此时背景会被元素的border 给遮盖，它还可以配置 padding-box || content-box, 此时浏览器将以内边距或内容区外沿来渲染。 修改后，border 的半透明效果就生效了。 

    拓展

    background-clip 还有个 text 属性，很有意思，当设置为text 后，背景会被裁剪成文字的前景色。 

    2-多重边框

    难题

    使用 border 来生成单一的边框很容易，但是若想生成多重边框就做不到了，通常需要使用各种 hack 例如使用多个元素来模拟实现。

    方案1： box-shadow

    一个正值的扩张半径加上两个为零的偏移量以及为零的模糊值，得到的“投影”其实就是一条实线；再结合 box-shadow 的逗号分隔语法，来创建任意数量的投影。

     注意：

    1. 投影行为跟边框不完全一致
    2. 生成的边框默认出现在元素外圈，可以加上 inset 关键字来使投影绘制在元素的内圈，注意预留足够的内边距来腾出足够的间隙

    方案2 : outline

    如果只需要两层边框，可以在常规边框的基础上，增加 outline(描边)属性来产生外层的边框，特点是比较灵活。

    总结

    这两种方案都可以实现多重边框的效果，但是outline 只适用于双层边框的场景，如果需要更多层边框，可以用 box-shadow 来实现，另外这两种方案都有一个潜在的缺陷，采用时一定要在不同的浏览器中测试好最终效果。

    3-灵活的背景定位

    难题

    想要的效果：使背景图片针对某个角进行准确的偏移定位？

    方案1 background-position

    方案2 background-origin

    这种方案的优点是，当内边距改变时，其会自动进行位置偏移更新，不用重新声明新的偏移量。

    方案3 calc()

    calc() 也可以结合 background-position 进行准确的计算偏移量，达到同样的效果。注意 calc() 函数内部的 - 和 + 运算符两侧需要各加一个空白符，否则会解析错误。

    1. background-position: calc(100% - 20px) calc(100% - 10px);
    2. 复制代码

    4-边框内圆角

    想要的效果如下，只显示内部圆角，外部仍然为矩角 

    方案1双元素叠加

    使用双 div 元素叠加来实现

    1. <div class="parent">
    2.   <div class="child">div>
    3. div>
    4.  
    5. .parent {
    6.   margin: 100px auto;
    7.   width: 400px;
    8.   height: 200px;
    9.   background: #655;
    10.   padding: 0.8em;
    11. }
    12.  
    13. .child {
    14.   height: 170px;
    15.   background: tan;
    16.   padding: 1em;
    17.   border-radius: 0.8em;
    18. }
    19.  
    20. 复制代码

    方案2 单元素

    这种方案在书中提到是个 hack, 果然我写这篇文章的时候，验证了谷歌浏览器中 outline 的样式会跟着border-radius 走，所以这个方案基本已经失效了。

    1. div {
    2.     outline: .6em solid #655;
    3.     box-shadow: 0 0 0 .4em #655; /* todo calculate max of this */
    4.  
    5.     max-width: 10em;
    6.     border-radius: .8em;
    7.     padding: 1em;
    8.     margin: 1em;
    9.     background: tan;
    10.     font: 100%/1.5 sans-serif;
    11. }
    12.  
    13. 复制代码

    5-条纹背景

    介绍

    传统方案都是用 svg 或者图片来解决，这里直接使用 css 来创建条纹图案

    1. // 水平条纹效果
    2. background: linear-gradient(#fb3 50%, #58a 50%); 
    3. background-size: 100% 30px;
    4.  
    5. // 垂直条纹效果
    6. background: linear-gradient(to right, #fb3 50%, #58a 0);
    7. background-size: 30px 100%;
    8.  
    9. // 斜向条纹
    10. background: linear-gradient(45deg, #fb3 50%, #58a 0);
    11. background-size: 30px 30px;
    12.  
    13. // 同色系条纹
    14. background: repeating-linear-gradient(30deg, #79b, #79b 15px, #58a 0, #58a 30px);
    15. background: #58a;
    16.  
    17. // 同色系条纹 重构
    18. background: repeating-linear-gradient(
    19.   30deg, 
    20.   hsla(0, 0%, 100%, .1),
    21.   hsla(0, 0%, 100%, .1) 15px,
    22.   transparent 0,
    23.   transparent 30px);
    24. background: #58a;
    25. 复制代码

    6-复杂的背景图案

    桌布图案

    1.  
    2. /**
    3.  * Checkerboard
    4.  */
    5.  
    6. background: #eee;
    7. background-image: 
    8. 	linear-gradient(45deg, rgba(0,0,0,.25) 25%, transparent 0, transparent 75%, rgba(0,0,0,.25) 0),
    9. 	linear-gradient(45deg, rgba(0,0,0,.25) 25%, transparent 0, transparent 75%, rgba(0,0,0,.25) 0);
    10. background-position: 0 0, 15px 15px;
    11. background-size: 30px 30px;
    12.  
    13. min-height: 100%;
    14.  
    15. /**
    16.  * Polka dot
    17.  */
    18.  
    19. background: #655;
    20. background-image: radial-gradient(tan 20%, transparent 0),
    21.                   radial-gradient(tan 20%, transparent 0);
    22. background-size: 30px 30px;
    23. background-position: 0 0, 15px 15px;
    24. 复制代码

    棋盘

    1. /**
    2.  * Checkerboard
    3.  */
    4.  
    5. background: #eee;
    6. background-image: 
    7. 	linear-gradient(45deg, rgba(0,0,0,.25) 25%, transparent 0, transparent 75%, rgba(0,0,0,.25) 0),
    8. 	linear-gradient(45deg, rgba(0,0,0,.25) 25%, transparent 0, transparent 75%, rgba(0,0,0,.25) 0);
    9. background-position: 0 0, 15px 15px;
    10. background-size: 30px 30px;
    11.  
    12. min-height: 100%;
    13.  
    14. /**
    15.  * Checkerboard with SVG
    16.  */
    17.  
    18. background: #eee url('data:image/svg+xml,\
    19.             \
    20.             \
    21.             \
    22.             ');
    23. background-size: 30px 30px;
    24. 复制代码

    角向渐变

    1. /**
    2.  * Conic gradients test
    3.  * PASS if green gradient, FAIL if red.
    4.  */
    5.  
    6. background: red;
    7. background: conic-gradient(limegreen, green, limegreen);
    8. min-height: 100%;
    9. 复制代码

    7-伪随机背景

    难点：重复的平铺图案虽然美观，但是不太自然，下面介绍增加随机性背景的方法 

    1.  
    2. /**
    3.  * Pseudorandom stripes
    4.  */
    6. background: hsl(20, 40%, 90%);
    7. background-image: 
    8. 	linear-gradient(90deg, #fb3 11px, transparent 0),
    9. 	linear-gradient(90deg, #ab4 23px, transparent 0),
    10. 	linear-gradient(90deg, #655 23px, transparent 0);
    11. background-size: 83px 100%, 61px 100%, 41px 100%;
    12. 复制代码

    8-连续的图像边框

    难点：通常这种效果是借助双 Dom 来实现，一个作为背景图，一个作为内容；我们的改进方案是基于一个元素来实现的。

    1. /**
    2.  * Basic border-image demo
    3.  */
    4.  
    5. div {
    6. 	border: 40px solid transparent;
    7. 	border-image: 33.334% url('data:image/svg+xml,<svg xmlns="http:%2F%2Fwww.w3.org%2F2000%2Fsvg" width="30" height="30"> \
    8. 	                      <circle cx="5" cy="5" r="5" fill="%23ab4"%2F><circle cx="15" cy="5" r="5" fill=" %23655"%2F> \
    9. 	                      <circle cx="25" cy="5" r="5" fill="%23e07"%2F><circle cx="5" cy="15" r="5" fill=" %23655"%2F> \
    10. 	                      <circle cx="15" cy="15" r="5" fill="hsl(15, 25%, 75%)"%2F> \
    11. 	                      <circle cx="25" cy="15" r="5" fill=" %23655"%2F><circle cx="5" cy="25" r="5" fill="%23fb3"%2F> \
    12. 	                      <circle cx="15" cy="25" r="5" fill=" %23655"%2F><circle cx="25" cy="25" r="5" fill="%2358a"%2F><%2Fsvg>');
    13. 	padding: 1em;
    14. 	max-width: 20em;
    15. 	font: 130%/1.6 Baskerville, Palatino, serif;
    16. }
    17.  
    18. div:nth-child(2) {
    19. 	margin-top: 1em;
    20. 	border-image-repeat: round;
    21. }

    利用上面的条纹背景

    1. /**
    2.  * Vintage envelope themed border
    3.  */
    4.  
    5. div {
    6.     padding: 1em;
    7.     border: 1em solid transparent;
    8.     background: linear-gradient(white, white) padding-box,
    9.                 repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%, 
    10.                   #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0 / 6em 6em;
    11.  
    12.     max-width: 20em;
    13.     font: 100%/1.6 Baskerville, Palatino, serif;
    14. }

    9-自适应的椭圆

    难点：border-radius 其实可以单独指定水平和垂直半径，用斜杠（/）分隔这两个值即可。利用这个特性可以创建椭圆圆角。

    椭圆

    1. /**
    2.  * Flexible ellipse
    3.  */
    4.  
    5. div {
    6.     width: 20em;
    7.     height: 10em;
    8.     background: #fb3;
    9.     border-radius: 50%;
    10. }

    半椭圆

    1. /**
    2.  * Flexible half ellipse
    3.  */
    4.  
    5. div {
    6.     display: inline-block;
    7.     width: 16em;
    8.     height: 10em;
    9.     margin: 1em;
    10.     background: #fb3;
    11.     border-radius: 50% / 100% 100% 0 0;
    12. }
    13.  
    14. div:nth-of-type(2) { border-radius: 50% / 0 0 100% 100%; }
    15. div:nth-of-type(3) { border-radius: 100% 0 0 100% / 50%; }
    16. div:nth-of-type(4) { border-radius: 0 100% 100% 0 / 50%; }

    四分之一椭圆

    1.  
    2. /**
    3.  * Flexible quarter ellipse
    4.  */
    5.  
    6. div {
    7.     display: inline-block;
    8.     width: 16em;
    9.     height: 10em;
    10.     margin: 1em;
    11.     background: #fb3;
    12.     border-radius: 100% 0 0 0;
    13. }
    14.  
    15. div:nth-of-type(2) { border-radius: 0 100% 0 0; }
    16. div:nth-of-type(3) { border-radius: 0 0 100% 0; }
    17. div:nth-of-type(4) { border-radius: 0 0 0 100%; }

    10-平行四边形

    背景知识： 基本的 css 变形 transform: skewx()

    潜套元素方案

    可以解决文字变形的问题

    1. /**
    2.  * Parallelograms — with extra HTML element
    3.  */
    4.  
    5. <a href="#yolo" class="button"><div>Click mediv>a>
    6. <button class="button"><div>Click mediv>button>
    7.   
    8.  
    9. .button { transform: skewX(45deg); }
    10. .button > div { transform: skewX(-45deg); }
    11.  
    12. .button {
    13.     display: inline-block;
    14.     padding: .5em 1em;
    15.     border: 0; margin: .5em;
    16.     background: #58a;
    17.     color: white;
    18.     text-transform: uppercase;
    19.     text-decoration: none;
    20.     font: bold 200%/1 sans-serif;
    21. }

    伪元素方案

    1. /**
    2.  * Parallelograms — with pseudoelements
    3.  */
    4.  
    5. <a href="#yolo" class="button"><div>Click mediv>a>
    6. <button class="button"><div>Click mediv>button>
    7.  
    8. .button {
    9.     position: relative;
    10.     display: inline-block;
    11.     padding: .5em 1em;
    12.     border: 0; margin: .5em;
    13.     background: transparent;
    14.     color: white;
    15.     text-transform: uppercase;
    16.     text-decoration: none;
    17.     font: bold 200%/1 sans-serif;
    18. }
    19.  
    20. .button::before {
    21.     content: ''; /* To generate the box */
    22.     position: absolute;
    23.     top: 0; right: 0; bottom: 0; left: 0;
    24.     z-index: -1;
    25.     background: #58a;
    26.     transform: skew(45deg);
    27. }

    11-菱形图片

    介绍两种使用 css 制作菱形图片的方案，相对于设计师提供裁切好的图片，更加灵活 

    基于变形的方案

    1. /**
    2.  * Diamond images — via transforms
    3.  */
    4. <div class="diamond">
    5.     <img src="http://placekitten.com/200/300" />
  • .diamond {
  • width: 250px;
  • height: 250px;
  • transform: rotate(45deg);
  • overflow: hidden;
  • margin: 100px;
  • }
  • .diamond img {
  • max-width: 100%;
  • transform: rotate(-45deg) scale(1.42);
  • z-index: -1;
  • position: relative;
  • }

    • 裁切路径方案

    1. /**
    2.  * Diamond images — via clip-path
    3.  */
    4.  
    5. img {
    6.     max-width: 250px;
    7.     margin: 20px;
    8.     -webkit-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    9.     clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    10.     transition: 1s;
    11. }
    12.  
    13. img:hover {
    14.     -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    15.     clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    16. }

    12-切角效果

    背景知识：css 渐变，background-size,'条纹背景'

    切角是一种流行的设计风格，使用css 制作切角可以实现更加灵活和多样的颜色效果

    渐变方案

    1. <div>Hey, focus! You’re er!div>
    2.  
    3. /**
    4.  * Beveled corners — with gradients
    5.  */
    6.  
    7. div {
    8.     background: #58a;
    9.     background: linear-gradient(135deg, transparent 15px, #58a 0) top left,
    10.                 linear-gradient(-135deg, transparent 15px, #58a 0) top right,
    11.                 linear-gradient(-45deg, transparent 15px, #58a 0) bottom right,
    12.                 linear-gradient(45deg, transparent 15px, #58a 0) bottom left;
    13.     background-size: 50% 50%;
    14.     background-repeat: no-repeat;
    15.  
    16.     padding: 1em 1.2em;
    17.     max-width: 12em;
    18.     color: white;
    19.     font: 150%/1.6 Baskerville, Palatino, serif;
    20. }
    21.

    弧形切角

    渐变技巧的一个变种 

    1. /**
    2.  * Scoop corners
    3.  */
    4.  
    5. div {
    6.     background: #58a;
    7.     background:	radial-gradient(circle at top left, transparent 15px, #58a 0) top left,
    8. 	            radial-gradient(circle at top right, transparent 15px, #58a 0) top right,
    9. 	            radial-gradient(circle at bottom right, transparent 15px, #58a 0) bottom right,
    10. 	            radial-gradient(circle at bottom left, transparent 15px, #58a 0) bottom left;
    11. background-size: 50% 50%;
    12. background-repeat: no-repeat;
    13.  
    14. padding: 1em 1.2em;
    15. max-width: 12em;
    16. color: white;
    17. font: 130%/1.6 Baskerville, Palatino, serif;
    18. }

    内联 SVG 与 border-image 方案

    1. /**
    2.  * Beveled corners — with border-image and an inline SVG
    3.  */
    4.  
    5. div {
    6.     border: 21px solid transparent;
    7.     border-image: 1 url('data:image/svg+xml,\
    8.                           <svg xmlns="http://www.w3.org/2000/svg" width="3" height="3" fill="%2358a">\
    9.                           <polygon points="0,1 1,0 2,0 3,1 3,2 2,3 1,3 0,2" />\
    10.                           svg>');
    11.     background: #58a;
    12.     background-clip: padding-box;
    13.  
    14.     padding: .2em .3em;
    15.     max-width: 12em;
    16.     color: white;
    17.     font: 150%/1.6 Baskerville, Palatino, serif;
    18. }

    裁切路径方案

     强烈推荐这种，可以比较方便的制作大量不同颜色的切角图片，只需要改变背景色就好。

    1. /**
    2.  * Beveled corners — with clip-path
    3.  */
    4.  
    5. div {
    6.     background: #58a;
    7.     -webkit-clip-path: 
    8.             polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px),
    9.             calc(100% - 20px) 100%,
    10.             20px 100%, 0 calc(100% - 20px), 0 20px);
    11.     clip-path:
    12.                     polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px),
    13.                     calc(100% - 20px) 100%,
    14.                     20px 100%, 0 calc(100% - 20px), 0 20px);
    15.  
    16.     padding: 1em 1.2em;
    17.     max-width: 12em;
    18.     color: white;
    19.     font: 150%/1.6 Baskerville, Palatino, serif;
    20. }

    13-梯形标签页

    背景知识：基本的3D变形，“平行四边形”

    方案1: 伪元素制作两条斜边，border 制作上下平行边 方案2: 3D 旋转，普通的3D 旋转会有副作用比如 文字的变形

    1.  
    3.  
    4. <nav>
    5.     <a href="#">Homea>
    6.     <a href="#" class="selected">Projectsa>
    7.     <a href="#">Abouta>
    8. nav>
    9. <main>
    10.     Content area
    11. main>
    12.  
    13. <nav class="left">
    14.     <a href="#">Homea>
    15.     <a href="#" class="selected">Projectsa>
    16.     <a href="#">Abouta>
    17. nav>
    18. <main>
    19.     Content area
    20. main>
    21.  
    22. <nav class="right">
    23.     <a href="#">Homea>
    24.     <a href="#" class="selected">Projectsa>
    25.     <a href="#">Abouta>
    26. nav>
    27. <main>
    28.     Content area
    29. main>
    30.  
    31. /**
    32.  * Trapezoid tabs
    33.  */
    34.  
    35. body {
    36.     padding: 40px;
    37.     font: 130%/2 Frutiger LT Std, sans-serif;
    38. }
    39.  
    40. nav {
    41.     position: relative;
    42.     z-index: 1;
    43.     padding-left: 1em;
    44. }
    45.  
    46. nav > a {
    47.     position: relative;
    48.     display: inline-block;
    49.     padding: .3em 1em 0;
    50.     color: inherit;
    51.     text-decoration: none;
    52.     margin: 0 -.3em;
    53. } 
    54.  
    55. nav > a::before,
    56. main {
    57.     border: .1em solid rgba(0,0,0,.4);
    58. }
    59.  
    60. nav a::before {
    61.     content: ''; /* To generate the box */
    62.     position: absolute;
    63.     top: 0; right: 0; bottom: 0; left: 0;
    64.     z-index: -1;
    65.     border-bottom: none;
    66.     border-radius: .5em .5em 0 0;
    67.     background: #ccc linear-gradient(hsla(0,0%,100%,.6), hsla(0,0%,100%,0));
    68.     box-shadow: 0 .15em white inset;
    69.     transform: scale(1.1, 1.3) perspective(.5em) rotateX(5deg);
    70.     transform-origin: bottom;
    71. }
    72.  
    73. nav a.selected { z-index: 2;}
    74.  
    75. nav a.selected::before {
    76.     background-color: #eee;
    77.     margin-bottom: -.08em;
    78. }
    79.  
    80. main {
    81.     display: block;
    82.     margin-bottom: 1em;
    83.     background: #eee;
    84.     padding: 1em;
    85.     border-radius: .15em;
    86. }
    87.  
    88. nav.left > a::before {
    89.     transform: scale(1.2, 1.3) perspective(.5em) rotateX(5deg);
    90.     transform-origin: bottom left;
    91. }
    92.  
    93. nav.right { padding-left: 2em; }
    94.  
    95. nav.right > a::before {
    96.     transform: scale(1.2, 1.3) perspective(.5em) rotateX(5deg);
    97.     transform-origin: bottom right;
    98. }

    14-简单的饼图 

    基于transtorm 和 animation

    1. /**
    2.  * Animated pie chart
    3.  */
    4.  
    5. .pie {
    6.     width: 100px; height: 100px;
    7.     border-radius: 50%;
    8.     background: yellowgreen;
    9.     background-image: linear-gradient(to right, transparent 50%, currentColor 0);
    10.     color: #655;
    11. }
    12.  
    13. .pie::before {
    14.     content: '';
    15.     display: block;
    16.     margin-left: 50%;
    17.     height: 100%;
    18.     border-radius: 0 100% 100% 0 / 50%;
    19.     background-color: inherit;
    20.     transform-origin: left;
    21.     animation: spin 3s linear infinite, bg 6s step-end infinite;
    22. }
    23.  
    24. @keyframes spin {
    25.     to { transform: rotate(.5turn); }
    26. }
    27. @keyframes bg {
    28.     50% { background: currentColor; }
    29. }

    1. /**
    2.  * Static pie charts
    3.  */
    4.  
    5. .pie {
    6.     display: inline-block;
    7.     position: relative;
    8.     width: 100px;
    9.     line-height: 100px;
    10.     border-radius: 50%;
    11.     background: yellowgreen;
    12.     background-image: linear-gradient(to right, transparent 50%, #655 0);
    13.     color: transparent;
    14.     text-align: center;
    15. }
    16.  
    17. @keyframes spin {
    18.     to { transform: rotate(.5turn); }
    19. }
    20. @keyframes bg {
    21.     50% { background: #655; }
    22. }   
    23.  
    24. .pie::before {
    25.     content: '';
    26.     position: absolute;
    27.     top: 0; left: 50%;
    28.     width: 50%; height: 100%;
    29.     border-radius: 0 100% 100% 0 / 50%;
    30.     background-color: inherit;
    31.     transform-origin: left;
    32.     animation: spin 50s linear infinite, bg 100s step-end infinite;
    33.     animation-play-state: paused;
    34.     animation-delay: inherit;
    35. }

    SVG 方案

    1. /**
    2.  * Pie charts — with SVG
    3.  */
    4.  
    5. .pie {
    6.     width: 100px;
    7.     height: 100px;
    8.     display: inline-block;
    9.     margin: 10px;
    10.     transform: rotate(-90deg);
    11. }
    12.  
    13. svg {
    14.     background: yellowgreen;
    15.     border-radius: 50%;
    16. }
    17.  
    18. circle {
    19.     fill: yellowgreen;
    20.     stroke: #655;
    21.     stroke-width: 32;
    22. }
    23.  
    24. @keyframes grow { to { stroke-dasharray: 100 100 } }
    25.  
    26. .pie.animated circle {
    27.     animation: grow 2s infinite linear;
    28. }

    15-单侧投影

    单侧投影

    1. /**
    2.  * One-sided shadow
    3.  */
    4.  
    5. div {
    6.     width: 1.6in;
    7.     height: 1in;
    8.     background: #fb3;
    9.     box-shadow: 0 5px 4px -4px black;
    10. }

    邻边投影

    1. /**
    2.  * One-sided shadow
    3.  */
    4.  
    5. div {
    6.     width: 1.6in;
    7.     height: 1in;
    8.     background: #fb3;
    9.     box-shadow: 3px 3px 6px -3px black;
    10. }

    双侧投影

    1. /**
    2.  * One-sided shadow
    3.  */
    4.  
    5. div {
    6.     width: 1.6in;
    7.     height: 1in;
    8.     background: #fb3;
    9.     box-shadow: 5px 0 5px -5px black,
    10.                -5px 0 5px -5px black;
    11. }
    12. 复制代码

    16-不规则投影

    1. <div class="speech">Speech bubblediv>
    2. <div class="dotted">Dotted borderdiv>
    3. <div class="cutout">Cutout cornersdiv>
    4.  
    5. /**
    6.  * Irregular drop-shadows
    7.  */
    8.  
    9. div {
    10.     position: relative;
    11.     display: inline-flex;
    12.     flex-direction: column;
    13.     justify-content: center;
    14.     vertical-align: bottom;
    15.     box-sizing: border-box;
    16.     width: 5.9em;
    17.     height: 5.2em;
    18.     margin: .6em;
    19.     background: #fb3;
    20.     /*box-shadow: .1em .1em .3em rgba(0,0,0,.5);*/
    21.     -webkit-filter: drop-shadow(.1em .1em .1em rgba(0,0,0,.5));
    22.     filter: drop-shadow(.1em .1em .1em rgba(0,0,0,.5));
    23.     font: 200%/1.6 Baskerville, Palatino, serif;
    24.     text-align: center;
    25. }
    26.  
    27. .speech {
    28.     border-radius: .3em;
    29. }
    30.  
    31. .speech::before {
    32.     content: '';
    33.     position: absolute;
    34.     top: 1em;
    35.     right: -.7em;
    36.     width: 0;
    37.     height: 0;
    38.     border: 1em solid transparent;
    39.     border-left-color: #fb3;
    40.     border-right-width: 0;
    41. }
    42.  
    43. .dotted {
    44.     background: transparent;
    45.     border: .3em dotted #fb3;
    46. }
    47.  
    48. .cutout {
    49.     border: .5em solid #58a;
    50.     border-image: 1 url('data:image/svg+xml,\
    51.                          
    52.                              width="3" height="3" fill="%23fb3">\
    53.                              \
    54.                     ');
    55.     background-clip: padding-box;
    56. }

    17-染色效果

    基于滤镜的方案

    1. /**
    2.  * Color tinting — with filters
    3.  */
    4.  
    5. img {
    6.     max-width: 640px;
    7.     transition: 1s filter, 1s -webkit-filter;
    8.     -webkit-filter: sepia() saturate(4) hue-rotate(295deg);
    9.     filter: sepia() saturate(4) hue-rotate(295deg);
    10. }
    11.  
    12. img:hover,
    13. img:focus {
    14.     -webkit-filter: none;
    15.     filter: none;
    16. }

    基于混合模式的方案

    1. /**
    2.  * Color tinting — with blending modes
    3.  */
    4.  
    5. .tinted-image {
    6.     width: 300px; height: 440px;
    7.     background-size: cover;
    8.     background-color: hsl(335, 100%, 50%);
    9.     background-blend-mode: luminosity;
    10.     transition: .5s background-color;
    11. }
    12.  
    13. .tinted-image:hover {
    14.     background-color: transparent;
    15. }

    18-毛玻璃效果

    背景知识：PGBA/HSLA 颜色 , filter: blur()

    1. /**
    2.  * Frosted glass effect
    3.  */
    4.  
    5. body {
    6.     min-height: 100vh;
    7.     box-sizing: border-box;
    8.     margin: 0;
    9.     padding-top: calc(50vh - 6em);
    10.     font: 150%/1.6 Baskerville, Palatino, serif;
    11. }
    12.  
    13. body, main::before {
    14. 	background: url("http://placekitten.com/200/300") 0 / cover fixed;
    15. }
    16.  
    17. main {
    18.     position: relative;
    19.     margin: 0 auto;
    20.     padding: 1em;
    21.     max-width: 23em;
    22.     background: hsla(0,0%,100%,.25) border-box;
    23.     overflow: hidden;
    24.     border-radius: .3em;
    25.     box-shadow: 0 0 0 1px hsla(0,0%,100%,.3) inset,
    26.                 0 .5em 1em rgba(0, 0, 0, 0.6);
    27.     text-shadow: 0 1px 1px hsla(0,0%,100%,.3);
    28. }
    29.  
    30. main::before {
    31.     content: '';
    32.     position: absolute;
    33.     top: 0; right: 0; bottom: 0; left: 0;
    34.     margin: -30px;
    35.     z-index: -1;
    36.     -webkit-filter: blur(20px);
    37.     filter: blur(20px);
    38. }
    39.  
    40. blockquote { font-style: italic }
    41. blockquote cite { font-style: normal; }
    42. 复制代码

    19-折角效果

    背景知识： css 变形， css 渐变， “切角效果”

    45度折角的解决方案

    1. /**
    2.  * Folded corner effect
    3.  */
    4.  
    5. div {
    6.     width: 12em;
    7.     background: #58a; /* Fallback */
    8.     background:
    9.             linear-gradient(to left bottom, transparent 50%, rgba(0,0,0,.4) 0) 100% 0 no-repeat,
    10.             linear-gradient(-135deg, transparent 1.5em, #58a 0);
    11.     background-size: 2em 2em, auto;
    12.  
    13.     padding: 2em;
    14.     color: white;
    15.     font: 100%/1.6 Baskerville, Palatino, serif;
    16. }
    17. 复制代码

    其他角度的解决方案

    1. /**
    2.  * Folded corner effect — at an angle
    3.  */
    4.  
    5. div {
    6.     position: relative;
    7.     width: 12em;
    8.     background: #58a; /* Fallback */
    9.     background: linear-gradient(-150deg, transparent 1.5em, #58a 0);
    10.     padding: 2em;
    11.     color: white;
    12.     font: 100%/1.6 Baskerville, Palatino, serif;
    13.     border-radius: .5em;
    14. }
    15.  
    16. div::before {
    17.     content: '';
    18.     position: absolute;
    19.     top: 0; right: 0;
    20.     width: 1.73em; height: 3em;
    21.     background: linear-gradient(to left bottom, transparent 50%, rgba(0,0,0,.2) 0, rgba(0,0,0,.4)) 100% 0 no-repeat;
    22.     transform: translateY(-1.3em) rotate(-30deg);
    23.     transform-origin: bottom right;
    24.     border-bottom-left-radius: .5em;
    25.     box-shadow: -.2em .2em .3em -.1em rgba(0,0,0,.15)
    26. }

     总结给大家推荐一个实用面试题库

     1、前端面试题库 （面试必备）            推荐：★★★★★

    地址：前端面试题库

  • 相关阅读:
    22Excel
    直播课堂系统01-数据库表设计
    Opencv_4_图像像素的读写操作
    指针练习(2)
    开发需知的文件加密与解密
    Matplotlib（三）通过plt.subplots创建子绘图
    前端部署iis后axios跨域请求问题
    解决electron-builder制作的安装包在安装过程中出现“安装中止”的问题
    一文带你了解MySQL之redo日志
    Day801.内存问题排查方案 -Java 性能调优实战
  • 原文地址：https://blog.csdn.net/weixin_42981560/article/details/126678775