CSS

来源：互联网发布：淘宝对话技巧编辑：程序博客网时间：2024/06/03 21:00

1.限制在一个块元素显示的文本的行数

.box-line-clamp_desc {    color: #999999;    font-size: 13px;    line-height: 1.2;    overflow: hidden;    text-overflow: ellipsis;    display: -webkit-box;    -webkit-box-orient: vertical;    -webkit-line-clamp: 2;}

2.换行

.break-word__title {    font-weight: 400;    font-size: 17px;    width: auto;    overflow: hidden;    text-overflow: ellipsis;    white-space: nowrap;    word-wrap: normal;    word-wrap: break-word;    word-break: break-all;}

3.CSS实现色板预览

.liner-color{    width: 500px;    height: 100px;    background: linear-gradient(to right,#F00,#00F 25%,#0F0 75%, #F00 100%);}.toright{    width: 500px;    height: 100px;    background:linear-gradient(to right,#fff, #F00 100%);}.tobottom{    width: 500px;    height: 100px;    mix-blend-mode: multiply;    background:linear-gradient(to bottom,#fff, #000 100%);}

<div class="liner-color"></div><div class="toright">    <div class="tobottom"></div></div>

这里写图片描述
4.Canvas实现拾色器(单色)

.content {    width: 800px;}.content div {    width: 50px;    height: 50px;    display: inline-block;}.canvas{    width: 500px;    height: 500px;    position: absolute;    top: 200px;    left: 20px;}#myCanvas{    position: absolute;}#myCanvas2{    mix-blend-mode: multiply;    position: absolute;}

<div class="canvas">    <canvas id="myCanvas" width="500px" height="500px" onclick="getColor()">         <p>Yourbrowser does not support the canvas element!</p>      </canvas>    <canvas id="myCanvas2" width="500px" height="500px" onclick="getColor()">         <p>Yourbrowser does not support the canvas element!</p>      </canvas></div>

function createEle(color){    var div = document.createElement("div");    div.style.backgroundColor = color;    return div;}var cax = document.getElementById("myCanvas"),    ctx = cax.getContext("2d"),    cax2 = document.getElementById("myCanvas2"),    ctx2 = cax2.getContext("2d"),    cwidth = cax.width;    cheight = cax.height;function drawBg(){    var liner = ctx.createLinearGradient(cwidth/2,0,cwidth/2,cheight);    liner.addColorStop(0,"#FFFFFF");    liner.addColorStop(1,"#000000");    ctx.fillStyle = liner;      ctx.fillRect(0,0, cwidth, cheight);    //ctx.globalCompositeOperation = "lighter";    var liner = ctx.createLinearGradient(0,cheight/2,cwidth,cheight/2);    liner.addColorStop(0,"#FFFFFF");    liner.addColorStop(1,"#0000FF");    ctx2.fillStyle = liner;      ctx2.fillRect(0, 0, cwidth, cheight);}drawBg();function getColor(){    var event = event || window.event,        x = event.pageX - 20;        y = event.pageY - 200;    var color1 = ctx.getImageData(x,y,1,1),        color2 = ctx2.getImageData(x,y,1,1),        red = ~~(color1.data[0] * color2.data[0] / 255),        green =~~( color1.data[1] * color2.data[1] /255),        blue = ~~(color1.data[2] * color2.data[2] /255);        color = "RGB("+red+","+green+","+blue+")";    console.log("选中的颜色：",color);}

这里写图片描述
5.移动端下INPUT输入框样式

.weui-cells_form input, .weui-cells_form textarea {    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.weui-input {    width: 100%;    border: 0;    outline: 0;    -webkit-appearance: none;    background-color: transparent;    font-size: inherit;    color: inherit;    height: 1.47058824em;    line-height: 1.47058824;}

6.img 标签下的图片等比缩放

img {    width: auto;    height: auto;    max-width: 100%;    max-height: 100%;}

7.隐藏滚动条

::-webkit-scrollbar {    width: 0;}

1 0