页面中的小技巧

今天肚子疼了一天，可能着凉了。今天只写了一点小技巧。有点偷懒了。

【单行和多行文本超出省略号】

// 单行文本出现省略号

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%;

【设置input 的placeholder的字体样式】

// 设置input占位符的样式

input::-webkit-input-placeholder{color:gray;}

input::-moz-placeholder{color:gray;}

input:-ms-input-placeholder{color:gray;}

input:-moz-placeholder{color:gray;}

<input type="text" placeholder="请设置用户名">

// 设置input聚焦时的样式

input:focus{background-color: gray;}

// 取消input的边框

border: none;

outline: none;

【CSS优惠券】

<div class="coupon">

    <span>200</span>优惠券

</div>

.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;

}

【细表格边框】

table{

  border-collapse: collapse;

}