乐趣区

关于css:css常用小技巧

jiezi

一、设置 input 相干款式

1、input 的 placeholder 的款式
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="请设置用户名">
2、设置 input 聚焦时的款式
input:focus {border: red 1px solid;}
3、勾销 input 的默认款式
background:none;
border:none;
outline:none;

// 去掉 ios 的 input 的默认款式
-webkit-appearance:none;

// 去掉点击暗影
-webkit-tap-highlight-color:rgba(255,255,255,0);

// 去掉 chrome 表单主动填充后的黄色底色
input:-webkit-autofill {-webkit-box-shadow: 0 0 0px 100px white inset;}

二、单行和多行文本超出省略号

<style>
.container {
  width: 300px;
  height: 200px;
  margin: 100px;
  padding: 20px;
  border: 1px solid #eee;
  font-size: 13px;
  color: #555;
}

.c-red {color: #8968CD;}

p {
  background-color: #ccccff;
  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%;
}
</style>
<div class="container">
  <p class="single">
    <span class="c-red"> 单行溢出：</span> 笑你我枉花光心计 爱竞逐镜花那漂亮 怕侥幸会转瞬远逝 为贪嗔喜恶怒着迷 责你我太贪功恋势 怪大地众生太美丽 悔旧日太执信约誓 为悲欢哀怨妒着迷
  </p>
  <p class="mutiple">
    <span class="c-red"> 多行溢出：</span> 笑你我枉花光心计 爱竞逐镜花那漂亮 怕侥幸会转瞬远逝 为贪嗔喜恶怒着迷 责你我太贪功恋势 怪大地众生太美丽 悔旧日太执信约誓 为悲欢哀怨妒着迷 啊 舍不得璀璨俗世 啊 躲不开痴恋的快慰 啊 找不到色相代替 啊 参毕生参不透这条难题 吞风吻雨葬落日未曾徘徊 欺山赶海践雪径也未失望 拈花把酒偏折煞世人情狂 凭这两眼与百臂或千手不能防 天阔阔雪漫漫共谁同航 这沙滚滚水皱皱笑着浪荡 贪欢一晌偏教那女儿情长掩埋
  </p>
</div>

三、负边距应用技巧

在 static 元素中应用负边距:
1、当一个 static 元素在 top/left 应用负边距时，它把元素向这个特定的方向拉
2、然而当你将负边距设置为绝对 bottom/right 时，它并不会把元素向下或右拉，相同，它会把前面的元素往里面拉，从而笼罩本人。
如果对一个浮动的元素应用负边距，它会产生一个空白，其余元素就能够笼罩这一部分。
比方：
有一列宽度 100%，另一列有固定的宽度，比如说 100px。
如果两个元素都应用了左浮动并且设置 margin-right:-20px。#mydiv2 会把 #mydiv1 看成宽度放大 20px（所以会笼罩一部分），然而乏味的是#mydiv1 并不会有任何变动，而是仍然放弃原先的宽度。
如果负边距和宽度一样大的话，它就会被齐全笼罩掉。如果负外边距等于元素的宽度的话，那么该元素的宽度就会变成 0。

<style>
*{
    margin:0;
    padding:0;
}
.wrap{
    /* 利用负值技巧进行整体挪动 */
    margin-left:-6px;
}
.item{
    float:left;
    width: 20%;
    height: 300px;
    border-left:6px solid #fff;
    box-sizing: border-box;
}
</style>
<div class="wrap">
    <div class="item" style="background-color: #FFBBFF;"></div>
    <div class="item" style="background-color: #BFEFFF;"></div>
    <div class="item" style="background-color: #DDA0DD;"></div>
    <div class="item" style="background-color: #BCEE68;"></div>
    <div class="item" style="background-color: #FF8C00;"></div>
</div>

四、定位同时设置方位状况

相对定位和固定定位时，同时设置 left 和 right 等同于隐式地设置宽度

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

五、相邻兄弟选择器罕用场景

<style>
ul{
  width: 500px;
  margin: 100px auto;
  list-style: none;
  padding:0;
  border:1px solid #DDA0DD;
  text-align: center;
  color:#333;
 }
li+li{border-top:1px solid #FF8C00;}
</style>
<ul>
 <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

六、outline 属性的妙用技巧

outline 是不占空间的，不会减少额定的宽度或高度；而 border 会。

<style>
ul {
    list-style: none;
    width: 600px;
    margin: 100px 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;
}
</style>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

七、暗藏滚动条或更改滚动条款式

<style>
 .scroll-container {
   width: 500px;
   height: 150px;
   border: 1px solid #ddd;
   padding: 15px;
   overflow: auto;     /* 必须 */
 }
 
 .scroll-container::-webkit-scrollbar {
   width: 8px;
   background: white;
 }
 
 .scroll-container::-webkit-scrollbar-corner,
   /* 滚动条角落 */
 .scroll-container::-webkit-scrollbar-thumb,
 .scroll-container::-webkit-scrollbar-track {      /* 滚动条的轨道 */
   border-radius: 4px;
 }
 
 .scroll-container::-webkit-scrollbar-corner,
 .scroll-container::-webkit-scrollbar-track {
   /* 滚动条轨道 */
   background-color: rgba(180, 160, 120, 0.1);
   box-shadow: inset 0 0 1px rgba(180, 160, 120, 0.5);
 }
 
 .scroll-container::-webkit-scrollbar-thumb {
   /* 滚动条手柄 */
   background-color: #00adb5;
 }
</style>

八、CSS 绘制三角形

<style>
/* 正三角 */
.up-triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 25px 40px 25px;
  border-color: transparent transparent rgb(245, 129, 127) transparent;
}

/* 倒三角 */
.down-triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 40px 25px 0 25px;
  border-color:  rgb(245, 129, 127) transparent transparent transparent;
}
div:last-child {margin-top: 1rem;}
</style>

九、虚线框绘制技巧

<style>
.dotted-line {
  width: 800px;
  margin: auto;
  padding: 20px;
  border: 1px dashed transparent;
  background: linear-gradient(white, white) padding-box, repeating-linear-gradient(-45deg, red 0, #ccc .25em, white 0, white .75em);
  //border: 1px dashed #f00;
}
</style>
<div class="dotted-line"> 临济论自我：与此时，在目前，孤单、明彻，以充沛觉知，听此说法者。</div>

十、卡券成果

<style>
.coupon {
  width: 300px;
  height: 100px;
  line-height: 100px;
  margin: 50px auto;
  text-align: center;
  position: relative;
  background: radial-gradient(circle at right bottom, transparent 10px, #ffffff 0) top right /50% 51px no-repeat,
  radial-gradient(circle at left bottom, transparent 10px, #ffffff 0) top left / 50% 51px no-repeat,
  radial-gradient(circle at right top, transparent 10px, #ffffff 0) bottom right / 50% 51px no-repeat,
  radial-gradient(circle at left top, transparent 10px, #ffffff 0) bottom left / 50% 51px no-repeat;
  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .2));
}
.coupon span {
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  color: red;
  font-size: 50px;
  font-weight: 400;
}
<p class="coupon">
 <span>200</span> 优惠券
</p>
</style>

十一、暗藏文本的罕用两种办法

text-indent: -9999px; 
// font-size: 0;

十二、表格边框合并

<style>
table{border-collapse: collapse;}
</style>
<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>

退出移动版