为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 关于css中一些实用的技巧

关于css中一些实用的技巧

2016.09.23 00:21 1770浏览
.text{
    text-overflow:ellipsis; /*文本溢出省略*/

    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;/*抗锯齿变清晰*/
    font-smoothing: antialiased;

    text-transform: capitalize;/*设置英文文本全大写(uppercase),全小写(lowercase),全首字母大写转换(capitalize)*/

    -webkit-columns: 50px 3;
    -moz-columns: 50px 3;
    -o-columns:50px 3;
    -ms-columns: 50px 3;
    columns: 50px 3;/*多列布局,第一个为位列的宽度,第二个为列数*/
    column-gap: 2em;/*列之间的间距*/
    column-rule:3px solid #ccc;/*文本分列的边框,与border相似但不占位置,注意兼容*/
    column-span:all;/*定义不进行分列的内容,俩参数none和all,注意兼容*/

    overflow:hidden; 
    white-space:nowrap;
    font-family: "MOOC Font";/*引用自定义的字体*/
}
@font-face {/*加载服务器端的字体文件,让浏览器端可以显示用户电脑里没有安装的字体*/
    font-family: "MOOC Font";/*字体名称*/
    src: url("http://www.imooc.com/Amaranth-BoldItalic.otf");/*字体文件在服务器上的相对或绝对路径*/
}
.demo{
    border-radius:10px;/*制作圆角*/
    box-shadow:0 5px 5px #ccc;/*盒子阴影*/
}
/*使用伪元素制作导航列表项分隔线*/
.nav li{
 background:linear-gradient(to bottom, #999, #666, #999)no-repeat right/1px 15px;  /*利用渐变背景来制作分割线*/ 
}
/*删除第一项和最后一项导航分隔线*/
.nav li:last-child{
 background:linear-gradient(to bottom, #999, #666, #999)no-repeat right/0 0;   
}
input:not([type="submit"]){/*结构性伪类选择器—not*/
  border:1px solid red;
}

::-moz-selection {/*火狐浏览器中的选取文本的背景以及前景色*/
  background: red;
  color: green;
}
::selection {/*一般浏览器的选取文本的背景以及前景色*/
  background: red;
  color: green;
}
.box_shadow{/*盒子阴影*/
    /*X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式,内阴影外阴影]*/
    box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset;/*这是多重阴影*/
}
/*:before和::after这两个主要用来给元素的前面或后面插入内容,这两个常和"content"配合使用,使用的场景最多的就是清除浮动。*/
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
.transform{
    transform-origin: left top; 定义变形的原点
    translate(x,y) 进行平面上的平移
    translate3d(x,y,z) 进行3d的平移
    scale(x,y) 进行2d缩放
    scale3d(x,y,z) 进行3d缩放
    rotate(angle) 进行2d旋转
    rotate3d(x,y,z,angle) 进行3d旋转
    skew(x-angle,y-angle) 进行2d倾斜转换
    matrix(n,n,n,n,n,n) 进行2d的六值矩形变换     不知道怎么用的
    matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 进行3d的16值矩形变换
    perspective(n)  这个也不知道怎么用  为3d元素定义透视视图
}
@keyframes animation_name{/*定义关键帧供animate方法使用*/
    0%{  }
    10%{  }
    60%{  }
    100%{  }
}
.animation{
    animation: name duration timing-function delay iteration-count direction;
    /*animation 属性是一个简写属性,用于设置六个动画属性*/
    animation-name:name;/*规定需要绑定到选择器的 keyframe 名称。*/
    animation-duration:animation-duration;/*规定完成动画所花费的时间,以秒或毫秒计。*/
    animation-timing-function:animation-timing-function;/*规定动画的速度曲线。*/
    animation-delay:animation-delay;/*规定在动画开始之前的延迟。*/
    animation-iteration-count:animation-iteration-count;/*规定动画应该播放的次数。如果取值为infinite,动画将会无限次的播放*/
    animation-direction:animation-direction;/*规定是否应该轮流反向播放动画。normal  alternate*/
    animation-play-state:paused;/*控制元素动画的播放状态,播放或者暂停running和paused*/
}
.demo2 { /*不知道元素宽高然后将其垂直居中*/
  padding: 20px;
  background:orange;
  color:#fff;
  position:absolute;
  top:50%;
  left:50%;
  border-radius: 5px;
  -webkit-transform:translate(-50%,-50%); /*利用translate属性可轻松实现*/
  -moz-transform:translate(-50%,-50%);
  transform:translate(-50%, -50%);
}
.transition{/*通过鼠标的单击、获得焦点,被点击或对元素任何改变中触发,并平滑地以动画效果改变CSS的属性值。*/
    transition: property duration timing-function delay;
    transition-property: 规定设置过渡效果的 CSS 属性的名称;
    transition-duration: 规定完成过渡效果需要多少秒或毫秒;
    transition-timing-function: 规定速度效果的速度曲线;
    transition-delay: 定义过渡效果何时开始;
}
点击查看更多内容
2人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
4
获赞与收藏
29

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

51篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

151篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消