TA的每日心情 | 开心
2018-8-8 03:13 |
|---|
签到天数: 1 天 [LV.1]初来乍到
|
本帖最后由 喬治兄 于 2019-10-1 20:38 编辑 7 Z1 Y% `- M; Y. F% D5 ~" g, S
7 Y R$ F+ z, [# Y; {小弟不才, 因著眼 css clip-path 的語法實為彈性許多3 f* M' {4 x& b+ u5 _/ r4 S, u6 E
無奈 html 可以顯示無誤, 實不解 mdxbuilder 也編譯成功
6 L' _" @2 z- f2 N4 e但顯示卻不是 html 的樣式
! v! ` x0 i+ y: r疑問如下
& B# Z, D/ L: ~& Y4 V9 i+ q1. 此是否是 mdict ie 內核的版本不支援+ |2 u- G, ^ E1 R6 o# d2 y" M c
2. 若是mdict ie 內核的版本不支援, 是否能用其他瀏覽器的內核語法或類似一個 patch reg file 來解決
2 |1 q! O4 b: O, M: ]. m 或許如 Google Chrome 的內核, 如同某帖可更新 x86_mdict_ie11.reg 的型式來處理亦可
) h# P4 u0 o: l& r' r, U1 q3. 小弟順便附上 css clip-path circle 檔的 html & mdx, mdd 以利先進同好指點3 V: e) P* |. G2 T7 }
4. 由 w3schools 得知 (IE 12) Edge only supports clip-path on SVG elements (not HTML elements).9 [" Z/ ^8 o2 E3 T3 s& s
5. 盼各位先進同好能指點迷津......................謝謝% }) e: N0 T, Q
感謝大德
7 z- R$ H' X9 R( H9 P8 O4 }# m6. 特此感謝 jonah_w 兄大力加碼 5000 米加持, 小弟近來缺很大, 真不好意思 小弟 加碼 2000 米.....哈..哈..哈..哈...9 y3 r% w% u1 [( C9 q9 ]
7. css clip-path : inset 語法可應用於區域切圖, 亦可再配合 margin-top, margin-left 移位' q# l7 t, f+ a4 c: s% E2 \1 O
實務應用可想得知...已附圖請注意圖形和左下角比例座標8 L# N" M$ |# T) \, @
8. 請參閱 https://www.pdawiki.com/forum/forum.php?mod=viewthread&tid=36043&extra=/ b' K( I% N0 b4 H6 O e. K
9. 請參閱 css clip-path : inset https://bennettfeely.com/clippy/ ) ^: _' m) @' K8 g( b6 M6 ~
10. 小弟的例子雖以 css clip-path : circle 作為實例(因參數只有一個較易實現), 但因是同屬 css clip-path 下的一 shape 成員; G7 K$ y/ j1 `2 m$ I# D& I
若 css clip-path : circle 可行, 則 css clip-path : inset 應該也是能成的3 B! V/ g+ i9 q, ~$ U6 q
 7 f! d, X/ ?. ~4 H' O8 E- ?& T
11. clip-path vs clip ==> clip-path 之優點可跳脫座標點之束縛, 可將取下的區域透過一兩個參數便可放大縮小
! P+ B% E5 j* B. `+ e 實為更為便利
8 V$ O/ O4 y8 U7 J: B12: 取的範圍不是很正確僅是說明用 Clip-Path-Inset_4.html
! v: {+ o! Z! s1 u4 U! Z% h6 r
9 V! F9 x# K0 n5 U" S* v) Z7 d0 qaberration5 o, V# W' k5 w# X6 P0 w5 E
<b>aberration</b><br>
0 ]1 i+ M5 G) h( B8 P<style> img { clip-path: inset( 7.77% 0 74.17% 50% ); margin-top: -7.77%; margin-left: -50%} </style>; g$ R2 R6 Q; O( q) Q3 O+ R! I0 D
<img src="0002.png" width="100%">0 Z1 a5 `/ `* \# l
</>
8 M- @ t$ W) f# X! ^/ n
( z8 d6 {. G3 R1 J# x+ [13. & 14. 是先放大 180% 再切一半的實例 如此切下的圖便 Fit screen 90%' ^, b- K( T: k: ^& K4 _
- x/ {0 c( m' a3 w: I13. clip-path_left.html 左側不需移( i* @6 P6 N: I' @
test8 L$ n5 u X& `3 B" d% t6 q
<style> img { clip-path: inset(0 50% 0 0);} </style>) B# w. ^$ B) h t
<img src="0002.png" width="180%">
3 `8 D7 y2 I. N</>
4 p K0 {8 g# ~* J1 @$ k0 G2 Y8 M& ]: v
14. clip-path_right.html margin-left 移 width 的一半就是切欄了
- i- n; Z4 _' `2 g) l/ r5 B, e4 dtest; ?5 A3 H7 T# Z, h& k
<style>
+ K! d. T; x$ O1 p8 j i) Yimg {1 ]8 m# \) z% {! ?# b1 l
clip-path: inset(0 0 0 50%); margin-left: -90%8 u; R( Y# _% i" V f8 b+ ]
}
% a; o" C! e5 B</style>* g5 D6 n. z8 R, o; v
<img src="0002.png" width="180%">
1 |( y D4 s8 |; u2 x$ \ a" \</>
' o& r9 O$ L# ~9 D. H4 g0 f4 Y+ ^) u' i# Z5 y
' H* i* G2 T6 u: u, _# V
! e! \" r+ c" B! G! j0 Y. A5 C+ G |
本帖子中包含更多资源
您需要 登录 才可以下载或查看，没有账号？免费注册
x
本帖被以下淘专辑推荐:
- · 词典制作|主题: 217, 订阅: 40
- · 词典制作|主题: 111, 订阅: 24
|
发表于 2019-10-1 17:05:00
楼主
3 v0 e* w% b2 L
' `' E' n) |- F8 b4 B7 @1 E