1.鼠标样式

 <!-- 利用行内样式设置鼠标样式 -->    
<li style="cursor: default">鼠标默认样式</li>
<li style="cursor: move">鼠标移动样式</li>
<li style="cursor: pointer;">鼠标指针样式</li>
<li style="cursor: text;">鼠标文本样式</li>
<li style="cursor: wait;">鼠标等待样式</li>
<li style="cursor:zoom-in;">鼠标放大样式</li>
<li style="cursor: zoom-out;">鼠标缩小样式</li>

2.去掉表单中文本框轮廓线

<style>
 input {
  /* 利用内部样式，设置轮廓线为none或者0 */
   outline: none;
      }
</style>

<!-- 去掉表单文本框的轮廓线 -->
用户：<input type="text" />
<br />
密码：<input type="text" />

3去掉文本域的拖拽特性

<style>
textarea {
 /* 利用resize属性设置去掉文本域的拖拽特性
利用outline属性设置文本边框的发亮轮廓线 */
resize: none;
outline: none;
}
</style>

<body>
说明：<textarea name="" id="" cols="30" rows="10"></textarea>
</body>

4.单行文本发生溢出现象时，采用省略号显示。以下为固定写法：

 <style>
      div {
        width: 100px;
        height: 110px;
        border: 1px solid red;
        /* 溢出文字进行隐藏 */
        overflow: hidden;
        /* 溢出文字采用省略号 */
        text-overflow: ellipsis;
        /* 设置为弹性伸缩盒子模型 */
        display: -webkit-box;
        /* 显示显示省略号的行号 */
        -webkit-line-clamp: 5;
        /* 设置弹性伸缩盒子的子元素的排列方式 */
        -webkit-box-orient: vertical;
      }
    </style>
  </head>
  <body>
    <div>
      多行文字，溢出时，多行文字，溢出时，多行文字，溢出时，显示省略号。
    </div>
  </body>

5.多行文字发生溢出时，设置某行显示省略号显示。以下为固定写法：

 <style>
      div {
        width: 100px;
        height: 110px;
        border: 1px solid red;
        /* 溢出文字进行隐藏 */
        overflow: hidden;
        /* 溢出文字采用省略号 */
        text-overflow: ellipsis;
        /* 设置为弹性伸缩盒子模型 */
        display: -webkit-box;
        /* 显示显示省略号的行号 */
        -webkit-line-clamp: 5;
        /* 设置弹性伸缩盒子的子元素的排列方式 */
        -webkit-box-orient: vertical;
      }
    </style>
  </head>
  <body>
    <div>
      多行文字，溢出时，多行文字，溢出时，多行文字，溢出时，显示省略号。
    </div>
  </body>

注意：多行文字溢出显示省略号，最好是由后端人员开发、控制，较为方便。

6.相邻盒子边框因重叠而变粗的问题

解决方式即利用margin-left等于负的边框宽度，如下：

      ul li {
        list-style: none;
        float: left;
        width: 100px;
        height: 200px;
        border: 2px solid red;
        margin-left: -2px;
      }

      ul li:hover {
        border: 2px solid blue;
      }

7.鼠标经过相邻的盒子中某个时，该盒子边框显示不同颜色。

如果在上述情况下直接使用如下代码，会出现盒子边框被压盖的情况。

     ul li:hover {
        position: relative;
        border: 2px solid blue;
      }

为了解决此问题，分两类情况进行解决：

（1）当盒子没有采用定位时，在li的hover伪类中添加相对定位属性即可

     ul li:hover {
        position: relative;
        border: 2px solid blue;
      }

（2）当盒子中采用了定位时，利用z-index增加盒子的堆叠权重

    <style>
      ul li {
        position: relative;
        list-style: none;
        float: left;
        width: 100px;
        height: 200px;
        border: 2px solid red;
        margin-left: -2px;
      }

      ul li:hover {
        z-index: 2;
        border: 2px solid blue;
      }
    </style>

8.文字围绕浮动元素显示

而不会因为前面盒子浮动，而使其后的文字在浮动盒子下面。如下代码：

 <style>
      div.box {
        width: 300px;
        height: 120px;
        border: 1px solid blue;
        margin: 0 auto;
      }
      div.pic {
        float: left;
      }
    </style>

  <body>
    <div class="box">
      <div class="pic"><img src="images/a.jpg" alt="" /></div>
      <p>文字围绕浮动元素，而不会被压盖</p>
    </div>
  </body>

四时宝库

程序员的知识宝库

CSS中鼠标样式、文本框轮廓线、文本溢出等