CSS3高级技巧总结（虚线框、三角形、优惠卡、滚动条、多行溢出...）

terry 2年前 (2023-09-27) 阅读数 63 #数据结构与算法

1-1。设置输入占位符的字体样式

设置输入占位符的样式

input::-webkit-input-placeholder {    /* Chrome/Opera/Safari */
    color: red;
}
input::-moz-placeholder { /* Firefox 19+ */  
    color: red;
}
input:-ms-input-placeholder { /* IE 10+ */
    color: red;
}
input:-moz-placeholder { /* Firefox 18- */
    color: red;
}

<input type="text" placeholder="请设置用户名">
复制代码

设置输入焦点时的样式

input:focus {   
  background-color: red;
}
复制代码

清除输入的边框

border: none;
outline: none;
复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS高级常见技巧汇总</title>
  <style type="text/css">
    input::-webkit-input-placeholder {    /* Chrome/Opera/Safari */
      color: red;
    }
    input::-moz-placeholder { /* Firefox 19+ */
      color: red;
    }
    input:-ms-input-placeholder { /* IE 10+ */
      color: red;
    }
    input:-moz-placeholder { /* Firefox 18- */
      color: red;
    }
    input:focus {
      background-color: red;
    }
    input{
      border: none;
      outline: none;
    }
  </style>
</head>
<body>
<input type="text" placeholder="请设置用户名">
</body>
</html>
复制代码

1-2。单行和多行文本超出省略号

// 单行文本出现省略号
width: 300px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-break: break-all;

// 多行文本出现省略号
display: -webkit-box; /*重点，不能用block等其他，将对象作为弹性伸缩盒子模型显示*/
-webkit-box-orient: vertical; /*从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）*/
-webkit-line-clamp: 3; /*行数，超出三行隐藏且多余的用省略号表示...*/
line-clamp: 3;
word-break: break-all;
overflow: hidden;
max-width: 100%;
复制代码

<div class="container">
  <p class="single">
    <span class="c-red">单行溢出：</span>《ECMAScript 6 入门教程》是一本开源的 JavaScript 语言教程，
    全面介绍 ECMAScript 6 新引入的语法特性。
  </p>
  <p class="mutiple">
    <span class="c-red">多行溢出：</span>《ECMAScript 6 入门教程》是一本开源的 JavaScript 语言教程，
    全面介绍 ECMAScript 6 新引入的语法特性。本书覆盖 ES6 与上一个版本 ES5 的所有不同之处，
    对涉及的语法知识给予详细介绍，并给出大量简洁易懂的示例代码。
  </p>
</div>
复制代码

/*容器*/
    .container {
      width: 300px;
      height: 200px;
      margin: 100px;
      padding: 20px;
      border: 1px solid #eee;
      font-size: 13px;
      color: #555;
    }

    .c-red {
      color: red;
    }

    p {
      background-color: rgba(189, 227, 255, 0.28);
      padding: 2px 5px;
    }

    /*单行*/
    .single {
      width: 300px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      word-break: break-all;
    }

    /*多行*/
    .mutiple {
      display: -webkit-box; /*重点，不能用block等其他，将对象作为弹性伸缩盒子模型显示*/
      -webkit-box-orient: vertical; /*从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）*/
      -webkit-line-clamp: 3; /*行数，超出三行隐藏且多余的用省略号表示...*/
      line-clamp: 3;
      word-break: break-all;
      overflow: hidden;
      max-width: 100%;
    }
复制代码

1-3。使用负边距的技巧

规则：当左边为负数时，就是左拉。当向左移动，右边为负数时，就是左拉。上下与左、右

*{
    margin:0;
    padding:0;
}
.wrap{
    /* 利用负值技巧进行整体移动 */
    margin-left:-6px;
}
.item{
    float:left;
    width: 20%;
    height: 300px;
    border-left:6px solid #fff;
    box-sizing: border-box;
}
<div class="wrap">
    <div class="item" style="background-color: red;"></div>
    <div class="item" style="background-color: green;"></div>
    <div class="item" style="background-color: yellow;"></div>
    <div class="item" style="background-color: pink;"></div>
    <div class="item" style="background-color: green;"></div>
</div>
复制代码

1-4类似。同时定位和设置方向时

规则：对于绝对定位和固定定位，同时设置左和右对应于隐式设置宽度

span{
  border:1px solid red;
  position: absolute;
  left:0;
  right:0;
  
   /* 等同于设置  width:100%;display:block */
}
<span>1</span>
复制代码

1-5。相邻同级选择器的常见场景

ul{
  width: 500px;
   margin:auto;
   list-style: none;
   padding:0;
   border:1px solid red;
   text-align: center;
 }
 li+li{
   border-top:1px solid red;
 }
复制代码

<ul>
 <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>
复制代码

1-6。使用outline属性的神奇技巧

区别：outline不计算尺寸，border计算尺寸

* {
    padding: 0;
    margin: 0;
  }

  ul {
    list-style: none;
    width: 600px;
    margin: auto;
  }

  li {
    padding: 10px;
    border: 10px solid pink;
    outline-offset: -10px;
  }
  li+li{
    margin-top:-10px;
  }
  li:hover{
    /* border:10px solid gold; */
    outline:10px solid gold;
  }
复制代码

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>
复制代码

1-7。隐藏滚动条或更改滚动条样式？文本缩进：-9999px；或字体大小：0；

.logo {
 width: 190px;
  height: 80px;
  float: left;
  margin-top: 8px
}

.logo h1 {
  position: relative
}

.logo h1 .logo-bd {
  display: block;
  margin-left: 22px;
  padding-top: 58px;
  width: 142px;
  overflow: hidden;
  background: url(https://codeqd.com/zb_users/upload/2023/09/TB1_uT8a5ERMeJjSspiXXbZLFXa-143-59.png) 0 0 no-repeat;
  text-indent: -9999px;
}
复制代码

<h1>
  <a href="#" role="img" class="logo-bd clearfix">淘宝网</a>
</h1>
复制代码

1-12。桌边合并

table{
  border-collapse: collapse;
}
复制代码

<table border="1">
    <thead>
    <tr>
      <th>第一列</th>
      <th>第二列</th>
      <th>第三列</th>
      <th>第四列</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <td>1.1</td>
      <td>1.2</td>
      <td>1.3</td>
      <td>1.4</td>
    </tr>
    <tr>
      <td>2.1</td>
      <td>2.2</td>
      <td>2.3</td>
      <td>2.4</td>
    </tr>
    <tr>
      <td>3.1</td>
      <td>3.2</td>
      <td>3.3</td>
      <td>3.4</td>
    </tr>
    </tbody>
  </table>
复制代码

合并后