TA的每日心情 | 开心
2018-8-8 03:13 |
|---|
签到天数: 1 天 [LV.1]初来乍到
|
本帖最后由 喬治兄 于 2019-10-1 20:38 编辑
6 s- m) W/ c- I4 ^* ?, V" ?( {- k# j9 T7 C u5 D
小弟不才, 因著眼 css clip-path 的語法實為彈性許多/ T+ J4 ~/ s7 s
無奈 html 可以顯示無誤, 實不解 mdxbuilder 也編譯成功) g' ~3 F) O0 T' u7 ?! f
但顯示卻不是 html 的樣式. g# X3 o$ Q: i/ X. M' e/ Z! K
疑問如下7 L9 ~8 N& ?, d5 j& e6 ~
1. 此是否是 mdict ie 內核的版本不支援6 n& b% j5 ?7 a6 n) Y
2. 若是mdict ie 內核的版本不支援, 是否能用其他瀏覽器的內核語法或類似一個 patch reg file 來解決 & t4 E5 i6 s9 T& j; f! B, K
或許如 Google Chrome 的內核, 如同某帖可更新 x86_mdict_ie11.reg 的型式來處理亦可
3 o [* v" H2 O4 U, v; @8 C3. 小弟順便附上 css clip-path circle 檔的 html & mdx, mdd 以利先進同好指點; j# d) t" g% w% `
4. 由 w3schools 得知 (IE 12) Edge only supports clip-path on SVG elements (not HTML elements).
8 O4 R; }" I; k4 y5. 盼各位先進同好能指點迷津......................謝謝
) S' h# Z' y- I3 o* R' r 感謝大德' M* N4 E5 @+ M8 ^4 w! j- d
6. 特此感謝 jonah_w 兄大力加碼 5000 米加持, 小弟近來缺很大, 真不好意思 小弟 加碼 2000 米.....哈..哈..哈..哈..." |3 |( F$ l& I0 w/ [
7. css clip-path : inset 語法可應用於區域切圖, 亦可再配合 margin-top, margin-left 移位
( q' G o0 ^- V" Y( _ 實務應用可想得知...已附圖請注意圖形和左下角比例座標7 y% G! U" j' u& l% i
8. 請參閱 https://www.pdawiki.com/forum/forum.php?mod=viewthread&tid=36043&extra=8 U3 i' w; d% f& f* E9 }
9. 請參閱 css clip-path : inset https://bennettfeely.com/clippy/ . G/ h4 ^9 y4 N' B l5 n, t
10. 小弟的例子雖以 css clip-path : circle 作為實例(因參數只有一個較易實現), 但因是同屬 css clip-path 下的一 shape 成員$ G. i4 p* y1 G4 x3 V& B. ^, E8 A
若 css clip-path : circle 可行, 則 css clip-path : inset 應該也是能成的 c% S1 }2 ?/ \. X4 n1 J
2 f- O# R( P* K0 M. ]2 h11. clip-path vs clip ==> clip-path 之優點可跳脫座標點之束縛, 可將取下的區域透過一兩個參數便可放大縮小4 u8 j) A$ ^. f+ z- {2 ~5 D
實為更為便利
3 J2 P2 l8 H! a8 n12: 取的範圍不是很正確僅是說明用 Clip-Path-Inset_4.html& S4 S* k& B# {) ~2 l& l) h0 w% l
) r# n1 m0 p$ P+ O9 y b Q
aberration
+ a1 |$ Q" m: X* R9 S7 k* ^! y8 H! U<b>aberration</b><br>" }8 B5 |6 y! ? K. D
<style> img { clip-path: inset( 7.77% 0 74.17% 50% ); margin-top: -7.77%; margin-left: -50%} </style>
# K3 k, D* Y. ]7 d( [" Q3 j<img src="0002.png" width="100%">
% Y. p& i- R$ E9 X: h% ?</>/ S; x7 P' }9 U* f) h' ?1 e& `
0 d# }. B/ p. J5 q4 y13. & 14. 是先放大 180% 再切一半的實例 如此切下的圖便 Fit screen 90%
1 ]9 ]' ?4 ~1 f& A# K- p& Y
1 ]5 y5 s% k$ V13. clip-path_left.html 左側不需移
' E: R5 r/ o9 {0 l6 l& ^) Vtest
. q4 F* Q/ }0 I0 E<style> img { clip-path: inset(0 50% 0 0);} </style>) L9 y. I& @1 G2 s4 \
<img src="0002.png" width="180%">6 @( e- G" {$ Y# \8 @* |0 s- `: `
</>9 k2 ?; x0 r* W# k1 [: s s
+ ]/ p4 @( M7 e+ G1 j) U14. clip-path_right.html margin-left 移 width 的一半就是切欄了
9 D; s, d, X: a+ d7 y: Btest7 D6 v% C+ P8 k# e8 v0 G" M, n
<style>) Q4 Y2 w3 y0 ^8 H" c
img {
! e' r# l( m- |! h clip-path: inset(0 0 0 50%); margin-left: -90%! ^5 C9 x. U' f, i C6 I% J/ r
}( b: E" N8 M) J8 e2 h4 M' G u
</style>
: W" Z3 [6 j+ `<img src="0002.png" width="180%">
7 h8 n4 \# a$ l4 x& Y</>* m8 l# v& z D& s# J/ Y- x
6 u+ G7 K2 w7 P, g5 P" O
. Q+ D1 b# k8 q* `
6 N; z1 k, o/ w- ]4 B& a |
本帖子中包含更多资源
您需要 登录 才可以下载或查看，没有账号？免费注册
x
本帖被以下淘专辑推荐:
- · 词典制作|主题: 217, 订阅: 40
- · 词典制作|主题: 111, 订阅: 24
|
发表于 2019-10-1 17:05:00
楼主
7 ~/ H: ]( b$ j, r7 L/ X# B3 a' n
$ {; a0 B3 U2 @) e; N