css问题清单与经验

1、web动态修改样式值、修改style标签里面的css样式、document、querySelector、setProperty

document.querySelector(".el-upload").style.setProperty("border", "1px dashed transparent"); 

这里也可以使用id精确设置属性值，删除属性无效，只能重设属性值，亲测有效。在需要设置的函数/方法里面添加此代码即可。

2、css之最后列表项去除border-bottom属性、last-child、not(:last-child)

普通写法

.item { border-bottom: 1px solid red; } .item:last-child { border-bottom: 1px solid transparent; } 

此写法的优点是能保证每一项的盒子大小一致，缺点是代码量多。

伪类写法

.item:not(:last-child) { border-bottom: 1px solid red; } 

此写法的优点是代码量少，缺点是最后一项缺少1px的高度。

相关链接 1、20个CSS快速提升技巧

3、设置阴影的两种常用方式、严丝合缝

box-shadow：对整个盒子设置阴影 drop-shadow：对像素点严丝合缝的设置阴影

.box_shadow { box-shadow: 0 0 10px #FFFFFF; } .filter_drop_shadow { filter: drop-shadow(0 0 10px #FFFFFF); } 

<img class="box_shadow" src="./img/five_pointed_star.png"> <img class="filter_drop_shadow" src="./img/five_pointed_star.png"> 

4、保持宽高比

<div class="aspect_ratio"> width: 90%; margin: 0 auto; background-color: #FF0000; aspect-ratio: 16/9; } 

5、文字镂空、空心文字

<view class="white_text">缘起性空 font-size: 100rpx; color: #333333; text-shadow: 2rpx 0 #FFFFFF, 2rpx 2rpx #FFFFFF, 2rpx -2rpx #FFFFFF, 0 2rpx #FFFFFF, 0 -2rpx #FFFFFF, -2rpx 0 #FFFFFF, -2rpx 2rpx #FFFFFF, -2rpx -2rpx #FFFFFF; } 

微信小程序演示