TA的每日心情 | 开心 2018-8-8 03:13 |
---|
签到天数: 1 天 [LV.1]初来乍到
|
本帖最后由 喬治兄 于 2019-10-1 20:38 编辑 ' N2 X+ ?$ g# G; J8 X" E+ B
( t3 S2 J0 z% s$ s0 R' {
小弟不才, 因著眼 css clip-path 的語法實為彈性許多
6 L9 ?5 T+ X% D R2 p無奈 html 可以顯示無誤, 實不解 mdxbuilder 也編譯成功7 v/ L' d8 u$ q
但顯示卻不是 html 的樣式 m+ _/ f: M6 m, C% \
疑問如下
4 l! E1 d2 A4 D) |% C# o1. 此是否是 mdict ie 內核的版本不支援
g6 b) D$ m9 R7 M7 {2. 若是mdict ie 內核的版本不支援, 是否能用其他瀏覽器的內核語法或類似一個 patch reg file 來解決 ; W3 m: h" U6 H+ {% [% N; {
或許如 Google Chrome 的內核, 如同某帖可更新 x86_mdict_ie11.reg 的型式來處理亦可
% j+ o9 U X+ n2 i5 H0 u3. 小弟順便附上 css clip-path circle 檔的 html & mdx, mdd 以利先進同好指點
) S! o4 i2 d8 r+ K& _4. 由 w3schools 得知 (IE 12) Edge only supports clip-path on SVG elements (not HTML elements).0 g% u6 ~6 L0 S1 B
5. 盼各位先進同好能指點迷津......................謝謝
9 M' d8 }+ h* z 感謝大德
- R) S/ n+ A+ M6. 特此感謝 jonah_w 兄大力加碼 5000 米加持, 小弟近來缺很大, 真不好意思 小弟 加碼 2000 米.....哈..哈..哈..哈...) j1 c3 X$ T; N
7. css clip-path : inset 語法可應用於區域切圖, 亦可再配合 margin-top, margin-left 移位( F4 s# m2 K2 ]5 K3 t
實務應用可想得知...已附圖請注意圖形和左下角比例座標
! L' N9 U% t6 j" H( ?4 A3 w* o+ b8. 請參閱 https://www.pdawiki.com/forum/forum.php?mod=viewthread&tid=36043&extra= B. r& y3 L) P$ W: w2 `% ?. }2 \
9. 請參閱 css clip-path : inset https://bennettfeely.com/clippy/
# k3 y3 Q7 B, `. I4 i10. 小弟的例子雖以 css clip-path : circle 作為實例(因參數只有一個較易實現), 但因是同屬 css clip-path 下的一 shape 成員
1 H! w1 M' q# g( l! o 若 css clip-path : circle 可行, 則 css clip-path : inset 應該也是能成的6 ` V7 e% B. P/ a; j. a$ t
: n- r* ]+ v+ Y* x11. clip-path vs clip ==> clip-path 之優點可跳脫座標點之束縛, 可將取下的區域透過一兩個參數便可放大縮小3 B2 g$ [4 E- U* `4 \7 M
實為更為便利& X% O. r7 a. N# F. R
12: 取的範圍不是很正確僅是說明用 Clip-Path-Inset_4.html
* i* @7 \( }: E! N
- n$ X! _) m7 w. I) Caberration3 S* Q A5 W7 Z8 |9 |" {) V
<b>aberration</b><br>$ X- | N& B4 s* Z& z" W
<style> img { clip-path: inset( 7.77% 0 74.17% 50% ); margin-top: -7.77%; margin-left: -50%} </style>1 f9 i0 J) b/ c* d( c- q8 E& g
<img src="0002.png" width="100%">
: s: ]5 U& V! C' m) ]5 {</>
( E% r, y+ {: `' f% `; b* ^ I" Q
$ }$ `" c: @% _13. & 14. 是先放大 180% 再切一半的實例 如此切下的圖便 Fit screen 90%
; m5 H7 M! f* P8 J+ a4 i+ Y. Q; |: ^, s d' V4 p) ?
13. clip-path_left.html 左側不需移7 T8 ]: ?- N% B4 A# l
test$ C8 ]3 Q0 j. Z7 y' f
<style> img { clip-path: inset(0 50% 0 0);} </style>9 K+ g0 k' O3 C/ Y7 I' q$ h7 y
<img src="0002.png" width="180%">
4 | l6 W2 [6 g6 R3 V' l</>
- M$ x8 N: `% H
( F- m, X; e4 H7 I- v7 S1 k14. clip-path_right.html margin-left 移 width 的一半就是切欄了
; ^& c+ D Q, x5 z- |8 V: G; stest
/ ~& S8 `/ u/ K C7 Q<style>
4 Z* v7 Y0 ], C) J% Yimg {7 [( W2 Z7 \* D q" f7 E' C
clip-path: inset(0 0 0 50%); margin-left: -90%
0 d/ x/ `7 S4 Y% ]}& N, ]5 l" Z! S0 M p
</style>
; ?9 g( r6 _5 {% h$ b/ H6 `<img src="0002.png" width="180%"># H r& q( t) v& P3 m, E
</>
* j% p6 [* _: ^; S5 a% B ~3 z# m2 Y
) n3 V2 @: _2 k) p( C& D5 |
) y8 [0 C9 D2 k% w% G) u& T* C |
本帖子中包含更多资源
您需要 登录 才可以下载或查看,没有账号?免费注册
x
本帖被以下淘专辑推荐:
- · 词典制作|主题: 217, 订阅: 40
- · 词典制作|主题: 111, 订阅: 24
|