TA的每日心情 | 开心
2018-8-8 03:13 |
|---|
签到天数: 1 天 [LV.1]初来乍到
|
本帖最后由 喬治兄 于 2019-10-1 20:38 编辑
4 E+ d+ C$ L4 f" F. X3 B- T( { Y8 c; @" `( w
小弟不才, 因著眼 css clip-path 的語法實為彈性許多
% l' b, x! q$ I* ^無奈 html 可以顯示無誤, 實不解 mdxbuilder 也編譯成功
$ S: y. `" k; ]& b# l$ K4 n但顯示卻不是 html 的樣式3 i5 K$ H% k! G9 d; ]# V& ]/ e
疑問如下( |( w, A; z3 @( S
1. 此是否是 mdict ie 內核的版本不支援( O- l, P0 @/ o: l
2. 若是mdict ie 內核的版本不支援, 是否能用其他瀏覽器的內核語法或類似一個 patch reg file 來解決 0 d4 X/ x$ O7 N
或許如 Google Chrome 的內核, 如同某帖可更新 x86_mdict_ie11.reg 的型式來處理亦可
6 z3 K9 t9 v$ S3 q1 V1 A- Q0 p2 c3. 小弟順便附上 css clip-path circle 檔的 html & mdx, mdd 以利先進同好指點; }% s% Y2 m% d
4. 由 w3schools 得知 (IE 12) Edge only supports clip-path on SVG elements (not HTML elements).
' i& z( k d- `5. 盼各位先進同好能指點迷津......................謝謝
9 u7 K s+ i, z( i2 Y 感謝大德
) ^3 A: j: x- O% }. A. r6 \; H6. 特此感謝 jonah_w 兄大力加碼 5000 米加持, 小弟近來缺很大, 真不好意思 小弟 加碼 2000 米.....哈..哈..哈..哈...
/ s+ R) a9 j6 O7. css clip-path : inset 語法可應用於區域切圖, 亦可再配合 margin-top, margin-left 移位. h# K3 O" @5 b0 G$ ^0 n! {4 w
實務應用可想得知...已附圖請注意圖形和左下角比例座標
; N2 t7 V# s d" J% A7 w8. 請參閱 https://www.pdawiki.com/forum/forum.php?mod=viewthread&tid=36043&extra=
% F0 p% R+ D& O0 M2 }7 M9. 請參閱 css clip-path : inset https://bennettfeely.com/clippy/ $ v" K. M2 q8 L- y% j9 e3 {2 y% k/ A
10. 小弟的例子雖以 css clip-path : circle 作為實例(因參數只有一個較易實現), 但因是同屬 css clip-path 下的一 shape 成員
) B O$ H7 P7 X 若 css clip-path : circle 可行, 則 css clip-path : inset 應該也是能成的+ [7 L6 }7 b* E- t( }. ]
3 G* q: F8 z, Y v3 x' |11. clip-path vs clip ==> clip-path 之優點可跳脫座標點之束縛, 可將取下的區域透過一兩個參數便可放大縮小
( x% G1 b& @5 P/ M; x/ N 實為更為便利
: O# M7 i0 I. ?1 w6 a' T# U12: 取的範圍不是很正確僅是說明用 Clip-Path-Inset_4.html
/ L( P+ y- S L# D- @8 v4 A% T' S3 v. @/ x
aberration
F& O5 M9 E3 X; {$ c<b>aberration</b><br>+ i( X$ P$ N7 ]& P
<style> img { clip-path: inset( 7.77% 0 74.17% 50% ); margin-top: -7.77%; margin-left: -50%} </style>4 s: b& d0 W+ c3 Z! P6 ^0 u
<img src="0002.png" width="100%">3 z) Z1 N- w4 P$ X# O8 n
</>
# X+ s3 T8 Z; k6 B! f2 _3 ~
' M9 S' _5 P4 H: R- S13. & 14. 是先放大 180% 再切一半的實例 如此切下的圖便 Fit screen 90%
: m4 T) I" J- N, A% x' p6 s/ E/ J
; Y& w8 h! A+ e- O2 E3 Y! V) l1 D13. clip-path_left.html 左側不需移
7 q% O2 z7 u- E; \# W, J* O) etest
1 M4 h, p# }! Y2 v0 S<style> img { clip-path: inset(0 50% 0 0);} </style>! R8 |; y2 p* G/ I3 \% g }: V
<img src="0002.png" width="180%">: w: Q4 w) [8 b F; f7 S
</>
3 Q" b7 @, o0 p, R' j
3 J' n& \+ E, ?5 s( q/ m6 ?14. clip-path_right.html margin-left 移 width 的一半就是切欄了- f5 K7 J s" V h- d5 m' p3 x
test& U0 z, b- c% z0 ]
<style>
9 l7 q5 g; Y6 C4 w: h; G& ?' P" _img {: f; ]0 B- v4 \
clip-path: inset(0 0 0 50%); margin-left: -90%
& W9 I1 A, o0 B}
9 b1 i/ E3 ?: K- a0 I5 K</style>) D- D, N P) {, P) H
<img src="0002.png" width="180%">
8 J% T" j& _ G# T0 ~</>4 q; B* h) ^' W- C, u) p2 X
8 {& L) ]6 I2 ~2 `, S9 l" Z0 R
* h- b1 n3 N% l
) }5 e t, l0 V- T0 U! y, t
|
本帖子中包含更多资源
您需要 登录 才可以下载或查看，没有账号？免费注册
x
本帖被以下淘专辑推荐:
- · 词典制作|主题: 217, 订阅: 40
- · 词典制作|主题: 111, 订阅: 24
|
发表于 2019-10-1 17:05:00
楼主
4 ]) O3 t& o7 `3 l8 J, c1 I- a
