TA的每日心情 | 开心
2018-8-8 03:13 |
|---|
签到天数: 1 天 [LV.1]初来乍到
|
本帖最后由 喬治兄 于 2019-10-1 20:38 编辑
8 y; b: w, H/ Y9 j3 E6 @
6 H; Y0 p+ f+ z# n, k小弟不才, 因著眼 css clip-path 的語法實為彈性許多3 w5 h9 v+ ]9 Z& ?: Y+ P8 Y
無奈 html 可以顯示無誤, 實不解 mdxbuilder 也編譯成功
1 R, Y3 P; q3 F7 v5 [# r9 Z# N但顯示卻不是 html 的樣式
. s9 E; ~& {6 F: X& P5 L疑問如下
6 y- i/ R/ _: ^+ \1. 此是否是 mdict ie 內核的版本不支援
) r B M$ a- e, v2. 若是mdict ie 內核的版本不支援, 是否能用其他瀏覽器的內核語法或類似一個 patch reg file 來解決
. k3 w" O5 g# a" V 或許如 Google Chrome 的內核, 如同某帖可更新 x86_mdict_ie11.reg 的型式來處理亦可
' B# Y) D3 d! e; a$ a& e z3. 小弟順便附上 css clip-path circle 檔的 html & mdx, mdd 以利先進同好指點
9 R* v, y x8 |; g& A; |( H S4. 由 w3schools 得知 (IE 12) Edge only supports clip-path on SVG elements (not HTML elements).+ `, Y' |5 V/ j; _. ^) x6 E( q
5. 盼各位先進同好能指點迷津......................謝謝! }$ S$ H, D# y$ ^
感謝大德& N6 C" Z; O& |6 ?" c" r0 g
6. 特此感謝 jonah_w 兄大力加碼 5000 米加持, 小弟近來缺很大, 真不好意思 小弟 加碼 2000 米.....哈..哈..哈..哈...; i# B5 k+ v$ l% b' I# ~
7. css clip-path : inset 語法可應用於區域切圖, 亦可再配合 margin-top, margin-left 移位% I( T" z/ b' B
實務應用可想得知...已附圖請注意圖形和左下角比例座標5 d; _% M1 |& D0 S- b
8. 請參閱 https://www.pdawiki.com/forum/forum.php?mod=viewthread&tid=36043&extra=
- }) O) ~' s2 A* h) A9. 請參閱 css clip-path : inset https://bennettfeely.com/clippy/
' ~" ^) j" o% j10. 小弟的例子雖以 css clip-path : circle 作為實例(因參數只有一個較易實現), 但因是同屬 css clip-path 下的一 shape 成員5 `; s# C2 V* ?7 u1 }- |
若 css clip-path : circle 可行, 則 css clip-path : inset 應該也是能成的
5 ~3 e9 F: r7 z6 x" P/ }! Y  + p! v5 T L8 p: s4 }( P
11. clip-path vs clip ==> clip-path 之優點可跳脫座標點之束縛, 可將取下的區域透過一兩個參數便可放大縮小
& [$ b) [9 o9 X% e/ E X 實為更為便利
9 L; S3 j/ u9 ?' n12: 取的範圍不是很正確僅是說明用 Clip-Path-Inset_4.html' {3 k. r4 E1 A0 n9 R. E4 d& v0 K
' k: A7 K L' q! Z
aberration5 y4 R. |9 W6 s$ ]7 S7 L4 i
<b>aberration</b><br>
. {- r3 h( a9 L! F: k<style> img { clip-path: inset( 7.77% 0 74.17% 50% ); margin-top: -7.77%; margin-left: -50%} </style>
& u- ]" |% v+ G2 G# C% f1 g+ t<img src="0002.png" width="100%">( E% r X+ P/ d
</>
( Q, |4 B# B# Q8 i ~7 E B
+ y3 r9 u' Z' R; g13. & 14. 是先放大 180% 再切一半的實例 如此切下的圖便 Fit screen 90%
" ?, ~' I4 N7 B# C3 N% o
' N9 U* }! { U13. clip-path_left.html 左側不需移% X! R* t* n( S1 A6 q; P, }$ @1 \
test8 T4 B4 [& O# s( s$ d- _
<style> img { clip-path: inset(0 50% 0 0);} </style>
; O0 ~' K8 |: h" G9 Z6 F<img src="0002.png" width="180%">
# y8 M5 x) B4 R7 |. q</>$ ` i% b" F" c4 {4 ]
( K9 K' e: n1 ?14. clip-path_right.html margin-left 移 width 的一半就是切欄了
# O6 I6 W' }! D% N+ Dtest' j$ ?2 a4 ~# y3 Q# b6 |$ C
<style>. l" d# B6 x+ ^" D a9 a' e
img {1 M% o' ]- }- k. e& \# i8 v; \0 j
clip-path: inset(0 0 0 50%); margin-left: -90%6 {* e: W% C& v I
}
8 q6 W1 _* j3 i) q* L4 U</style># j; W( Q- w ^( ?( }. G6 K
<img src="0002.png" width="180%">: G9 y W' ^* E" U8 {9 H
</>
, x5 e: }6 |; O0 ]: G; ^' Q% A3 @: C
1 P$ ~1 C$ e" R! d( M% f, }4 b* [
& ]7 w: u1 y; A) q |
本帖子中包含更多资源
您需要 登录 才可以下载或查看，没有账号？免费注册
x
本帖被以下淘专辑推荐:
- · 词典制作|主题: 217, 订阅: 40
- · 词典制作|主题: 111, 订阅: 24
|
发表于 2019-10-1 17:05:00
楼主
P7 \) P& ~, a$ t0 I7 o9 \
' d: t! Z- _' W M5 {1 E% z
2 i1 u) \$ B( `% [2 N
7 |8 X) p+ S# C) k