TA的每日心情 | 开心
2018-8-8 03:13 |
|---|
签到天数: 1 天 [LV.1]初来乍到
|
本帖最后由 喬治兄 于 2019-10-1 20:38 编辑
. n( s4 E. X! K N1 q q0 g) a$ N4 }8 t' z1 o
小弟不才, 因著眼 css clip-path 的語法實為彈性許多
2 j6 s3 J9 I! y, \+ V無奈 html 可以顯示無誤, 實不解 mdxbuilder 也編譯成功" s$ Z1 V% S& n* r Z I& c
但顯示卻不是 html 的樣式
9 o! H4 d, R/ `3 C4 F0 y疑問如下
. Z* C; V; y. d& F B( } j/ P' {/ Y1. 此是否是 mdict ie 內核的版本不支援
0 |2 q5 }; z- E2. 若是mdict ie 內核的版本不支援, 是否能用其他瀏覽器的內核語法或類似一個 patch reg file 來解決
# \8 H: k4 b9 p: F$ o( J 或許如 Google Chrome 的內核, 如同某帖可更新 x86_mdict_ie11.reg 的型式來處理亦可' e, t1 A0 n" X; O* z4 t
3. 小弟順便附上 css clip-path circle 檔的 html & mdx, mdd 以利先進同好指點
- [6 t! X4 [3 }5 v. ?* q6 \ s, k4. 由 w3schools 得知 (IE 12) Edge only supports clip-path on SVG elements (not HTML elements).
0 _2 l3 Q* P- ^' _5. 盼各位先進同好能指點迷津......................謝謝. s0 J: ?1 q# X5 y. E; f6 X0 W
感謝大德
D* v, o u3 s8 B* }6. 特此感謝 jonah_w 兄大力加碼 5000 米加持, 小弟近來缺很大, 真不好意思 小弟 加碼 2000 米.....哈..哈..哈..哈...
' y" n: N- \) Y- n4 M7. css clip-path : inset 語法可應用於區域切圖, 亦可再配合 margin-top, margin-left 移位) r; {6 C/ z( r' x$ S) n5 N( `3 y
實務應用可想得知...已附圖請注意圖形和左下角比例座標
1 ~0 F" X# \8 {* n% s0 e8. 請參閱 https://www.pdawiki.com/forum/forum.php?mod=viewthread&tid=36043&extra=- Y" n+ i% r6 e6 r/ a$ z6 E1 A& |
9. 請參閱 css clip-path : inset https://bennettfeely.com/clippy/ 9 o& n: W! n" F% R2 @% R
10. 小弟的例子雖以 css clip-path : circle 作為實例(因參數只有一個較易實現), 但因是同屬 css clip-path 下的一 shape 成員0 _8 T M3 R& O1 ^( C! i
若 css clip-path : circle 可行, 則 css clip-path : inset 應該也是能成的7 F' W) V# \% S# M
7 B# h A0 s# F6 y {11. clip-path vs clip ==> clip-path 之優點可跳脫座標點之束縛, 可將取下的區域透過一兩個參數便可放大縮小/ c( {) D, s8 n
實為更為便利! \- e' }7 B7 I; a5 ~1 [7 m
12: 取的範圍不是很正確僅是說明用 Clip-Path-Inset_4.html! x6 Y+ R1 E( K/ |
' ?6 _, x/ z s- e
aberration# ]# l$ l9 \* I( L: E- {5 y
<b>aberration</b><br>0 n) f5 j& x5 n% e$ D
<style> img { clip-path: inset( 7.77% 0 74.17% 50% ); margin-top: -7.77%; margin-left: -50%} </style>8 w* {3 A" A, o, S6 T3 h% e! U
<img src="0002.png" width="100%">
6 T+ x) z' C$ e2 u, L5 D</>' Y% H' o A5 X* o. V2 g
+ @, n/ s# N0 q( k
13. & 14. 是先放大 180% 再切一半的實例 如此切下的圖便 Fit screen 90%1 S) h% `4 V3 _! T+ c) E j. G
- W7 V% k6 \2 [9 R% n9 Y13. clip-path_left.html 左側不需移
! m# x, K6 l. V3 ]; Utest
0 e0 u x# }; D/ G; g+ i% `) i<style> img { clip-path: inset(0 50% 0 0);} </style>
/ S5 G8 K% j) q- |- w% f0 V; L<img src="0002.png" width="180%">6 U+ \0 ^3 z R1 S
</>
* p, O! d" w* h4 v! m2 j6 S1 j. [, d% N# Q: K. l
14. clip-path_right.html margin-left 移 width 的一半就是切欄了* X3 w$ t9 s) M6 G5 e' V
test( B D6 ?4 B3 `0 f9 x+ e
<style>: d& A# V& D" Z8 A* ^, r8 d& q
img {( `/ i7 d2 o3 w8 D1 ?# I/ Q8 Q
clip-path: inset(0 0 0 50%); margin-left: -90%: n! a7 F3 P6 v) I
}
9 e, j6 T- l# V) ]9 g</style>
5 \7 E( Z" h! d' U. M; b4 }6 h<img src="0002.png" width="180%">9 L2 r, V1 U$ }1 p/ A
</>
! \! U8 L; ~& {9 F
; }, \! @9 j5 s( ~; k5 n) ?/ @* }' r7 W4 O5 M- Q8 o! S
) Q3 n0 L* p/ u. K: }) N: e |
本帖子中包含更多资源
您需要 登录 才可以下载或查看，没有账号？免费注册
x
本帖被以下淘专辑推荐:
- · 词典制作|主题: 217, 订阅: 40
- · 词典制作|主题: 111, 订阅: 24
|
发表于 2019-10-1 17:05:00
楼主
: `* n- o+ l2 E6 `! C2 i- v4 [0 I8 y
