APP
用shape-outside實現文字環繞
- 實現效果：
- 介紹：shape-outside是讓文字從圖片外部開始環繞，以及設置圖片的形狀。
?
- 函數定義：
- circle(size at x y);用于制作圓形size可以是%,px,rem,v*
- ellipse(size);用于制作橢圓形
- inset(top,right,bottom,left,round);矩形 前四個參數可縮寫如padding格式
- polygon(x1 y1,x2 y2,x3 y3);多邊形
- url();從圖像中提取形狀，圖像限于透明圖片
?
- Html代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="circle.css"> </head> <style> .block{ width: 300px; height: 50px; margin: 20px auto; } .img{ width: 200px; height: 200px; float: left; shape-outside: circle(); clip-path: circle(); background-color: pink; } </style> <body> <div class="block"> <div class='img'> </div> <div class="font">加好久好久好久好久好久考核計劃的回復我會和符號位胡吳海 峰吳紅紅蕪湖和黑偶然黑哦溫和的齊全哦我和叫哦后和皇后和同和和和和阿斯蒂 芬基本都是看不出窗口事件筆記本求</div> </div> </body> </html>
注意：clip-path 屬性可以將元素裁剪為基本形狀或 SVG 源。
?
CSS色彩漸變
- 介紹：conic-gradient() 函數，創建一個由漸變組成的圖像。
圓錐漸變是顏色過渡圍繞中心點旋轉，而不是從中心向外輻射。創建圓錐漸變至少需要設置兩個色標。
彩虹圓盤
- 實現效果：
?
?
- Html代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="circle.css"> <style> .block{ width:200px; height:200px; border-radius:100px; background:conic-gradient(red 0deg,red 30deg,orange 30deg,orange 180deg,yellow 180deg,yellow 360deg); } </style> </head> <body> <div class="block"> </div> </body> </html>
?
餅圖
- 實現效果：
?
- html代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="circle.css"> <style> .block{ width:200px; height:200px; border-radius:100px; background:conic-gradient(red 0deg,red 30deg,orange 30deg,orange 180deg,yellow 180deg,yellow 360deg); } </style> </head> <body> <div class="block"> </div> </body> </html>
注意：red 0deg,red 30deg指的是紅色是從多少度到多少度。
?
指定背景如何附著在容器上
- 介紹：使用background-attachment屬性。
?
- 屬性值：
| 值 | 描述 |
| scroll | 背景圖片隨著頁面的滾動而滾動，這是默認的。 |
| fixed | 背景圖片不會隨著頁面的滾動而滾動。 |
| local | 背景圖片會隨著元素內容的滾動而滾動。 |
| initial | 設置該屬性的默認值。 |
| inherit | 指定 background-attachment 的設置應該從父元素繼承。 |
?
?
長度單位vh
- 介紹：實現根據視口的高度，自適應某一部分的高度，表示相對視口高度。視口被均分為100單位的vh，即1vh = 1% * 視口高度?？梢杂脕斫鉀Q主體內容不足以撐起視口的剩余高度時，頁面底部留白太多的問題。
如：width:10px，可改成width:10vh。
本文摘自 ：https://www.cnblogs.com/
