前端布局

移动端的input不能输入

问题出在：

//禁止用户进行复制.选择.
-webkit-user-select: none;

解决如下：

上述代码会产生一些问题。阻止了用户的选择内容行为，会导致一些“内容可编辑”标签无法正常使用，比如input、testarea。

{
-webkit-user-select: text;
-user-select: text;
}

 css3渐变

#box{
       width: 600px;
       height: 600px;
       background: linear-gradient(to right, rgb(229,249,253) , rgb(207,221,255));
    }

行内元素不能设置宽高

justify-content: center;指的是主轴上的对齐，  而align-items: center;指的是交叉轴上的对齐

 

背景图自适应div盒子的宽高

.coupon-list-item{ 
    background:url(../image/coupon.png) no-repeat; 
    background-size:100% 100%;
    -moz-background-size:100% 100%;
}

 移动端高清、多屏适配方案  :border: 1px问题

 

clip-path裁剪图片

clip-path: inset(10px 20px 30px 40px); /* or "none" */
/* 值指的是 top, right, bottom, left 四个点 */

参考资料：CSS中的clip-path裁剪图片用法

css 文本两行显示，超出省略号表示