旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转。

HTML代码：

<div class="wrapper">
  <div></div>
</div>

CSS代码：

.wrapper {
  width: 200px;
  height: 200px;
  border: 1px dotted red;
  margin: 100px auto;
}
.wrapper div {
  width: 200px;
  height: 200px;
  background: orange;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。

语法：

background-size: auto | <长度值> | <百分比> | cover | contain

cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器；

5、contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。

background-origin ： border-box | padding-box | content-box;

参数分别表示背景图片是从边框，还是内边距（默认值），或者是内容区域开始显示。

需要注意的是，如果背景不是no-repeat，这个属性无效，它会从边框开始显示。

ext-shadow可以用来设置文本的阴影效果。

语法：

text-shadow: X-Offset Y-Offset blur color;

X-Offset：表示阴影的水平偏移距离，其值为正值时阴影向右偏移，反之向左偏移；      

Y-Offset：是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移，反之向上偏移；

Blur：是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将Blur值设置为0；

Color：是指阴影的颜色，其可以使用rgba色。

@font-face {
    font-family : 字体名称;（任意字符串）
    src : 字体文件在服务器上的相对或绝对路径;
}

text-overflow:ellipsis; 
overflow:hidden; 
white-space:nowrap;

尾数省略号必备三条样式

渐变是img，线性渐变linear径向渐变radial

border-image:url（） 分割值 round（平铺）/repeat（重复）/stretch（拉伸）

导航制作。

“:read-write”选择器刚好与“:read-only”选择器相反，主要用来指定当元素处于非只读状态时的样式。

 <div>

    <label for="name">姓名:</label>

    <input type="text" name="name" id="name" placeholder="大漠" />

  </div>

CSS:

input[type="text"]:read-write{

  border:2px solid red;

}

“:read-only”伪类选择器用来指定处于只读状态元素的样式。简单点理解就是，元素中设置了“readonly=’readonly’”

示例演示

通过“:read-only”选择器来设置地址文本框的样式。

<div>

    <label for="comment">评论：</label>

    <textarea name="comment" id="" cols="30" rows="10" readonly="readonly"></textarea>

  </div>

CSS:

textarea:read-only {

  border: 1px solid #ccc;

  height: 50px;

  resize: none;

  background: #eee;

}

::selection”伪元素是用来匹配突出显示的文本(用鼠标选择文本时的文本)。浏览器默认情况下，用鼠标选择网页文本是以“深蓝的背景，白色的字体”显示的

将鼠标选中的文本时的背景变成 orange，文本变成 white。

::selection{

  background: orange;

  color: white;

}

通过“:checked”状态来自定义复选框效果。

 <div class="wrapper">

    <div class="box">

      <input type="radio"  id="girl" name="1"  /><span></span>

    </div>

    <label for="girl">女</label>

  </div>

input[type="radio"] + span {

  opacity: 0;

}

input[type="radio"]:checked + span {

  opacity: 1;

}

通过“:disabled”选择器，给不可用输入按钮设置明显的样式。

input[type="submit"]:enabled{

  background: orange;

  color: #fff;

}

input[type="submit"]:disabled{

  background: #eee;

  border-color: #eee;

  color: #ccc;

}

通过“:enabled”选择器，修改文本输入框的边框为2像素的红色边框，并设置它的背景为灰色。

HTML代码:

<form action="#">
  <div>
    <label for="name">Text Input:</label>
    <input type="text" name="name" id="name" placeholder="可用输入框"  />
  </div>
   <div>
    <label for="name">Text Input:</label>
    <input type="text" name="name" id="name" placeholder="禁用输入框"  disabled="disabled" />
  </div>
</form>

CSS代码：

div{
  margin: 20px;
}
input[type="text"]:enabled {
  background: #ccc;
  border: 2px solid red;
}