TA的每日心情 | 开心
2018-8-8 03:13 |
|---|
签到天数: 1 天 [LV.1]初来乍到
|
本帖最后由 喬治兄 于 2019-10-1 20:38 编辑 + _8 K- C9 X9 T+ k3 ^6 e
) V/ M6 I/ Z% ^! z7 X
小弟不才, 因著眼 css clip-path 的語法實為彈性許多
& s8 B# W# z7 \4 p, ~- V; q2 A: o無奈 html 可以顯示無誤, 實不解 mdxbuilder 也編譯成功, X) ^; p. [+ `) ~) ]* z; i
但顯示卻不是 html 的樣式3 J; {) G+ f! H1 c1 k
疑問如下
7 Q! `3 c/ c% p5 O1. 此是否是 mdict ie 內核的版本不支援
% \1 ^ ~1 U1 q2. 若是mdict ie 內核的版本不支援, 是否能用其他瀏覽器的內核語法或類似一個 patch reg file 來解決 % m% g1 H3 U' V" @
或許如 Google Chrome 的內核, 如同某帖可更新 x86_mdict_ie11.reg 的型式來處理亦可5 c: l3 E. L5 @8 v0 r
3. 小弟順便附上 css clip-path circle 檔的 html & mdx, mdd 以利先進同好指點: c- ?& O5 x G$ N/ N1 x# E4 Z
4. 由 w3schools 得知 (IE 12) Edge only supports clip-path on SVG elements (not HTML elements).* n5 A0 Q. l) [- m6 }
5. 盼各位先進同好能指點迷津......................謝謝4 C6 U. A' m [
感謝大德2 R1 G9 t2 O V( D; z1 S3 e
6. 特此感謝 jonah_w 兄大力加碼 5000 米加持, 小弟近來缺很大, 真不好意思 小弟 加碼 2000 米.....哈..哈..哈..哈...# l! m$ D5 g, }3 c, G1 a
7. css clip-path : inset 語法可應用於區域切圖, 亦可再配合 margin-top, margin-left 移位$ k# P7 E* O0 l. d, A; X2 e9 L
實務應用可想得知...已附圖請注意圖形和左下角比例座標9 J' p& k9 ?7 B) D, Y9 Q
8. 請參閱 https://www.pdawiki.com/forum/forum.php?mod=viewthread&tid=36043&extra=3 Y" X4 p3 b/ Q; X4 u1 ^9 W: B
9. 請參閱 css clip-path : inset https://bennettfeely.com/clippy/ ( G1 d# u, l. @+ Y2 B7 B
10. 小弟的例子雖以 css clip-path : circle 作為實例(因參數只有一個較易實現), 但因是同屬 css clip-path 下的一 shape 成員
: g1 [2 U* z- d m) ]5 {) O* O' a 若 css clip-path : circle 可行, 則 css clip-path : inset 應該也是能成的, q0 ~% I9 T: ?" a. o
 7 C1 L& u" p; N4 o- {/ u/ x4 e
11. clip-path vs clip ==> clip-path 之優點可跳脫座標點之束縛, 可將取下的區域透過一兩個參數便可放大縮小4 h6 u) U8 w/ {( M9 P1 x I
實為更為便利/ ?. ]; c) b1 n6 f
12: 取的範圍不是很正確僅是說明用 Clip-Path-Inset_4.html
0 k# O& _" R( g5 z7 p. N9 e# z9 }/ M) N, @. r( s1 ?- a
aberration2 @- [# W& M, b' d4 d- ~
<b>aberration</b><br>' s& c7 ~, M2 i- |- r- X, b5 T
<style> img { clip-path: inset( 7.77% 0 74.17% 50% ); margin-top: -7.77%; margin-left: -50%} </style>
: ?9 `, Z5 Z2 h" y<img src="0002.png" width="100%">& x2 M3 P( E+ H0 v$ V. B5 H
</>0 y; F ~ L9 c" _" `
& v: l: C |% F5 z+ W1 B13. & 14. 是先放大 180% 再切一半的實例 如此切下的圖便 Fit screen 90%
! f! a8 i! g" L+ f
% \/ i, E9 Z+ ~; j( x13. clip-path_left.html 左側不需移" b! ?) Z) E4 e# K; ~
test, ^6 ?( d% k5 J3 G
<style> img { clip-path: inset(0 50% 0 0);} </style>0 e# `- B* ]/ [2 o9 B& N# y4 L
<img src="0002.png" width="180%">& h' ~9 f9 ]: @. M$ O1 T9 j7 {
</>
, r: ~# u9 n2 E9 X/ _
6 e; _8 N4 A, E9 D1 z" s) ]: \14. clip-path_right.html margin-left 移 width 的一半就是切欄了
' i' s: r" Z: h) w3 Y' A; Qtest
6 @- a# C, W3 u- I+ _" P% [<style>) x4 L" l* }3 j1 ?* B
img {
3 o* Z% A' m( K% r+ Z clip-path: inset(0 0 0 50%); margin-left: -90%) F* f4 z* `6 F6 y! t) j/ `% O
}7 ^' {8 B9 m6 D$ m2 b9 c+ \
</style>
. n; V) M3 a& X1 p5 k$ I/ U6 @2 V<img src="0002.png" width="180%">
. B4 S4 n0 Q' w2 ~0 q</>$ `9 j1 S- h$ Z5 c8 m! C
& d% s1 G# P; L( x' {" ^ h" E) T
$ w& ?4 p( o/ g5 W
8 `' ]) ~1 R+ ?8 m! W Y. R& e |
本帖子中包含更多资源
您需要 登录 才可以下载或查看，没有账号？免费注册
x
本帖被以下淘专辑推荐:
- · 词典制作|主题: 217, 订阅: 40
- · 词典制作|主题: 111, 订阅: 24
|
发表于 2019-10-1 17:05:00
楼主
' ]5 k- }+ i2 L9 j
