TA的每日心情 | 开心 2018-8-8 03:13 |
---|
签到天数: 1 天 [LV.1]初来乍到
|
本帖最后由 喬治兄 于 2019-10-1 20:38 编辑
) `* K) I& z9 p d2 b5 q9 z; a' e: `+ s
小弟不才, 因著眼 css clip-path 的語法實為彈性許多 l5 Y% d6 F" U+ ^& x |, r- {2 E
無奈 html 可以顯示無誤, 實不解 mdxbuilder 也編譯成功. p8 U# ~! c3 M) B2 E( ^
但顯示卻不是 html 的樣式0 C# a# [9 b! k1 ~
疑問如下. f2 N* w* j5 N9 x. w8 r
1. 此是否是 mdict ie 內核的版本不支援
7 E: e( Y- K6 D% p# G+ b* H( V2. 若是mdict ie 內核的版本不支援, 是否能用其他瀏覽器的內核語法或類似一個 patch reg file 來解決
F( s! s$ x! ~ 或許如 Google Chrome 的內核, 如同某帖可更新 x86_mdict_ie11.reg 的型式來處理亦可. K# H4 [9 k' r* B
3. 小弟順便附上 css clip-path circle 檔的 html & mdx, mdd 以利先進同好指點
5 B) O ^# u' Y4. 由 w3schools 得知 (IE 12) Edge only supports clip-path on SVG elements (not HTML elements).5 b h) Z* M7 J* _8 X
5. 盼各位先進同好能指點迷津......................謝謝
; n V5 p9 u/ g1 q# E 感謝大德- {3 x0 y( @* R1 d q3 K
6. 特此感謝 jonah_w 兄大力加碼 5000 米加持, 小弟近來缺很大, 真不好意思 小弟 加碼 2000 米.....哈..哈..哈..哈...
" m9 V9 A# _$ j1 W* u7. css clip-path : inset 語法可應用於區域切圖, 亦可再配合 margin-top, margin-left 移位
- m; H5 C* n! |! @7 `$ \ 實務應用可想得知...已附圖請注意圖形和左下角比例座標
, j( i2 i# C- ?$ n7 N' [& S8. 請參閱 https://www.pdawiki.com/forum/forum.php?mod=viewthread&tid=36043&extra=
' ]1 v# [+ w, O, `$ l9. 請參閱 css clip-path : inset https://bennettfeely.com/clippy/
/ A% L# @0 u" f0 A10. 小弟的例子雖以 css clip-path : circle 作為實例(因參數只有一個較易實現), 但因是同屬 css clip-path 下的一 shape 成員$ u, C$ H. ]$ ?* m- {7 Z i
若 css clip-path : circle 可行, 則 css clip-path : inset 應該也是能成的
* T0 [4 T2 @4 d2 D6 g, A' s ' L% g* Q0 p: P c0 d
11. clip-path vs clip ==> clip-path 之優點可跳脫座標點之束縛, 可將取下的區域透過一兩個參數便可放大縮小
- y/ s; |2 e' V 實為更為便利
+ b. y4 A" ^( S+ b7 H% q12: 取的範圍不是很正確僅是說明用 Clip-Path-Inset_4.html# J3 A; _4 G% ^/ S
4 M- A% |; O+ U$ {$ s6 k. _
aberration
% C0 y: S+ C5 B7 l0 t<b>aberration</b><br>
2 E' X$ \1 C. f/ X$ ? Z<style> img { clip-path: inset( 7.77% 0 74.17% 50% ); margin-top: -7.77%; margin-left: -50%} </style>
9 w) u% ^9 R2 r% a7 ^0 N<img src="0002.png" width="100%">
4 v i5 t8 ^3 F</>
V- C5 k# t& l" T, ^2 n1 _: z2 k# u7 Q
13. & 14. 是先放大 180% 再切一半的實例 如此切下的圖便 Fit screen 90%7 [! s w3 S* F# V( {0 r
" Y. n) k, L7 m# `( I p
13. clip-path_left.html 左側不需移
1 V" j2 G. M3 |5 Dtest% i& \8 P0 Y5 {7 ^# W+ [# u
<style> img { clip-path: inset(0 50% 0 0);} </style>
; Z# F/ d0 g& Q G<img src="0002.png" width="180%">
; `$ Z9 `, Q+ i: Q! V4 Z# S& A f6 N$ _2 Y \</>% ]( F7 f' x3 c! o" o
! e% C* A0 x* _' J3 C5 F* X+ h4 Y2 h14. clip-path_right.html margin-left 移 width 的一半就是切欄了; V$ Q h8 w; c$ G5 W* d# B
test
5 c) V; e ]; G<style>
8 W. ?+ P5 z& R9 N% k A' {img {
/ A: ^, }2 O- H% d' ? clip-path: inset(0 0 0 50%); margin-left: -90%
7 {! E1 C1 S" l4 \7 R: {}1 G* R" L, a1 F( O
</style>% \ l j4 ~5 M/ [9 Q
<img src="0002.png" width="180%">
0 C; F3 q0 a% W* P, n- C2 [</>
& m+ p( O& D: ]3 Y4 A6 N7 Z7 D1 C1 U$ A0 W
7 U8 [7 e. j: P8 B& L( m
$ G% S, e: |( j8 t! H, i
|
本帖子中包含更多资源
您需要 登录 才可以下载或查看,没有账号?免费注册
x
本帖被以下淘专辑推荐:
- · 词典制作|主题: 217, 订阅: 40
- · 词典制作|主题: 111, 订阅: 24
|