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. (3)一起来看下使用mybatis框架的select语句的源码执行流程吧

    本文是作者原创,版权归作者所有.若要转载,请注明出处.本文以简单的select语句为例,只贴我觉得比较重要的源码,其他不重要非关键的就不贴了 主流程和insert语句差不多,这里主要讲不同的流程,前面 ...

  2. 痞子衡嵌入式:飞思卡尔i.MX RTyyyy系列MCU启动那些事(1)- Boot简介

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是飞思卡尔i.MX RTyyyy系列MCU的BootROM功能简介. 截止目前为止i.MX RTyyyy系列已公布的芯片有三款i.MXRT ...

  3. SpringCloud服务配置中心

    SpringCloud Config简介 Spring Cloud Config 是 Spring Cloud 团队创建的一个全新项目,用来为分布式系统中的基础设施和微服务应用提供集中化的外部配置支持 ...

  4. 工厂模式-C#改良实现

    参考了下网上的工厂模式实现,总的来说例子还是OK得,但是示例太单一了,因此我做了下优化的改良实现. namespace DP { public interface ICreditCard { stri ...

  5. Java中"或"运算与"与"运算快慢的三三两两

    先上结论 模运算比与运算慢20%到30% 这是通过实验的方式得到的结论.因为没有大大可以进行明确指导,所以我以最终运行的结果为准.欢迎指正. 测试代码 @Test public void test10 ...

  6. iOS多线程知识梳理

    iOS多线程知识梳理 线程进程基础概念 进程 进程是指在系统中正在运行的一个应用程序 每个进程之间是独立的,每个进程均运行在其专用且受保护的内存空间内 线程 1个进程要想执行任务,必须得有线程(每1个 ...

  7. python 基础学习笔记(6)--函数(1)

    ## **函数(1)** **函数的定义:** 1. [ ] 小时候大家应该都玩过乐高积木,只要通过想象和创意,可以用它怕拼凑出很多神奇的东西.随着学习的深入,编写的代码日益增加并且越来越复杂,所以需 ...

  8. 【问题解决】vim 打开文档后提醒 E325: ATTENTION 怎么办?

    这是经典的 vi/vim 的报错情形. 在 Linux 下,使用 vim 或是 vi 查看文件时,可能每次都会出现下面贴出的 E325 错误提醒,然后按 E 进行 Edit anyway 才能继续读写 ...

  9. 关于eclipse创建的[传统web项目][传统maven项目][maven-web项目][springboot项目]目录结构

    总体比较 [传统web项目] [传统maven项目] [maven-web项目] [springboot项目] 本文摘至https://blog.csdn.net/qq_42747738/articl ...

  10. 埃氏筛法(求n以内有哪些个质数)

    核心思想:从i=2开始,划去i的倍数,即剩下i为质数(如删去2的倍数后2为质数,再删去3的倍数后3为质数,4被删除则跳过,5未被删除则记录然后删除5的倍数...以此类推) #include <b ...