常用基本css

文字省略号显示

max-width: 110px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;

背景颜色透明

background: transparent;

部分圆角

// 左上 右上 右下 左下
border-radius: 0px 6px 6px 0px;

高斯模糊

filter:blur(16rpx);

padding 不会增加区域

box-sizing: border-box;

nth-child是从1开始的

ul li:nth-child(1)

背景图片铺满 css3

background:url('a.png') no-repeat;
background-size:cover;

定义手机端整体宽度750rem 代码需要放在body当中

<script>
    var _winWidth=document.body.clientWidth || document.documentElement.clientWidth,_style=document.getElementsByTagName("html")[0].style;
    _winWidth >=750 ? _style.fontSize = "100px" : _style.fontSize = _winWidth/7.5 + "px";
</script>

鼠标箭头 css cursor:

auto                    :标准光标  
default                 :标准箭头  
pointer, hand           :手形光标  
wait                    :等待光标  
text                    :I形光标  
vertical-text           :水平I形光标  
no-drop                 :不可拖动光标  
not-allowed             :无效光标  
help                    :帮助光标  
all-scroll              :三角方向标  
move                    :移动标  
crosshair               :十字标  
e-resize                :east 向右拉动窗口大小的光标,一下都是
n-resize  
nw-resize  
w-resize  
s-resize  
se-resize  
sw-resize

textarea

resize:none

阴影

/* 水平偏移 垂直偏移 模糊度 阴影扩展 阴影颜色 内外阴影(默认是外阴影,inset内阴影) */
box-shadow: 10px 20px 5px 40px black inset;
/* 阴影颜色如果不写 会默认盒子文字的颜色 */
box-shadow: 10px 20px 5px;

/* 文字的阴影 参数比较少 */
/* 水平偏移 垂直偏移 模糊度 阴影颜色(也是可以省略的) */
text-shadow:  10px 20px 5px green;

ul去除小点

ul{list-style: none;}

li横向排列

li{float: left;}

margin

竖直方向会按重叠 水平方向不会重叠
css
JSRUN前端笔记, 是针对前端工程师开放的一个笔记分享平台,是前端工程师记录重点、分享经验的一个笔记本。JSRUN前端采用的 MarkDown 语法 (极客专用语法), 这里只属于前端工程师。