TA的每日心情 | 开心
2018-8-8 03:13 |
|---|
签到天数: 1 天 [LV.1]初来乍到
|
本帖最后由 喬治兄 于 2019-10-1 20:38 编辑 d, U" ]4 o# S9 O. n/ M& g+ Y
. W; K, X: I$ a. G4 J9 p( ?小弟不才, 因著眼 css clip-path 的語法實為彈性許多4 |# E* r+ w* j/ {
無奈 html 可以顯示無誤, 實不解 mdxbuilder 也編譯成功$ e \9 b0 ~/ t8 ~0 G( \
但顯示卻不是 html 的樣式
' v0 B w. ]# @+ ]' ]3 t疑問如下
! ?8 e+ R) t: {- M" c4 Z1. 此是否是 mdict ie 內核的版本不支援6 M, k0 P2 A5 ?* ^9 Q& c
2. 若是mdict ie 內核的版本不支援, 是否能用其他瀏覽器的內核語法或類似一個 patch reg file 來解決 ; O3 U. E+ o. u( e4 d7 L
或許如 Google Chrome 的內核, 如同某帖可更新 x86_mdict_ie11.reg 的型式來處理亦可
* d0 t* A6 o: w7 Y' H3. 小弟順便附上 css clip-path circle 檔的 html & mdx, mdd 以利先進同好指點
/ `* w0 s7 t- p0 I4. 由 w3schools 得知 (IE 12) Edge only supports clip-path on SVG elements (not HTML elements).
/ o# p* L* T; g, E) f4 l; N' q% c5. 盼各位先進同好能指點迷津......................謝謝9 E6 ^5 s! _3 t, F0 H v; v
感謝大德
! y3 C2 `+ `2 J/ V6. 特此感謝 jonah_w 兄大力加碼 5000 米加持, 小弟近來缺很大, 真不好意思 小弟 加碼 2000 米.....哈..哈..哈..哈...9 W7 @8 K+ r+ b% X! W
7. css clip-path : inset 語法可應用於區域切圖, 亦可再配合 margin-top, margin-left 移位) j k* t1 Z& e% ^4 |
實務應用可想得知...已附圖請注意圖形和左下角比例座標% L+ r L4 B+ J. P# y; h8 W6 k+ {8 a
8. 請參閱 https://www.pdawiki.com/forum/forum.php?mod=viewthread&tid=36043&extra=8 x# ^- O, |/ N) g% E; O
9. 請參閱 css clip-path : inset https://bennettfeely.com/clippy/ $ U$ @8 m( i9 r( ^
10. 小弟的例子雖以 css clip-path : circle 作為實例(因參數只有一個較易實現), 但因是同屬 css clip-path 下的一 shape 成員
7 T% e7 l' f; P# n) K9 Q) ~) `/ X 若 css clip-path : circle 可行, 則 css clip-path : inset 應該也是能成的 i; y( B7 R- h/ a7 n: N2 b
B" B7 a3 q( q; c4 |$ D* K$ W/ O11. clip-path vs clip ==> clip-path 之優點可跳脫座標點之束縛, 可將取下的區域透過一兩個參數便可放大縮小$ O5 Z9 P7 d- c7 `
實為更為便利 M5 R/ ?3 @ P# q+ J
12: 取的範圍不是很正確僅是說明用 Clip-Path-Inset_4.html
# z8 S" {8 t5 B1 d1 z3 k1 q* }9 m, |% ]+ o. _% F$ J4 p. Z
aberration9 a7 s$ C$ z3 }6 N+ h
<b>aberration</b><br># d; f' B+ N$ z8 m) l0 z
<style> img { clip-path: inset( 7.77% 0 74.17% 50% ); margin-top: -7.77%; margin-left: -50%} </style>+ M$ i, W/ `5 ?0 F+ D
<img src="0002.png" width="100%">
2 m2 \8 H6 a" Y+ v; L- s</>
8 i {. D2 ~0 K2 x! }! `) O: c# I+ i& N) ^% o/ a
13. & 14. 是先放大 180% 再切一半的實例 如此切下的圖便 Fit screen 90%) ]3 Y- r Q6 w% I0 p7 z
: I2 \" W5 K0 f) M
13. clip-path_left.html 左側不需移
* L3 g8 F( l; v. X- b6 Utest
& ^7 _2 i- ?& I<style> img { clip-path: inset(0 50% 0 0);} </style>
, Q5 Y. N% O0 {2 E<img src="0002.png" width="180%">
8 }) c8 q8 U' B. U X</>
q. e g/ A& M5 \/ `8 t, k3 l6 _ m
14. clip-path_right.html margin-left 移 width 的一半就是切欄了% v* s5 _ r& b+ ~; u. f$ `
test
# m4 H3 Y, i' B# u7 A) C<style>
6 C% U; x: E1 ? V) b5 fimg {
n- X6 B2 U# J) [ clip-path: inset(0 0 0 50%); margin-left: -90%
" e, a0 q# O! a" e}
* x- b Q5 J/ b+ y! e4 u</style>
% j3 T' F+ r: g# F8 d2 E6 e6 d2 |<img src="0002.png" width="180%">- ^& b8 n: G' j& ?
</>
$ \$ \4 v0 ]+ L- y. m! u. s. D: J. ~
' _7 e4 e7 e9 c! ~0 F5 z
) g0 p g, Z+ R6 o& B |
本帖子中包含更多资源
您需要 登录 才可以下载或查看，没有账号？免费注册
x
本帖被以下淘专辑推荐:
- · 词典制作|主题: 217, 订阅: 40
- · 词典制作|主题: 111, 订阅: 24
|
发表于 2019-10-1 17:05:00
楼主
