1. 父窗口宽度不定,要求内部两个子块, 第一个子块宽度固定,第二个子块宽度自适应。
第一个子块宽度固定,定位为绝对定位 position:absolute; 第二个子块设置margin-left即可。
2. 如果内容太长,多余的部分用...代替
.dingdan-longmsg{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
3. 设置谷歌浏览器滚动条的样式
::-webkit-scrollbar{ padding-left:1px; font-weight:bold;">#fafafa; overflow:visible; 9px; } ::-webkit-scrollbar-thumb{ font-weight:bold;">rgba(0, 0, 0, .1); background-clip:padding-box; border-left-2px; min-height:10px; box-shadow:inset 1px 1px 0 rgba(0, 0, 0, .1),inset 0 -1px 0 rgba(0, 0, 0, .07); } ::-webkit-scrollbar-thumb:vertical:hover{ font-weight:bold;">rgba(0, 0, 0, .2); } ::-webkit-scrollbar-thumb:vertical:active{ font-weight:bold;">rgba(0, 0, 0, .2); } ::-webkit-scrollbar-button{ height:0; 0; } ::-webkit-scrollbar-track{ background-clip:padding-box; border:solid transparent; border-0 0 0 2px; } ::-webkit-scrollbar-corner{ background:transparent; } ::-webkit-scrollbar-track-piece{ margin: 10px 0; -webkit-border-radius: 0; -webkit-border-bottom-right-radius: 4px; -webkit-border-bottom-left-radius: 4px; }
4.ios 去除input框阴影
input{ -webkit-appearance: none; }
5. 单边阴影
.top { box-shadow: 0 -4px 5px -3px red; } .right { box-shadow: 4px 0 5px -3px green; } .bottom { box-shadow: 0 4px 5px -3px blue; } .left { box-shadow: -4px 0 5px -3px orange; }
上面的代码调整了阴影的位移量,新增了box-shadow的扩展半径。