1、垂直居中对齐

.vc{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
.vc{
position:absolute;
top:50%;
left:50%;
width:100px;
height:100px;
margin:-50px 0 -50px;
}

2、全屏显示

html,body{
position:fixed;
width:100%;
height:100%;
}
div{
height:100%;
}

3、图像灰度

img{
filter:gray;
-webkit-filter:grayscale(1);
}

4、背景渐变动画

.bg{
background-image:linear-gradient(#5187c4,#1c2f45);
background-size:auto 200%;
background-position:0 100%;
transition:background-position 0.5s;
}
.bg:hover{
background-position:0 0;
}

5、图片边框偏光

img.polaroid{
background:#000;
border:solide #fff;
border-width:6px 6px 20px 6px;
box-shadow:1px 1px 5px #333;
width:200px;
height:200px;
}

前端常用的css代码的更多相关文章

  1. 前端常用得CSS代码分享

    前端常用得CSS代码分享 本文首发于公众号:小夭同学,同步更新个人博客:故事影片,转载请署名.代码不断更新中!! 1,垂直居中对齐 .vc { position: absolute; top: 50% ...

  2. 前端常用的jquery代码

    主要是个人在工作中常用到的一些代码,会慢慢添加: 1).enter键时可以触发某些事件,比如登陆事件: $('#loginform').bind('keypress',function(event){ ...

  3. HTML/CSS代码片段

    内容简介:本文收集了我常用的CSS代码片段! *reset @charset "utf-8"; /* reset */ body, dl, dd, h1, h2, h3, h4, ...

  4. 前端html、CSS快速编写代码插件-Emmet使用方法技巧详解

    前端html.CSS快速编写代码插件-Emmet使用方法技巧详解   Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生.它使用仿CSS选择器的语法来 ...

  5. Web前端篇:CSS常用格式化排版、盒模型、浮动、定位、背景边框属性

    目录 Web前端篇:CSS常用格式化排版.盒模型.浮动.定位.背景边框属性 1.常用格式化排版 2.CSS盒模型 3.浮动 4.定位 5.背景属性和边框属性 6.网页中规范和错误问题 7.显示方式 W ...

  6. [总结]WEB前端开发常用的CSS/CSS3知识点

    css3新单位vw.vh.vmin.vmax vh: 相对于视窗的高度, 视窗被均分为100单位的vh; vw: 相对于视窗的宽度, 视窗被均分为100单位的vw; vmax: 相对于视窗的宽度或高度 ...

  7. !!!常用CSS代码

    http://www.cnblogs.com/qq21270/p/4854643.html 伪类 http://www.cnblogs.com/qq21270/p/4891167.html CSS3动 ...

  8. Web前端开发最佳实践(9):CSS代码太太乱,重复代码太多?你需要精简CSS代码

    前言 提高网站整体加载速度的一个重要手段就是提高代码文件的网络传输速度.之前提到过,所有的代码文件都应该是经过压缩了的,这可提高网络传输速度,提高性能.除了压缩代码之外,精简代码也是一种减小代码文件大 ...

  9. 前端开发中常用的CSS选择器解析(一)

    你也许已经掌握了id.class.后台选择器这些基本的css选择器.但这远远不是css的全部.下面向大家系统的介绍css中最常用的选择器,包括我们最头痛的浏览器兼容性问题.掌握了它们,才能真正领略cs ...

随机推荐

  1. VMware Workstation15激活码

    VG5HH-D6E04-0889Y-QXZET-QGUC8 亲测可用

  2. C# List 根据对象属性去重的四种方法对比

    测试代码: private void TestDistinct() { Task.Run(() => { //生成测试数据 DateTime dt = DateTime.Now; Random ...

  3. js 日期时间的格式化

    将日期时间转换为指定格式,如:YYYY-mm-dd HH:MM表示2019-06-06 19:45 function dateFormat(fmt, date) { let ret; let opt ...

  4. Java生鲜电商平台-生鲜系统中微服务架构设计与分析实战

    Java生鲜电商平台-生鲜系统中微服务架构设计与分析实战 说明: Java生鲜系统中微服务的拆分应该如何架构设计与分析呢?以下是我的实战中的设计与经验分析. 目录 1. 微服务简介2. 当前现状3. ...

  5. C# net core程序调试错误集(持续更新)

    目录 C#程序调试错误集 1.依赖注入错误System.InvalidOperationException: Unable to resolve service for type 'xxx' whil ...

  6. How to: Calculate a Property Value Based on Values from a Detail Collection 如何:基于详细信息集合中的值计算属性值

    This topic describes how to implement a business class, so that one of its properties is calculated ...

  7. Electron npm install 常见错误(Windows)

    问题一:node_gyp使用版本不对 if not defined npm_config_node_gyp (node "C:\Users\Administrator\AppData\Roa ...

  8. JS基础语法---基本包装类型

    基本包装类型 普通变量不能直接调用属性或者方法 对象可以直接调用属性和方法     基本包装类型: 本身是基本类型, 但是在执行代码的过程中, 如果这种类型的变量调用了属性或者是方法, 那么这种类型就 ...

  9. Python输出16进制不带0x补零,整数转16进制,字符串转16进制

    Python输出16进制不带0x补零,整数转16进制,字符串转16进制   在开发中,我们偶尔会遇到需要将数据通过控制台打印出来,以检查数据传输的准确性.例如调试服务端刚接到的二进制数据(里面包含很多 ...

  10. MySQL数据库~~~~~查询行(文件的内容)

    1. 单表查询 语法 select distinct 字段 from 库名.表名 where 条件 group by 字段 # 分组 having 筛选 # 过滤 order by 字段 # 排序 l ...