前端 javascript 50种css常用的代码（实用）

#blue {

position:relative;

width: 0;

height: 0;

border-width: 0 40px 40px;

border-style: solid;

border-color: transparent transparent blue;

}

#blue:after {

content: "";

position: absolute;

top: 1px;

left: -38px;

border-width: 0 38px 38px;

border-style: solid;

border-color: transparent transparent yellow;

}

注: 如果想绘制右直角三角，则将左 border 设置为 0；如果想绘制左直角三角，将右 border 设置为 0 即可（其它情况同理）。

12、Table表格边框合并

table,tr,td{

border: 1px solid #666;

}

table{

border-collapse: collapse;

}

13、css 选取第 n 个标签元素

first-child first-child 表示选择列表中的第一个标签。last-child last-child 表示选择列表中的最后一个标签 nth-child(3) 表示选择列表中的第 3 个标签nth-child(2n) 这个表示选择列表中的偶数标签nth-child(2n-1) 这个表示选择列表中的奇数标签nth-child(n+3) 这个表示选择列表中的标签从第 3 个开始到最后。nth-child(-n+3) 这个表示选择列表中的标签从 0 到 3，即小于 3 的标签。nth-last-child(3) 这个表示选择列表中的倒数第 3 个标签。 

使用方法：

li:first-child{}

14、onerror 处理图片异常

使用 onerror 异常处理时，若 onerror 的图片也出现问题，则图片显示会陷入死循环，所以要在赋值异常图片之后，将地址置空

15、背景图片的大小

.bg-img{

background:url(../img/find_pw_on_2.png) no-repeat center center !important;

background-size: 27px auto !important;

/*background-size: 100% 100%;*/

/*background-size: 50px 100px*/

}

16、文字之间的间距

单词text-indent抬头距离，letter-spacing字与字间距

p{

text-indent：10px；/*单词抬头距离*/

letter-spacing：10px；/*间距*/

}

17、文字之间的间距

单词text-indent抬头距离，letter-spacing字与字间距

p{

text-indent：10px；/*单词抬头距离*/

letter-spacing：10px；/*间距*/

}

18、元素占满整个屏幕

heigth如果使用100%，会根据父级的高度来决定，所以使用100vh单位。

.dom{

width:100%;

height:100vh;

}

19、CSS实现文本两端对齐

.wrap {

text-align: justify;

text-justify: distribute-all-lines; /*ie6-8*/

text-align-last: justify; /*一个块或行的最后一行对齐方式*/

-moz-text-align-last: justify;

-webkit-text-align-last: justify;

}

20、实现文字竖向排版

/* 单列展示时*/

.wrap {

width: 25px;

line-height: 18px;

height: auto;

font-size: 12px;

padding: 8px 5px;

word-wrap: break-word;/*英文的时候需要加上这句，自动换行*/

}

/*多列展示时*/

.wrap {

height: 210px;

line-height: 30px;

text-align: justify;

writing-mode: vertical-lr; /*从左向右 */

writing-mode: tb-lr; /*IE从左向右*/

/*writing-mode: vertical-rl; -- 从右向左*/

/*writing-mode: tb-rl; -- 从右向左*/

}

21、使元素鼠标事件失效

.wrap {

/* 如果按tab能选中该元素，如button，然后按回车还是能执行对应的事件，如click。*/

pointer-events: none;

cursor: default;

}

22、禁止用户选择

.wrap {

-webkit-touch-callout: none;

-webkit-user-select: none;

-khtml-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

}

23、字母大小写转换

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

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

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

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

24、将一个容器设为透明

.wrap {

filter:alpha(opacity=50);

-moz-opacity:0.5;

-khtml-opacity: 0.5;

opacity: 0.5;

}

25、消除transition闪屏

.wrap {

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

-webkit-backface-visibility: hidden;

-webkit-perspective: 1000;

}

26、修改input输入框中光标的颜色不改变字体的颜色

input{

color: #fff;

caret-color: red;

}

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

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

