TA的每日心情 | 开心
2018-8-8 03:13 |
|---|
签到天数: 1 天 [LV.1]初来乍到
|
本帖最后由 喬治兄 于 2019-10-1 20:38 编辑 K5 y! j, e' b: s+ B/ {2 P
6 D% U, \7 B1 i# L
小弟不才, 因著眼 css clip-path 的語法實為彈性許多7 [2 L2 E, u' q6 L1 C4 V
無奈 html 可以顯示無誤, 實不解 mdxbuilder 也編譯成功6 v# Y) h- d9 U) G5 _4 S
但顯示卻不是 html 的樣式0 E5 B* k4 E* y# W4 ~. e' u7 B0 j
疑問如下& J; `. \' B `: f: e L
1. 此是否是 mdict ie 內核的版本不支援; X. `2 E' y- ~# j* _6 E
2. 若是mdict ie 內核的版本不支援, 是否能用其他瀏覽器的內核語法或類似一個 patch reg file 來解決
8 u9 u+ Z1 Y$ m/ k 或許如 Google Chrome 的內核, 如同某帖可更新 x86_mdict_ie11.reg 的型式來處理亦可
0 V% s$ j$ @/ _( f+ b( k, i! p3. 小弟順便附上 css clip-path circle 檔的 html & mdx, mdd 以利先進同好指點
$ N9 o. w$ _; n4 E& u- n) m4. 由 w3schools 得知 (IE 12) Edge only supports clip-path on SVG elements (not HTML elements).) P" d4 j: d' {
5. 盼各位先進同好能指點迷津......................謝謝
g( F; n5 r/ f 感謝大德 n Z& y. n" A+ M' B, C% V6 q
6. 特此感謝 jonah_w 兄大力加碼 5000 米加持, 小弟近來缺很大, 真不好意思 小弟 加碼 2000 米.....哈..哈..哈..哈...! @# U- P# w9 l4 p
7. css clip-path : inset 語法可應用於區域切圖, 亦可再配合 margin-top, margin-left 移位
# R7 S- ~$ p! t7 [2 Q3 y1 t 實務應用可想得知...已附圖請注意圖形和左下角比例座標
6 A1 i% t+ \* r% Y, ?8. 請參閱 https://www.pdawiki.com/forum/forum.php?mod=viewthread&tid=36043&extra=, ^1 r3 ^, z9 A" x7 f
9. 請參閱 css clip-path : inset https://bennettfeely.com/clippy/
) C4 j1 H$ j. w9 M10. 小弟的例子雖以 css clip-path : circle 作為實例(因參數只有一個較易實現), 但因是同屬 css clip-path 下的一 shape 成員 @ r+ |) L8 E% D) s
若 css clip-path : circle 可行, 則 css clip-path : inset 應該也是能成的! q1 `( Q) \& n, z( S4 w5 U( [ I& V" L
 8 A# \4 `; p2 e" \' E/ R' {
11. clip-path vs clip ==> clip-path 之優點可跳脫座標點之束縛, 可將取下的區域透過一兩個參數便可放大縮小
9 ^6 v$ K% @! X 實為更為便利
% r( K- T8 C4 Y, x12: 取的範圍不是很正確僅是說明用 Clip-Path-Inset_4.html
6 d. [/ I8 ~4 m \' q; [5 Q# a
8 V# a) l" j2 Naberration
( l. I. Q6 Q. Z9 \<b>aberration</b><br>
; P/ p+ k/ q9 O1 h<style> img { clip-path: inset( 7.77% 0 74.17% 50% ); margin-top: -7.77%; margin-left: -50%} </style>
1 K& T1 Q6 b- x; k; \( M T<img src="0002.png" width="100%">$ F( d& s: ^, O3 Y# u% _: M
</>
& j9 ~8 x: a/ C+ E. m- ~* S! t8 c( c" d- v
13. & 14. 是先放大 180% 再切一半的實例 如此切下的圖便 Fit screen 90%4 O8 Z& n+ I" [
. x! E. ^! s# S1 G4 R, {; ~$ r+ E13. clip-path_left.html 左側不需移
$ ~6 i& G+ t, p2 j2 Stest
& F: |* k; B- p5 |3 y! @8 k$ B" [4 s<style> img { clip-path: inset(0 50% 0 0);} </style>
( c$ n/ {; {! M/ M( v<img src="0002.png" width="180%">
+ A) @1 ^& B- O& f% p E4 b</>7 R: ~. o) f0 @6 ~3 _) T
2 A* E' z$ ~6 K& T, o; F14. clip-path_right.html margin-left 移 width 的一半就是切欄了& L/ _9 z, j- M. I$ Z
test
/ |# F/ P, {5 A z6 f2 k<style>
H: B H9 @# G8 timg {: H# I! B- {3 c6 y
clip-path: inset(0 0 0 50%); margin-left: -90%0 _5 ?( l e! t! s$ J
}
' {7 }1 C( l: Q1 v! l5 \</style>
. U( C( D. S6 S4 T<img src="0002.png" width="180%">4 m& e U7 Q, \; }. b$ V. F
</>
4 c4 N' H" u; g9 ~9 Z
+ _: ?' D7 Z0 m. j+ `$ Z# e' M3 W' \2 B2 L
' q# e* Z$ U, y( G5 s2 e7 u |
本帖子中包含更多资源
您需要 登录 才可以下载或查看，没有账号？免费注册
x
本帖被以下淘专辑推荐:
- · 词典制作|主题: 217, 订阅: 40
- · 词典制作|主题: 111, 订阅: 24
|
发表于 2019-10-1 17:05:00
楼主
* _& @) `4 J3 k
4 K1 z8 G) h1 F; i3 _8 {) r6 I