鏈枃浠嬬粛鐐硅禐+鍏虫敞+鏀惰棌=瀛︿細闃呰鏈枃闇€瑕乧ss鍩虹銆備簡瑙order-radius鐨勪娇鐢ㄣ€傚鏋滀笉鏄庣櫧锛岃鍏堟煡闃卋order-radius鏂囨。銆傛湰鏈熻鍋氱殑鐗规晥濡備笅鍥撅紝璇疯€愬績绛夊緟锛岃繖鏄竴涓猤if鍔ㄧ敾锛氳繖鏄竴涓Щ鍔ㄧ殑div銆傚叕寮忕殑鍘熺悊鍏跺疄寰堢畝鍗曘€俤iv鏈潵灏辨槸姝ｆ柟褰㈢殑锛屽彧闇€瑕佹敼鎴愬渾褰㈠嵆鍙€傛墍浠ユ垜浠皢浣跨敤border-radius灞炴€с€俠order-radius鍙互浣垮厓绱犵殑瑙掑彉鍦嗭紝鍏蜂綋鍙栧喅浜庢偍璁剧疆鐨勫€笺€傝璁╁洓涓鍙樻垚澶у皬涓嶄竴鐨勫渾瑙掞紝骞朵笖杩囨浮骞虫粦锛岄渶瑕佺敤鍒颁笅闈㈢殑鍏紡锛氱浉鍚岄鑹茬殑鎬诲拰绛変簬100锛岃涓庤涔嬮棿鐨勮繃娓′細鍙樺緱鏇村钩婊戙€傛敞鎰忎笅鍗婇儴鍒嗙殑椤哄簭锛堣摑鑹层€佺豢鑹层€佺豢鑹层€佽摑鑹诧級銆備緥濡傝竟鐣屽崐寰勶細60%40%59%41%/55%36%64%45%锛?瀵逛簬缂栫爜锛屾垜杩樹細浣跨敤CSS鍔ㄧ敾鏉ヨ鍏冪礌涓嶈鍒欏湴绉诲姩銆?鏍峰紡>.box{瀹藉害锛?00px;楂樺害锛?00px锛涜儗鏅細#5753C9锛涜儗鏅浘鍍忥細绾挎€ф笎鍙橈紙-225deg锛?3D4E810%锛?5753C948%锛?6E7FF3100%锛夛紱transition:border-radius3slinear;杈圭晫鍗婂緞锛?0%40%59%41%/55%36%64%45%锛涘姩鐢伙細borderAnimation50sinfinite;}@keyframesborderAnimation{0%{border-radius:60%40%59%41%/55%36%64%45%;}25%{border-radius:40%60%37%63%/42%56%44%58%;}50%{杈圭晫鍗婂緞锛?0%50%39%61%/61%69%31%39%;}75%{杈圭晫鍗婂緞锛?9%41%68%32%/48%52%48%62%;}}
