开发常用CSS样式汇总

1、页面动画出现问题

在 Chrome 和 Safari 中，当我们使用 CSS 转换或者动画时可能会有页面闪烁的效果，下面的代码可以修复此情况：

.cube {

-webkit-backface-visibility: hidden;

backface-visibility: hidden;

-webkit-perspective: 1000;

perspective: 1000;

/* Other transform properties here */

}

在webkit内核的浏览器中，另一个行之有效的方法是

.cube {

-webkit-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);

/* Other transform properties here */

}

2、字母大小写转换

p {text-transform: uppercase} // 将所有字母变成大写字母

p {text-transform: lowercase} // 将所有字母变成小写字母

p {text-transform: capitalize} // 首字母大写

p {font-variant: small-caps} // 将字体变成小型的大写字母

3.将一个容器化为透明

.wrap {

filter:alpha(opacity=50);

-moz-opacity:0.5;

-khtml-opacity: 0.5;

opacity: 0.5;

}

4、删除转换闪屏

.wrap {

-webkit-transform-style: preserve-3d;

-webkit-backface-visibility: hidden;

-webkit-perspective: 1000;

}

5、识别字符串里的’\n’并换行

一般在富文本中返回换行符不是<br>的标签，而且\n。不使用正则转换的情况下，可通过下面样式实现换行。

body {

white-space: pre-line;

}

6、移除一个标签被点链接的边框

a {

outline: none；//或者outline: 0

text-decoration:none; //取消默认下划线

}

7、CSS显示链接之后的URL

<a href="//www.webqdkf.com"> 有课前端网</a>

<style>

a:after {content: " (" attr(href) ")";}

</style>

8、选择内容中显示、下拉内容右图

select{

text-align: center;

text-align-last: center;

}

select option {

direction: rtl;

}

9、修改输入输入细节的颜色不改变的颜色

input{

color: #fff;

caret-color: red;

}

10、子元素固定宽度父元素宽度被撑开

// 父元素下的子元素是行内元素

.wrap {

white-space: nowrap;

}

// 若父元素下的子元素是块级元素

.wrap {

white-space: nowrap; // 子元素不被换行

display: inline-block;

}

11、让div里的图片和文字同时上下居中

这里不使用flex布局的情况。通过vertival-align

.wrap {

height: 100,

line-height: 100

}

img {

vertival-align：middle

}

// vertical-align css的属性vertical-align用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。只对行内元素、表格单元格元素生效，不能用它垂直对齐块级元素

// vertical-align：baseline/top/middle/bottom/sub/text-top;

12、实现宽高等典型实例

.scale {

width: 100%;

padding-bottom: 56.25%;

height: 0;

position: relative;

}

.item {

position: absolute;

width: 100%;

height: 100%;

background-color: 499e56;

}

<div class="scale">

<div class="item">

这里是所有子元素的容器

</div>

</div>

13、transfrom的rotate属性在span标签下失效

span {

display: inline-block

}

14、css加载动画

主要是通过css旋转动画的实现：

.dom{

-webkit-animation:circle 1s infinite linear;

}

@keyframes circle{

0%{ transform: rotate(0deg); }

100%{ transform: rotate(360deg); }

}

实现如下效果：

<div class="loader"></div>

<style>

.loader {

border: 16px solid #f3f3f3;

border-radius: 50%;

border-top: 16px solid #3498db;

width: 80px;

height: 80px;

-webkit-animation: spin 2s linear infinite;

animation: spin 2s linear infinite;

}

@-webkit-keyframes spin {

0% { -webkit-transform: rotate(0deg); }

100% { -webkit-transform: rotate(360deg); }

}

@keyframes spin {

0% { transform: rotate(0deg); }

100% { transform: rotate(360deg); }

}

</style>