css常用技巧梳理

1、圖片文字環繞

shape-outside 是一個允許設定形狀的 CSS 屬性。它還有助於定義文字流動的區域

.any-shape {
  width: 300px;
  float: left;
  shape-outside: circle(50%);
}

圓形：shape-outside: circle(50%);  //第一個值代表半徑
橢圓：shape-outside: ellipse(60px 80px);  //第一個值代表半徑；第二個值代表半徑
多邊形：
shape-outside: polygon(0 0,100% 100%,0 100%);（三角形）
shape-outside: polygon(100px 0,200px 60px,200px 120px,100px 200px,0 120px,0 60px);（六邊形）

//最少3個值，也就是說，至少要3個點組成一個三角形，每個點有x，y方向移動的兩個值（均從左上方開始移動）

2、:where() 簡化程式碼

原：
.parent div,
.parent .title,
.parent #article {
  color: red;
}

改：
.parent :where(div, .title, #article) {
  color: red;
}

3、實現平滑滾動

凡是需要滾動的地方都加一句scroll-behavior:smooth 來提升滾動體驗！

a、經常使用的錨點定位功能就有了平滑定位功能，如
<a href="#">返回頂部</a>

b、全域性css中也建議新增
html, body { scroll-behavior:smooth; }

4、背景混合模式

.blend-2 {
  background-image: url(../xx/xxx.jpg);
  width: 100vw;
  height: 500px;
  background-color: #20126f;
  background-size: cover;
  background-blend-mode: overlay;
}

background-blend-mode分為如下幾種模式 

normal：預設值。設定正常的混合模式
multiply：正片疊底模式
screen：濾色模式
overlay：疊加模式
darken：變暗模式
lighten：變亮模式
color-dodge：顏色減淡模式
saturation：飽和度模式
color：顏色模式
luminosity：亮度模式

5、影像填充文字效果

background-clip 屬性規定背景的繪製區域

border-box：以盒邊界來裁剪
padding-box：以內邊距為邊界來裁剪
content-box：以內容區域來裁剪

迴歸主題：
background-clip: text; 顧名思義 就是 以文字的範圍來裁剪背景圖片

h1 {
  background-image: url('./flower.jpg');
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  background-color: white;
}

6、文字描邊效果

div{
 color: #fff;
 font-size: 80px;
  -webkit-text-stroke: 2px blue;
  text-stroke: 2px blue;
}

<div>
這是文字。
</div>

text-stroke 屬性值中有兩部分，第一部分是文字描邊的寬度，第二部分是文字描邊的顏色。

7、將文字設為大寫或小寫

/* 大寫 */
.upper {
  text-transform: uppercase;
}

/* 小寫 */
.lower {
  text-transform: lowercase;
}

<div class="upper">
    fdsdsdsd
</div>
<div class="lower">
    DFDSWRREE
</div>

8、暫停/播放偽類

:paused 偽類可以為處於暫停狀態的媒體元素設定樣式

video:paused {
  opacity: 0.6;
}

需要注意，目前僅 Safari 支援該偽類:paused

9、毛玻璃特效

.login {
  backdrop-filter: blur(5px);
}

其他引數：
blur()

模糊: blur(5px)
亮度: brightness(1.4)
對比度: contrast(2)
投影: drop-shadow(4px 4px 8px #fff)
灰度: grayscale(60%)
色調變化: hue-rotate(66deg)
反相: invert(60%)
透明度: opacity(50%)
飽和度: saturate(250%)
褐色: sepia(70%)

10、自定義游標

body{  
   cursor: url("path-to-image.png"), auto;
}

cursor 內建屬性：

default      預設游標（通常是一個箭頭）
auto         預設。瀏覽器設定的游標
crosshair    游標呈現為十字線
pointer      游標呈現為指示連結的指標（一隻手）
move         此游標指示某物件可被移動
e-resize     此游標指示矩形框的邊緣可被向右（東）移動
ne-resize    此游標指示矩形框的邊緣可被向上及向右移動（北/東）
nw-resize    此游標指示矩形框的邊緣可被向上及向左移動（北/西）
n-resize     此游標指示矩形框的邊緣可被向上（北）移動
se-resize    此游標指示矩形框的邊緣可被向下及向右移動（南/東）
sw-resize    此游標指示矩形框的邊緣可被向下及向左移動（南/西）
s-resize     此游標指示矩形框的邊緣可被向下移動（南）
w-resize     此游標指示矩形框的邊緣可被向左移動（西）
text         此游標指示文字
wait         此游標指示程式正忙（通常是一隻表或沙漏）
help         此游標指示可用的幫助（通常是一個問號或一個氣球

11、裁剪各種形狀

div {
  height: 150px;
  width: 150px;
  background-color: crimson;
}

語法詳解
1、矩形：
inset() : 定義一個矩形 。注意，定義矩形不是rect，而是 inset
inset()可以傳入5個引數，分別對應top,right,bottom,left的裁剪位置,round radius（可選，圓角）

//示例
clip-path: inset(2em 3em 2em 1em round 2em);

2、圓形：
circle() : 定義一個圓
circle()可以傳人2個可選引數；
a. 圓的半徑，預設元素寬高中短的那個為直徑，支援百分比
b. 圓心位置，預設為元素中心點

//示例
clip-path: circle(30% at 150px 120px);

3、橢圓：
ellipse() : 定義一個橢圓 
ellipse()可以傳人3個可選引數；
a. 橢圓的X軸半徑，預設是寬度的一半，支援百分比
b. 橢圓的Y軸半徑，預設是高度的一半，支援百分比
c. 橢圓中心位置，預設是元素的中心點

//示例
clip-path: ellipse(45% 30% at 50% 50%);

4、多邊形
polygon() : 定義一個多邊形 
//語法
polygon( <fill-rule>? , [ <length-percentage> <length-percentage> ]# )
//說明
<fill-rule>可選，表示填充規則用來確定該多邊形的內部。可能的值有nonzero和evenodd,預設值是nonzero
後面的每對參數列示多邊形的頂點座標（X,Y），也就是連線點

//示例
clip-path: polygon(50% 0,100% 50%,0 100%);

其他圖形：
矩形：clip-path: inset(5% 20% 15% 10%)
三角形：clip-path: polygon(50% 0%, 0% 100%, 100% 100%)
菱形：clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)
梯形：clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%)
平行四邊形：clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%)
五邊形：clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%)
六邊形：clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)
七邊形：clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%)
八邊形：clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%)
斜角：clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%)
槽口：clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%)
左箭頭：clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%)
右箭頭：clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%)
星星：clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)
十字架：clip-path: polygon(10% 25%, 35% 25%, 35% 0%, 65% 0%, 65% 25%, 90% 25%, 90% 50%, 65% 50%, 65% 100%, 35% 100%, 35% 50%, 10% 50%)
叉號：clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
對話方塊：clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%)

》》》後續迭代

css常用技巧梳理

相關文章