.wrap {

white-space: nowrap;

}

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

.wrap {

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

display: inline-block;

}

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

.wrap {

height: 100,

line-height: 100

}

img {

vertival-align：middle

}

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

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

29、实现宽高等比例自适应矩形

.scale {

width: 100%;

padding-bottom: 56.25%;

height: 0;

position: relative;

}

.item {

position: absolute;

width: 100%;

height: 100%;

background-color: 499e56;

}

30、CSS加载动画

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

.dom{

-webkit-animation:circle 1s infinite linear;

}

@keyframes circle{

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

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

}

实现如下效果：

31、文字渐变效果实现

32、好看的边框阴影

33、实现立体字的效果

34、全屏背景图片的实现

.swper{

background-image: url(./img/bg.jpg);

width:100%;

height:100%;/*父级高不为100%请使用100vh*/

zoom: 1;

background-color: #fff;

background-repeat: no-repeat;

background-size: cover;

-webkit-background-size: cover;

-o-background-size: cover;

background-position: center 0;

}

35、实现文字描边的2种方法

方式一：

.stroke {

-webkit-text-stroke: 1px greenyellow;

text-stroke: 1px greenyellow;

}

方式二：

.stroke {

text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;

-webkit-text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;

-moz-text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;

*filter: Glow(color=#000, strength=1);

}

36、元素透明度的实现

.dom{

opacity:0.4;

filter:alpha(opacity=40); /* IE8 及其更早版本 */

}

使用rgba()设置颜色透明度。

.demo{

background:rgba(255,0,0,1);

}

37、CSS不同单位的运算

css自己也能够进行简单的运算，主要是用到了calc这个函数。实现不同单位的加减运算：

.div{

width: calc(100% - 50px);

}

38、CSS实现文字模糊效果

.vague_text{

color: transparent;

text-shadow: #111 0 0 5px;

}

39、通过滤镜让图标变灰

一张彩色的图片就能实现鼠标移入变彩色，移出变灰的效果。

 40、创建圆角边框

.element {

border-radius: 5px;

}

41、行内标签元素出现间隙问题

方式一：父级font-size设置为0

.father{

font-size:0;

}

 方式二：父元素上设置word-spacing的值为合适的负值

.father{

word-spacing:-2px

}

其它方案：1将行内元素写为1行(影响阅读)；2使用浮动样式（会影响布局）。

42、解决vertical-align属性不生效

在使用vertical-align:middle实现垂直居中的时候，经常会发现不生效的情况。这里需要注意它生效需要满足的条件：

 **作用环境：**父元素设置line-height。需要和height一致。或者将display属性设置为table-cell，将块元素转化为单元格。 **作用对象：**子元素中的inline-block和inline元素。

43、页面动画出现闪烁问题

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

.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 */

}

44、使用硬件加速

在浏览器中用css开启硬件加速，使GPU (Graphics Processing Unit) 发挥功能，从而提升性能。硬件加速在移动端尤其有用，因为它可以有效的减少资源的利用。

目前主流浏览器会检测到页面中某个DOM元素应用了某些CSS规则时就会开启，最显著的特征的元素的3D变换。如果不使用3D变形，我们可以通过下面方式来开启： 

.wrap {

transform: translateZ(0);

}

45、移动端软键盘变为搜索方式

默认情况下软键盘上该键位为前往或者确认等文字，要使其变为搜索文字，需要在 input 上加上 type 声明：

46、Table表格边框合并 

table,tr,td{

border: 1px solid #666;

}

table{

border-collapse: collapse;

}

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

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

body {

white-space: pre-line;

}

 48、使用 Grid 进行布局

.container {

display: grid;

grid-template-columns: 1fr 1fr 1fr;

grid-gap: 10px;

}

49、创建圆角边框

.element {

border-radius: 5px;

}

50、浮动效果

.element {

float: left;

}

这些是常用的 CSS 代码示例，可以帮助您实现各种样式和效果。

参考链接