css3使用clip path裁剪元素

2021-10-01 04:18:33 字數 2014 閱讀 4763

clip-pathcss 屬性可以建立乙個只有元素的部分區域可以顯示的剪下區域。區域內的部分顯示,區域外的隱藏。剪下區域是被引用內嵌的url定義的路徑或者外部svg的路徑,或者作為乙個形狀。clip-path屬性代替了現在已經棄用的剪下clip屬性。

clip-source|basic-shape|geometry-box|none

clip-source=url

basic-shape=inset|circle|ellipse|polygon

geometry-box=shape-box|fill-box|stroke-box|view-box

inset(): 定義乙個矩形 。注意,定義矩形不是rect,而是inset

//語法

inset( [ round ]? )

//說明

inset()可以傳入5個引數,分別對應top,right,bottom,left的裁剪位置,round radius(可選,圓角)

//示例

circle(): 定義乙個圓 。

//語法

circle( [ ]? [ at ]? )

//說明

circle()可以傳人2個可選引數;

1. 圓的半徑,預設元素寬高中短的那個為直徑,支援百分比

2. 圓心位置,預設為元素中心點

//示例:半徑為50,圓心為(50,50)的圓

ellipse(): 定義乙個橢圓 。

//語法

ellipse( [ ]? [ at ]? )

//說明

ellipse()可以傳人3個可選引數;

1. 橢圓的x軸半徑,預設是寬度的一半,支援百分比

2. 橢圓的y軸半徑,預設是高度的一半,支援百分比

3. 橢圓中心位置,預設是元素的中心點

//示例

polygon() : 定義乙個多邊形 。

//語法

polygon( ? , [ ]# )

//說明

可選,表示填充規則用來確定該多邊形的內部。可能的值有nonzero和evenodd,預設值是nonzero

後面的每對引數表示多邊形的頂點座標(x,y),也就是連線點

//示例

深入理解CSS3的clip path

clip path css 屬性可以建立乙個只有元素的部分區域可以顯示的剪下區域 不改變這個裁剪區域在整張圖中的位置 區域內的部分顯示,區域外的隱藏。clip path屬性代替了現在已經棄用的剪下 clip屬性。clip path的屬性值可以是以下幾種 clip path還可以有多種,如polygo...

使用css3製作盒子

直接切圖製作這樣的盒子的話可能不用花很長的時間,但是使用css3的話卻是可以大大加快頁面載入速度的 所以嘗試了一下,當然並不是出於載入速度的考慮,純粹的因為shoujian tothtml registergiftbox registergift registergift registergifti...

CSS3 使用盒模型

css3 使用盒模型 屬性值 inline 行內元素 block 塊級元素 inline block 行內塊級元素 list item 列表項 run in 插入元素 compact 塊或標記盒 flexbox tabke inline table table row group table hea...