你的位置:首页 > 软件开发 > 网页设计 > 【03】emmet系列之CSS语法

【03】emmet系列之CSS语法

发布时间:2015-11-05 18:01:01
【01】emmet系列之基础介绍  【02】emmet系列之HTML语法  【03】emmet系列之CSS语法  【04】emmet系列之编辑器  【05】emmet系列之各种缩写 单位:有几个常用值别名:p %e emx exexample:输入:w100p ...

【03】emmet系列之CSS语法

  【01】emmet系列之基础介绍

  【02】emmet系列之HTML语法

  【03】emmet系列之CSS语法

  【04】emmet系列之编辑器

  【05】emmet系列之各种缩写

 输入:
  1. w100p 
输入:

颜色值:

 浏览器前缀:
  1. -webkit-border-radius:;
  2. -moz-border-radius:;
  3. -ms-border-radius:;
  4. -o-border-radius:;
  5. border-radius:;
如果不希望加上所有前缀,可以使用缩写来指定,比如-wm-trf表示只加上-webkit和-moz前缀: 
  1. -webkit-transform:;
  2. -moz-transform:;
  3. transform:;
前缀缩写如下: 
  • w 表示 -webkit-
  • m 表示 -moz-
  • s 表示 -ms-
  • o 表示 -o-

附加属性 

可能你之前已经了解了一些缩写,比如 @f,可以生成: 

一些其他的属性,比如background-image、border-radius、font、@font-face,text-outline、text-shadow等额外的选项,可以通过“+”符号来生成,比如输入@f+,将生成: 

  1. @font-face {
  2. font-family:'FontName';
  3. src: url('FileName.eot');
  4. src: url('FileName.eot?#iefix') format('embedded-opentype'),
  5. url('FileName.woff') format('woff'),
  6. url('FileName.ttf') format('truetype'),
  7. url('FileName.svg#FontName') format('svg');
  8. font-style: normal;
  9. font-weight: normal;
  10. }
  
  1. background-image:-webkit-linear-gradient(left,#fc0 30%, red);
  2. background-image:-o-linear-gradient(left,#fc0 30%, red);
  3. background-image: linear-gradient(to right,#fc0 30%, red);
  1. border-image:lg(left,#fc0 30%,red)
  1. -webkit-border-image:-webkit-linear-gradient(left,#fc0 30%, red);
  2. -o-border-image:-o-linear-gradient(left,#fc0 30%, red);
  3. border-image:linear-gradient(to right,#fc0 30%, red);
  

 

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理:https://www.xlkjsw.com

原标题:【03】emmet系列之CSS语法

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。