新航路师徒学院

 找回密码
 立即注册
搜索
查看: 576|回复: 0

【新航路】CSS 常用小方法

[复制链接]

80

主题

114

帖子

560

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
560
发表于 2016-8-28 19:30:56 | 显示全部楼层 |阅读模式


  1. ###h5像素值
  2.     @function pxToRem($px, $base: 30) {
  3.       @return ($px / $base) * 1rem;
  4.     }
  5.     pxToRem(110)

  6. ###透明度
  7.     @mixin opacity($num){
  8.         opacity: $num/100;
  9.         filter:alpha(opacity=$num);
  10.     }
  11.     @include opacity(50)
  12. ###超出
  13.     @mixin ellipsis($maxw){
  14.         max-width:$maxw;
  15.         white-space: nowrap;
  16.         -ms-text-overflow: ellipsis;
  17.         text-overflow: ellipsis;
  18.         overflow: hidden;
  19.     }
  20.     @include ellipsis(250)
  21. ###合阴影
  22.     @mixin shadow {
  23.       -webkit-box-shadow: -3px 0 3px #f2f2f2, /*左边阴影*/  3px 0 3px #f2f2f2, /*右边阴影*/  0 -3px 3px #f2f2f2, /*顶部阴影*/ 0 3px 3px #f2f2f2; /*底边阴影*/
  24.       -moz-box-shadow: -3px 0 3px #f2f2f2, /*左边阴影*/  3px 0 3px #f2f2f2, /*右边阴影*/  0 -3px 3px #f2f2f2, /*顶部阴影*/ 0 3px 3px #f2f2f2; /*底边阴影*/
  25.       box-shadow: -3px 0 3px #f2f2f2, /*左边阴影*/  3px 0 3px #f2f2f2, /*右边阴影*/  0 -3px 3px #f2f2f2, /*顶部阴影*/ 0 3px 3px #f2f2f2; /*底边阴影*/
  26.       //-webkit-box-shadow:0 0 10px rgba(0, 204, 204, .5);
  27.       //-moz-box-shadow:0 0 10px rgba(0, 204, 204, .5);
  28.       //box-shadow:0 0 10px rgba(0, 204, 204, .5);
  29.     }

  30. ###video 视频 默认不全屏
  31.     webkit-playsinline


  32. ###去ie10 小X
  33.     ::-ms-clear { display: none;}
  34.     ::-ms-reveal { display: none;}
  35. ###placeholder color更改
  36.     ::-webkit-input-placeholder { /* WebKit browsers */
  37.         color:#ccc;
  38.     }
  39.     :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  40.         color:#ccc;
  41.     }
  42.     ::-moz-placeholder { /* Mozilla Firefox 19+ */
  43.         color:#ccc;
  44.     }
  45.     :-ms-input-placeholder { /* Internet Explorer 10+ */
  46.         color:#ccc;
  47.     }
  48. ### 一闪一闪
  49.     @-webkit-keyframes twinkling{
  50.         0% {
  51.             opacity: 0;
  52.         }
  53.         100% {
  54.             opacity: 1;
  55.             color: red;
  56.         }
  57.     }
  58.     .error-tip{
  59.         -webkit-animation: twinkling 1s infinite ease-in-out;
  60.         -o-animation: twinkling 1s infinite ease-in-out;
  61.         animation: twinkling 1s infinite ease-in-out;
  62.     }

复制代码


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

新航路师徒学院 ( 京ICP备16035622号

GMT+8, 2018-9-19 00:05 , Processed in 0.120839 second(s), 24 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表