CSS 常用写法

前端 tytrock ⋅ 于 2018-01-19 16:17:53 ⋅ 2148 阅读

1、设置背景透明度

background-color:rgba(0,152,50,0.7);// -->70%的不透明度  
   
background-color:transparent;//支持完全透明


2、背景颜色渐变

  background: red; /* For browsers that do not support gradients */  
  background: -webkit-linear-gradient(left, red , yellow); /* For Safari 5.1 to 6.0 */  
  background: -o-linear-gradient(right, red, yellow); /* For Opera 11.1 to 12.0 */  
  background: -moz-linear-gradient(right, red, yellow); /* For Firefox 3.6 to 15 */  
  background: linear-gradient(to right, red , yellow); /* Standard syntax */


3、选取第几个元素

li:first-child{background:#090} // 第一个元素
li:last-child{background:#090}  // 最后一个元素
li:nth-child(3){background:#090}  // 第3个元素
li:nth-child(2n) // 偶数标签元素,第2、4、6、8...
li:nth-child(2n-1)  // 奇数标签元素,第1、3、5、7...
li:nth-child(n+3)  // 表示选择列表中的标签从第3个开始到最后
li:nth-child(-n+3)  // 表示选择列表中的标签从0到3,即小于3的标签
li:nth-last-child(3)  //表示选择列表中的倒数第3个标签


4、图片添加模糊效果

.blur {    
    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    -ms-filter: blur(10px);    
    filter: blur(10px);    
}


回复数量: 0
    暂无评论~~
    • 请注意单词拼写,以及中英文排版,参考此页
    • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`, 更多语法请见这里 Markdown 语法
    • 支持表情,使用方法请见 Emoji 自动补全来咯,可用的 Emoji 请见 :metal: :point_right: Emoji 列表 :star: :sparkles:
    • 上传图片, 支持拖拽和剪切板黏贴上传, 格式限制 - jpg, png, gif
    • 发布框支持本地存储功能,会在内容变更时保存,「提交」按钮点击时清空
    Ctrl+Enter