CSS3 تە يۇمىلاق قىر چىقىرىشتا پەقەت border-radius خاسلىقىدىن پايدىلىنىمىز.
بىز ئۇنىڭغا قىممەت بەرگەن ۋاقتىمىزدا ( em,ex,pt,px ياكى پىرسەنىت ) بىرلا قىممەت بەرسەك يۇمىلاق قىر چىقىرىش ئۈنۈمىگە يېتەلەيمىز.
ئۇنىڭ خىزمەت پىرىنسىپى تۆۋەندىكىدەك
تۆۋەندىكىسى بىر div رامكا
بىز ئۇنىڭ border-radius خاسلىقىغا 15px دەپ بۇيرۇق بېرەيلى.ئۈنۈمى تۆۋەندىكىدەك.
border-radius قا بىردىن تارتىپ تۆتكىچە جەمئى تۆت خىل قىممەت بەرگىلى بولىدۇ.ئەگەر بىرلا قىممەت بەرسەك تۆت قىرنىڭ ھەممىسى مۇشۇ قىممەتنى ئىشلىتىدۇ.(يۇقارقى رەسىمدەك)
ئەگەر ئىككى قىممەت بەرسەك سول ئۈستۈنكى قىرى بىلەن ئوڭ ئاستىدىكى قىرى بىرىنچى قىممەتنى ئىشلىتىدۇ. ئوڭ ئۈستىدىكى قىر بىلەن سول ئاستىدىكى قىر ئىككىنجى قىممەتنى ئىشلىتىدۇ. ئۈنۈمى تۆۋەندىكىدەك
ئەگەردە ئۇنىڭغا ئۈچ قىممەت بەرگەن ۋاقتىمىزدا سول ئۈستنكى قىرى بىرىنجى قىممەتنى، ئوڭ ئۈستۈنكى قىرى ئىككىنجى قىممەتنى، ئوڭ ئاستىدىكى قىرى ئۈچىنجى قىممەتنى ئىشلىتىدۇ ( سائەت سىتىرىلكىسىنىڭ ئايلىنىش يۆنىلىشى بىلەن ئوخشاش، border-radius: 15px 5px 25px; بىلەن border-radius: 15px 5px 25px 0px; ئۈنۈمى بىردەك چىقىدۇ ) تۆۋەندىكىدەك.
تۆۋەندىكىدەك ئايرىم قىلىپ يېزىشقىمۇ بولىدۇ
* border-top-left-radius
* border-top-right-radius
* border-bottom-right-radius
* border-bottom-left-radius
IE9、Opera10.5、Safari5、Chrome4 دىگەنلەرنىڭ ھەممىسىدە border-radius خاسلىقىنى ئىشلەتكىلى بولىدۇ.
تور كۆرگۈنىڭ نورمال چىقىرىپ بېرىشى ئۈچۈن -webkit- ۋە -moz دىگەنلەر قوشۇپ ئىشلىتىلىدۇ. - border-radius:5px;
- -moz-border-radius:5px;
- -webkit-border-radius:5px;
مەزمۇننى كۆچۈرۈۋېلىش
بۇنىڭدىكى border-radius:5px; بۇ قۇر Opera ئۈچۈن -webkit-border-radius:5px; بۇقۇر Chrome ۋە Safrai ئۈچۈن -moz-border-radius:5px; بۇ قۇر بولسا Firefox ئۈچۈن ئىشىتىلىدۇ. تۆۋەندىكى بەتنى كۆرۈپ باقايلى. بۇ بەتتىكى بەزىبىر جايلارنى ئۆزگەرتىپ باقايلى . ئاستىدىكى رەسىمدەك (قىزىل سىزىق ئىچىگە ئېلىنغان جايلارنىڭ ھەممىسىنى border-radius ئارقىلىق ئۆزگەرتىپ چىقىمىز )
ئەمدى ئۆزىڭىز تەسەۋۇر قىلىپ بېقىڭ. تۆۋەندىكى كود سىناپ بېقىشىڭلار ئۈچۈن قالدۇرۇلدى. |