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;
width:9px;
}
::-webkit-scrollbar-thumb{
font-weight:bold;">rgba(0, 0, 0, .1);
background-clip:padding-box;
border-left-width: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;
width:0;
}
::-webkit-scrollbar-track{
background-clip:padding-box;
border:solid transparent;
border-width: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的扩展半径。

 

CSS 特殊样式设置集合的更多相关文章

  1. 四大伪类,css鼠标样式设置,reset操作,静止对文本操作

    07.31自我总结 一.a标签的四大伪类 a:link{样式} 未访问时的状态(鼠标点击前显示的状态) a:hover{样式} 鼠标悬停时的状态 a:visited{样式} 已访问过的状态(鼠标点击后 ...

  2. css 字体样式设置大全

    css样式大全(整理版)   字体属性:(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD 样式 { ...

  3. css 字体样式设置

    css字体样式(Font Style),属性 时间:2014-05-08 21:49 来源:我爱学习网 | 作者:我爱学习网 | 本文已影响 68353 人   css字体样式(Font Style) ...

  4. 前端 CSS 优先级 样式设置important

    !important 的使用. !important方式来强制让样式生效,但并不推荐使用.因为如果过多的使用!important会使样式文件混乱不易维护. 万不得已可以使用!important 现在选 ...

  5. CSS滚动条样式设置

    webkit浏览器css设置滚动条 主要有下面7个属性 ::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的 ::-webkit-scrollbar-button 滚动条两端的按钮 ...

  6. 认识CSS中css背景样式设置

    前端之HTML,CSS(五) CSS CSS背景 CSS可以添加背景颜色和背景图片,也可以对图片进行设置.设置的样式有: background-color 背景颜色 background-image ...

  7. [CSS]滚动条样式设置

    概述 最近项目中需要,将一个页面嵌入在一个webbrower中,这个webrower是定高的,在页面内容超过webbrower高度时,需要以滚动条的形式展现,当时也考虑了使用webbrower的滚动条 ...

  8. css基本样式设置

    div中文字居中 如何让一个div中的文字水平和垂直居中?设置如下: 给定该div的长宽(或者二者只给出其一也可) .box{ height: 100px; width: 30%; text-alig ...

  9. css scrollbar样式设置

    参考链接:https://segmentfault.com/a/1190000012800450

随机推荐

  1. spark 环境变量系列配置

    1. hadoop core-site.xml配置

  2. java学习笔记(13) —— google GSON 实现json转化方法

    1.配置struts.xml <action name="getGsonAction" class="com.test.action.json.GetGsonAct ...

  3. app.config动态修改及读取

    1.添加应用程序配置文件 右键点击项目,选择“添加”→“添加新建项”→“添加应用程序配置文件”将其添加到项目中. 2.设置配置文件 <?xmlversion="1.0"enc ...

  4. python 装饰器简介

    24.装饰器     1.@ + 函数名:#1自动执行outer函数并且将下面的函数名f1当做参数传递                   #2将outer函数的返回值,重新赋值给f1. def ou ...

  5. Python实现类似switch...case功能

    最近在使用Python单元测试框架构思自动化测试,在不段的重构与修改中,发现了大量的if...else之类的语法,有没有什么好的方式使Python具有C/C#/JAVA等的switch功能呢? 在不断 ...

  6. Reachability 检测网络状态

    -(void)viewWillAppear:(BOOL)animated { [IOSExcept JudgeNetwork];//联网 NSLog(@"检查网络 请稍后....." ...

  7. synaptics驱动,插入USB鼠标禁用触控板注册表

    Title:synaptics驱动,插入USB鼠标禁用触控板注册表 --2010-11-01 22:21 记得以前用过一个synaptics的驱动,自带有插入USB鼠标禁用触控板的选项的,有些没有自带 ...

  8. jQueryMobile之Popup

    效果: (1):Tooltip (2):Menu (3):NestedMenu (4):Login ------ 源码: <!DOCTYPE html> <html lang=&qu ...

  9. css 选择器 (学习笔记)

    参考 http://zachary-guo.iteye.com/blog/605116 1. div+p  选择紧接在 <div> 元素之后的所有 <p> 元素.解释 : fi ...

  10. css属性之appearance

    appearance 属性允许您使元素看上去像标准的用户界面元素. 案例: 使 div 元素看上去像一个按钮 <!DOCTYPE html> <html> <head&g ...