TA的每日心情 | 开心
2018-8-8 03:13 |
|---|
签到天数: 1 天 [LV.1]初来乍到
|
本帖最后由 喬治兄 于 2019-10-1 20:38 编辑 " {( u2 Q0 H, M+ @5 z' R0 i$ ?& p
+ H& J2 H l' R i- d# O. i
小弟不才, 因著眼 css clip-path 的語法實為彈性許多
# R1 {, `5 v) @- N9 P+ H3 @無奈 html 可以顯示無誤, 實不解 mdxbuilder 也編譯成功
! k6 v( }# n( L, |4 C( |) }! H但顯示卻不是 html 的樣式
& G w$ N3 e1 m/ v疑問如下0 Y, H8 Y" C$ h Q, B
1. 此是否是 mdict ie 內核的版本不支援
8 r J( m, {2 O4 r+ O4 x2 R1 A2. 若是mdict ie 內核的版本不支援, 是否能用其他瀏覽器的內核語法或類似一個 patch reg file 來解決 0 W7 a7 }* N2 U
或許如 Google Chrome 的內核, 如同某帖可更新 x86_mdict_ie11.reg 的型式來處理亦可
1 a* M9 d$ d1 E6 j3. 小弟順便附上 css clip-path circle 檔的 html & mdx, mdd 以利先進同好指點& ~! b8 ^* z, ]/ `
4. 由 w3schools 得知 (IE 12) Edge only supports clip-path on SVG elements (not HTML elements).5 F( u5 a. ]7 R- {
5. 盼各位先進同好能指點迷津......................謝謝
! T$ p! Q, u% t! _! t, h& z7 X! { 感謝大德5 [7 [- T) L; X) k, C
6. 特此感謝 jonah_w 兄大力加碼 5000 米加持, 小弟近來缺很大, 真不好意思 小弟 加碼 2000 米.....哈..哈..哈..哈..., \/ b# M0 A0 W2 l9 n
7. css clip-path : inset 語法可應用於區域切圖, 亦可再配合 margin-top, margin-left 移位" y W; g' |: c+ o
實務應用可想得知...已附圖請注意圖形和左下角比例座標! x7 g0 E( f& l7 N5 ~* F
8. 請參閱 https://www.pdawiki.com/forum/forum.php?mod=viewthread&tid=36043&extra=* d% P j. l8 X7 W7 q# W% v
9. 請參閱 css clip-path : inset https://bennettfeely.com/clippy/
3 m; H* }, ~- f" B+ V/ M2 A' d2 B4 `10. 小弟的例子雖以 css clip-path : circle 作為實例(因參數只有一個較易實現), 但因是同屬 css clip-path 下的一 shape 成員
! i! g- z+ C6 g& g1 s 若 css clip-path : circle 可行, 則 css clip-path : inset 應該也是能成的
& [1 O) W* S6 S  2 p8 t8 F& J/ {3 C2 A* y$ ^8 H
11. clip-path vs clip ==> clip-path 之優點可跳脫座標點之束縛, 可將取下的區域透過一兩個參數便可放大縮小/ x& p' u( H& i
實為更為便利2 q* V- Z {) ~+ P8 Z
12: 取的範圍不是很正確僅是說明用 Clip-Path-Inset_4.html
! ^8 L3 t+ b$ B; g; U& |- D; H- ?
% w7 R+ @, r- p9 D- raberration" l; T2 P2 [& ?; {. G
<b>aberration</b><br>
- m, O0 }* \3 G9 n: g* z<style> img { clip-path: inset( 7.77% 0 74.17% 50% ); margin-top: -7.77%; margin-left: -50%} </style>
Q+ _9 Y# |5 G, N<img src="0002.png" width="100%">( ?$ @' x: `+ a' F
</>
* o6 z/ E) O. a, U2 }& k) p
. F. S9 }! q" ~* M13. & 14. 是先放大 180% 再切一半的實例 如此切下的圖便 Fit screen 90%
& K4 q7 `9 L6 H8 w
. z$ @# e2 W7 e; u; i$ ?; |& N* E13. clip-path_left.html 左側不需移* M8 f2 g, ^3 @- R5 R
test
4 T7 [) Q9 y! D \" r/ b6 y& |9 x<style> img { clip-path: inset(0 50% 0 0);} </style>
+ z9 D+ M! e3 g! u( r<img src="0002.png" width="180%">
9 E2 x4 M) f6 [</>
& ]8 b3 P9 P7 Z7 P1 @/ C5 Y, h6 m5 M0 m0 P: @! B- X8 b
14. clip-path_right.html margin-left 移 width 的一半就是切欄了
, d: C$ O N' t6 H$ @. \8 x9 \. Itest
. H# ]3 T6 A% x( H6 b, C0 i% i( O<style>
, M: c& P v! @, h2 e% Vimg {
# ]0 s: h$ n( u$ b. O$ K clip-path: inset(0 0 0 50%); margin-left: -90%
* D' H# ?2 V$ a5 v}0 l( n3 X" [! Q0 J# ]2 l+ y8 m# b& V
</style>% p+ C2 f$ ]5 H; f3 T
<img src="0002.png" width="180%">
5 K* D. o) O: i. \7 u5 H! N9 S</>! T$ V9 f J q4 u% s
8 y0 f R, b( N/ R# M
. k& P* F% V; ]. B7 U* _6 L. O
$ [4 B& ?8 ]9 y/ g; \ |
本帖子中包含更多资源
您需要 登录 才可以下载或查看，没有账号？免费注册
x
本帖被以下淘专辑推荐:
- · 词典制作|主题: 217, 订阅: 40
- · 词典制作|主题: 111, 订阅: 24
|
发表于 2019-10-1 17:05:00
楼主
' x1 _+ u/ A% d8 M) Y' t1 J9 [
4 Z% k4 P% L( y G- ~* X3 T1 Z
$ M# M' v5 `! l+ F
