TA的每日心情 | 开心
2018-8-8 03:13 |
|---|
签到天数: 1 天 [LV.1]初来乍到
|
本帖最后由 喬治兄 于 2019-10-1 20:38 编辑 ?8 R4 i1 q2 I3 ^
9 l& p; d- k3 v: v9 }% O小弟不才, 因著眼 css clip-path 的語法實為彈性許多 a& R0 \6 i9 o
無奈 html 可以顯示無誤, 實不解 mdxbuilder 也編譯成功
6 s+ d2 y7 T/ n但顯示卻不是 html 的樣式8 b5 x- \- h/ h. ^
疑問如下, \& v; L$ E4 V7 @* N# h4 o
1. 此是否是 mdict ie 內核的版本不支援
8 B B4 H- A, |/ c/ u" X2. 若是mdict ie 內核的版本不支援, 是否能用其他瀏覽器的內核語法或類似一個 patch reg file 來解決
+ K q3 w4 F" c1 j8 ?! q 或許如 Google Chrome 的內核, 如同某帖可更新 x86_mdict_ie11.reg 的型式來處理亦可( i U% t( q( q6 w' @3 B* x3 n# `. s
3. 小弟順便附上 css clip-path circle 檔的 html & mdx, mdd 以利先進同好指點4 y: ?; P7 O( M9 C4 U$ t$ O
4. 由 w3schools 得知 (IE 12) Edge only supports clip-path on SVG elements (not HTML elements).
: v. m, ^. f5 v* W+ B1 G3 Z5. 盼各位先進同好能指點迷津......................謝謝
7 a4 ]3 p7 z$ ^3 k4 h6 x 感謝大德
( O4 ~: L# G. g5 x5 p6. 特此感謝 jonah_w 兄大力加碼 5000 米加持, 小弟近來缺很大, 真不好意思 小弟 加碼 2000 米.....哈..哈..哈..哈...
# p& c% y! g8 w. K9 j7. css clip-path : inset 語法可應用於區域切圖, 亦可再配合 margin-top, margin-left 移位" G$ A X: p' ^& a3 y8 i) c" K
實務應用可想得知...已附圖請注意圖形和左下角比例座標
- d: K2 J# P( x+ p8. 請參閱 https://www.pdawiki.com/forum/forum.php?mod=viewthread&tid=36043&extra=1 v( g% D0 V* _$ n0 J! Y0 }' D
9. 請參閱 css clip-path : inset https://bennettfeely.com/clippy/ 4 Z2 L* A; U% r1 V. Y9 W, `
10. 小弟的例子雖以 css clip-path : circle 作為實例(因參數只有一個較易實現), 但因是同屬 css clip-path 下的一 shape 成員& F* A/ M! `3 `% \3 B
若 css clip-path : circle 可行, 則 css clip-path : inset 應該也是能成的
/ f5 E2 @' {( o7 Q, O1 c9 N  0 ^& t7 Z( C2 s
11. clip-path vs clip ==> clip-path 之優點可跳脫座標點之束縛, 可將取下的區域透過一兩個參數便可放大縮小
1 e( o0 h" D9 Z0 }/ U# e7 } 實為更為便利2 A0 @7 f$ j4 U6 I' f
12: 取的範圍不是很正確僅是說明用 Clip-Path-Inset_4.html
+ m( U( c: K; H3 p, Y: e( q1 k7 x( E( x& @; S7 d0 q
aberration; ^) R# h( Y1 w A
<b>aberration</b><br>- I, T8 K4 u3 j0 `) v/ g
<style> img { clip-path: inset( 7.77% 0 74.17% 50% ); margin-top: -7.77%; margin-left: -50%} </style>. S1 q$ i( Z; X- T
<img src="0002.png" width="100%">% c j0 ]% b# K, Z7 ^2 z9 ~+ i
</>' z% ]/ b( i' i* W1 ^$ ~
* J* I) U+ _( z) y0 a
13. & 14. 是先放大 180% 再切一半的實例 如此切下的圖便 Fit screen 90%
. P, X. D+ X1 F3 G$ x2 }! z! ~* w9 K& c. x" \1 Z. L) Q) u
13. clip-path_left.html 左側不需移
" H/ K+ r! ]: J n" ]" C4 C- D8 ltest
/ g& g g$ e* s# F; h2 n; e" d<style> img { clip-path: inset(0 50% 0 0);} </style>
: g; M# H P# I: o5 h9 D! z0 e<img src="0002.png" width="180%">
* Y% ?1 B2 e* p& W0 _2 Q9 U6 X# z</>
: p' \7 u1 N1 T; ]! b
2 D# v9 J0 E% t% u# k/ r, P14. clip-path_right.html margin-left 移 width 的一半就是切欄了
+ [5 R s4 o; w7 ], p" X7 ]9 P" rtest/ E8 W. h' ~0 l' ]' V# E5 |
<style>; i3 B) y2 K y" T: R
img {1 V \( t& U0 f& F! k
clip-path: inset(0 0 0 50%); margin-left: -90%
! {5 k7 P y) g6 |/ ]7 Y! B+ Y}# @/ m$ b( x, I' P, \0 r
</style> Z9 g! E( B. H2 T- q$ j# s
<img src="0002.png" width="180%">
0 a8 p$ C, f2 I2 h4 Y/ }8 d' p</>
6 x! z! M; X5 ]# j g
g- {( e+ Z1 P) @5 H! N. U ^1 m9 K) r
" [" a* o0 c1 d! O' j0 k, A, }1 @ S
|
本帖子中包含更多资源
您需要 登录 才可以下载或查看，没有账号？免费注册
x
本帖被以下淘专辑推荐:
- · 词典制作|主题: 217, 订阅: 40
- · 词典制作|主题: 111, 订阅: 24
|
发表于 2019-10-1 17:05:00
楼主
. }; |# _+ Y+ T3 j* g8 Z6 L" B