css3.less 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. //**
  2. // * font-face 自定义字体
  3. // * @params @path: 字体路径; @font-name: 字体名字; 需要同时存在eot woff ttf svg
  4. // */
  5. .font-face(@path, @font-name){
  6. @font-face{
  7. font-family: @font-name;
  8. src: url('@{path}/@{font-name}.eot'); /* IE9 Compat Modes */
  9. src: url('@{path}/@{font-name}.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  10. url('@{path}/@{font-name}.woff') format('woff'), /* Modern Browsers */
  11. url('@{path}/@{font-name}.ttf') format('truetype'), /* Safari, Android, iOS */
  12. url('@{path}/@{font-name}.svg#svgFontName') format('svg'); /* Legacy iOS */
  13. }
  14. }
  15. /*圆角*/
  16. .border-radius(@arg:4px){
  17. -webkit-border-radius: @arg;
  18. -moz-border-radius: @arg;
  19. -ms-border-radius: @arg;
  20. border-radius: @arg;
  21. }
  22. .border-top-left-radius(@arg:4px){
  23. -webkit-border-top-left-radius:@arg;
  24. -moz-border-top-left-radius:@arg;
  25. -ms-border-top-left-radius:@arg;
  26. border-top-left-radius:@arg;
  27. }
  28. .border-top-right-radius(@arg:4px){
  29. -webkit-border-top-right-radius: @arg;
  30. -moz-border-top-right-radius: @arg;
  31. -ms-border-top-right-radius: @arg;
  32. border-top-right-radius: @arg;
  33. }
  34. .border-bottom-left-radius(@arg:4px){
  35. -webkit-border-bottom-left-radius:@arg;
  36. -moz-border-bottom-left-radius:@arg;
  37. -ms-border-bottom-left-radius:@arg;
  38. border-bottom-left-radius:@arg;
  39. }
  40. .border-bottom-right-radius(@arg:4px){
  41. -webkit-border-bottom-right-radius: @arg;
  42. -moz-border-bottom-right-radius: @arg;
  43. -ms-border-bottom-right-radius: @arg;
  44. border-bottom-right-radius: @arg;
  45. }
  46. /*阴影*/
  47. .box-shadow(@arg){
  48. -webkit-box-shadow: @arg;
  49. -moz-box-shadow: @arg;
  50. -ms-box-shadow: @arg;
  51. box-shadow: @arg;
  52. }
  53. /*字体*/
  54. .fs(@arg:12px){
  55. font-size: @arg;
  56. }
  57. /*动画属性*/
  58. .transition(@arg){
  59. -webkit-transition:@arg;
  60. -moz-transition:@arg;
  61. -ms-transition:@arg;
  62. transition:@arg;
  63. }
  64. .transform(@arg){
  65. -webkit-transform:@arg;
  66. -moz-transform: @arg;
  67. -ms-transform: @arg;
  68. transform: @arg;
  69. }
  70. /*清楚浮动*/
  71. .clearfix(){
  72. zoom: 1;
  73. &:after{
  74. display: block;
  75. content: '';
  76. clear: both;
  77. }
  78. }
  79. .box-sizing(@arg){
  80. -moz-box-sizing:@arg;
  81. -webkit-box-sizing:@arg;
  82. box-sizing:@arg;
  83. }