前端常用得CSS代码分享

本文首发于公众号：执行上下文，同步更新个人博客：执行上下文，转载请署名。代码不断更新中！！

 

前提

2019年11月的最后一篇文章来拉，在日常开发中高频使用的CSS代码分享给大家，其中可能有很多大家经常使用的。欢迎大家提出更优的解决方法！！

Git地址

前端常用的CSS代码

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、不同a标签链接使用不同样式

// link

a[href^="http://"]{
    background: url(link.gif) no-repeat center right;
}
// emails
a[href^="mailto:"]{
    background: url(email.png) no-repeat center right;
}

// pdfs

a[href$=".pdf"]{
    background: url(pdf.png) no-repeat center right;
}
复制代码

4、图像灰度

img {
    filter: gray; 
    -webkit-filter: grayscale(1);
}
复制代码

5、背景渐变动画

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;
}
复制代码

6、长文本自动换行

pre {
    white-space: pre-line;
    word-wrap: break-word;
}
复制代码

7、模糊文本

.text {
   filter: blur(1px);
}
复制代码

8、用CSS动画实现省略号动画

.point:after {
    overflow: hidden;
    display: inline-block;
    vertical-align: bottom;
    animation: ellipsis 2s infinite;
    content: "\2026";
}
@keyframes ellipsis {
    from {
        width: 2px;
    }
    to {
        width: 15px;
    }
}
复制代码

9、样式重置

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  outline: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html { height: 101%; }
body { font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, sans-serif; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold; } 
table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }
p { font-size: 1.2em; line-height: 1.0em; color: #333; }
复制代码

10、清除浮动

.clearfix:before, .container:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
复制代码

11、css元素透明

.transparent {
    filter: alpha(opacity=50); 
    -khtml-opacity: 0.5; 
    -moz-opacity: 0.5;   
    opacity: 0.5;     
}
复制代码

12、CSS引用样式

blockquote {
    background: #f9f9f9;
    border-left: 10px solid #ccc;
    margin: 1.5em 10px;
    padding: .5em 10px;
    quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
    color: #ccc;
    content: open-quote;
    font-size: 4em;
    line-height: .1em;
    margin-right: .25em;
    vertical-align: -.4em;
}
blockquote p {
    display: inline;
}
复制代码

13、个性圆角

.borderRadius {
    border-radius: 4px 3px 6px 10px;
}
.borderRadius {
    border-top-left-radius: 4px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 10px;
}
复制代码

14、通用媒体查询

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  /* Styles */
}
@media only screen and (min-width : 321px) {
  /* Styles */
}
@media only screen and (max-width : 320px) {
  /* Styles */
}
/* iPad */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
  /* Styles */
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
  /* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
  /* Styles */
}
/* 桌面 */
@media only screen and (min-width : 1224px) {
  /* Styles */
}

@media only screen and (min-width : 1824px) {
  /* Styles */
}

@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {
  /* Styles */
}
复制代码

15、自定义文本选择

::selection { background: #e2eae2; }
复制代码

16、图片边框偏光

img.polaroid {
    background:#000; 
    border:solid #fff;
    border-width:6px 6px 20px 6px;
    box-shadow:1px 1px 5px #333; 
    -webkit-box-shadow:1px 1px 5px #333;
    -moz-box-shadow:1px 1px 5px #333;
    height:200px; 
    width:200px;  
}
复制代码

17、锚链接伪类

a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; }
a:active { color: yellow; }
复制代码

18、全屏背景图

html { 
    background: url('bg.jpg') no-repeat center center fixed; 
    background-size: cover;
}
复制代码

19、内容垂直居中

.center {
    min-height: 6.5em;
    display: table-cell;
    vertical-align: middle;
}
复制代码

20、强制出现垂直滚动条

html { height: 101% }
复制代码

21、CSS3渐变模板

.bg {
    background: #629721;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#83b842), to(#629721));
    background-image: linear-gradient(top, #83b842, #629721);
}
复制代码

22、@font-face引用

@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); 
    src: url('webfont.eot?#iefix') 
    url('webfont.woff') format('woff'), 
    url('webfont.ttf')  format('truetype'),
    url('webfont.svg#svgFontName') format('svg');
}
body {
    font-family: 'MyWebFont', Arial, sans-serif;
}
复制代码

23、连接CSS3元素

p {
    position:relative;
    z-index:1;
    padding: 10px;
    margin: 10px;
    font-size: 21px;
    line-height: 1.3em;
    color: #fff;
    background: #ff0030;
    box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10,10,0,.5);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
p:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 3px;
    bottom: 3px;
    left :3px;
    right: 3px;
    border: 2px dashed #fff;
}
p a {
    color: #fff;
    text-decoration:none;
}
p a:hover, p a:focus, p a:active {
    text-decoration:underline;
}
复制代码

24、CSS斑马线

tbody tr:nth-child(odd) {
    background-color: #ccc;
}
复制代码

25、 css&符号

.amp {
    font-family: Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif;
    font-style: italic;
    font-weight: normal;
}
复制代码

26、内盒阴影

.div { 
    box-shadow: inset 2px 0 4px #000;
}
复制代码

27、外盒阴影

.div { 
    box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
}
复制代码

28、三角形列表项目符号

ul {
    margin: 0.75em 0;
    padding: 0 1em;
    list-style: none;
}
li:before { 
    content: "";
    border-color: transparent #111;
    border-style: solid;
    border-width: 0.35em 0 0.35em 0.45em;
    display: block;
    height: 0;
    width: 0;
    left: -1em;
    top: 0.9em;
    position: relative;
}
复制代码

29、固定宽度的居中布局

.div {
    width: 800px;
    margin: 0 auto;
}
复制代码

30、CSS3列文本

.columnsText {
    text-align: justify;
    -webkit-column-count: 3;
    -webkit-column-gap: 12px;
    -webkit-column-rule: 1px solid #c4c8cc;
}
复制代码

31、CSS固定页脚

footer {
    position: fixed;
    left: 0px;
    bottom: 0px;
    height: 30px;
    width: 100%;
    background: #444;
}
复制代码

32、设置浏览器最小高度

.div{
    min-height: 550px;
    height: auto !important;
    height: 550px;
}
复制代码

33、CSS3输入效果

input[type=text] {
    transition: all 0.30s ease-in-out;
    outline: none;
    padding: 3px 0px 3px 3px;
    margin: 5px 1px 3px 0px;
    border: 1px solid #ddd;
}
input[type=text]:focus {
    box-shadow: 0 0 5px rgba(81, 203, 238, 1);
    padding: 3px 0px 3px 3px;
    margin: 5px 1px 3px 0px;
    border: 1px solid rgba(81, 203, 238, 1);
}
复制代码

34、强制换行

pre {
    white-space: pre-wrap;        
    word-wrap: break-word;  
}
复制代码

35、在可点击的项目上强制手型

.pointer {
    cursor: pointer;
}
复制代码

36、网页顶部盒阴影

body:before {
    content: "";
    position: fixed;
    top: -10px;
    left: 0;
    width: 100%;
    height: 10px;
    box-shadow: 0px 0px 10px rgba(0,0,0,.8);
    z-index: 100;
}
复制代码

37、CSS3对话气泡

.line {
    background-color: #ededed;
    border: 2px solid #666;
    font-size: 35px;
    line-height: 1.3em;
    margin: 10px auto;
    padding: 10px;
    position: relative;
    text-align: center;
    width: 300px;
    border-radius: 20px;
    box-shadow: 0 0 5px #888;
}
.chat-bubble-arrow-border {
    border-color: #666 transparent transparent transparent;
    border-style: solid;
    border-width: 20px;
    height: 0;
    width: 0;
    position: absolute;
    bottom: -42px;
    left: 30px;
}
.chat-bubble-arrow {
    border-color: #ededed transparent transparent transparent;
    border-style: solid;
    border-width: 20px;
    height: 0;
    width: 0;
    position: absolute;
    bottom: -39px;
    left: 30px;
}
复制代码

38、持久的列表排序

ol.chapters {
    list-style: none;
    margin-left: 0;
}
ol.chapters > li:before {
    content: counter(chapter) ". ";
    counter-increment: chapter;
    font-weight: bold;
    float: left;
    width: 40px;
}
ol.chapters li {
    clear: left;
}
ol.start {
    counter-reset: chapter;
}
ol.continue {
    counter-reset: chapter 11;
}
复制代码

39、CSS悬浮提示文本

a { 
    border-bottom:1px solid #bbb;
    color:#666;
    display:inline-block;
    position:relative;
    text-decoration:none;
}
a:hover,
a:focus {
    color:#36c;
}
a:active {
    top:1px; 
}

a[data-tooltip]:after {
    border-top: 8px solid #222;
    border-top: 8px solid hsla(0,0%,0%,.85);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    content: "";
    display: none;
    height: 0;
    width: 0;
    left: 25%;
    position: absolute;
}
a[data-tooltip]:before {
    background: #222;
    background: hsla(0,0%,0%,.85);
    color: #f6f6f6;
    content: attr(data-tooltip);
    display: none;
    font-family: sans-serif;
    font-size: 14px;
    height: 32px;
    left: 0;
    line-height: 32px;
    padding: 0 15px;
    position: absolute;
    text-shadow: 0 1px 1px hsla(0,0%,0%,1);
    white-space: nowrap;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}
a[data-tooltip]:hover:after {
    display: block;
    top: -9px;
}
a[data-tooltip]:hover:before {
    display: block;
    top: -41px;
}
a[data-tooltip]:active:after {
    top: -10px;
}
a[data-tooltip]:active:before {
    top: -42px;
}
复制代码

40、深灰色的圆形按钮

.graybtn {
    box-shadow:inset 0px 1px 0px 0px #ffffff;
    background:gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #d1d1d1) );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#d1d1d1');
    background-color:#ffffff;
    border-radius:6px;
    border:1px solid #dcdcdc;
    display:inline-block;
    color:#777777;
    font-family:arial;
    font-size:15px;
    font-weight:bold;
    padding:6px 24px;
    text-decoration:none;
    text-shadow:1px 1px 0px #ffffff;
}
.graybtn:hover {
    background:gradient( linear, left top, left bottom, color-stop(0.05, #d1d1d1), color-stop(1, #ffffff) );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d1d1d1', endColorstr='#ffffff');
    background-color:#d1d1d1;
}
.graybtn:active {
    position:relative;
    top:1px;
}
复制代码

41、显示a链接得URLs

@media print   {  
  a:after {  
    content: " [" attr(href) "] ";  
  }  
}
复制代码

42、禁用移动Webkit的选择高亮

body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
复制代码

43、CSS3 圆点图案

body {
    background: radial-gradient(circle, white 10%, transparent 10%),
    radial-gradient(circle, white 10%, black 10%) 50px 50px;
    background-size: 100px 100px;
}
复制代码

44、CSS3 方格图案

body {
    background-color: white;
    background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), 
    linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
    background-size: 100px 100px;
    background-position: 0 0, 50px 50px;
}
复制代码

45、CSS font属性缩写

p {
  font: italic small-caps bold 1.2em/1.0em Arial, Tahoma, Helvetica;
}
复制代码

46、论文页面的卷曲效果

ul.box {
    position: relative;
    z-index: 1;
    overflow: hidden;
    list-style: none;
    margin: 0;
    padding: 0; 
}
ul.box li {
    position: relative;
    float: left;
    width: 250px;
    height: 150px;
    padding: 0;
    border: 1px solid #efefef;
    margin: 0 30px 30px 0;
    background: #fff;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; 
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; 
}
ul.box li:before,
ul.box li:after {
    content: '';
    z-index: -1;
    position: absolute;
    left: 10px;
    bottom: 10px;
    width: 70%;
    max-width: 300px; /* avoid rotation causing ugly appearance at large container widths */
    max-height: 100px;
    height: 55%;
    -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    -webkit-transform: skew(-15deg) rotate(-6deg);
    -moz-transform: skew(-15deg) rotate(-6deg);
    -ms-transform: skew(-15deg) rotate(-6deg);
    -o-transform: skew(-15deg) rotate(-6deg);
    transform: skew(-15deg) rotate(-6deg); 
}
ul.box li:after {
    left: auto;
    right: 10px;
    -webkit-transform: skew(15deg) rotate(6deg);
    -moz-transform: skew(15deg) rotate(6deg);
    -ms-transform: skew(15deg) rotate(6deg);
    -o-transform: skew(15deg) rotate(6deg);
    transform: skew(15deg) rotate(6deg); 
}
复制代码

47、鲜艳的锚链接

a {
    color: #00e;
}
a:visited {
    color: #551a8b;
}
a:hover {
    color: #06e;
}
a:focus {
    outline: thin dotted;
}
a:hover, a:active {
    outline: 0;
}
a, a:visited, a:active {
    text-decoration: none;
    color: #fff;
    transition: all .3s ease-in-out;
}
a:hover, .glow {
    color: #ff0;
    text-shadow: 0 0 10px #ff0;
}
复制代码

48、带CSS3特色的横幅显示

.featureBanner {
    position: relative;
    margin: 20px
}
.featureBanner:before {
    content: "Featured";
    position: absolute;
    top: 5px;
    left: -8px;
    padding-right: 10px;
    color: #232323;
    font-weight: bold;
    height: 0px;
    border: 15px solid #ffa200;
    border-right-color: transparent;
    line-height: 0px;
    box-shadow: -0px 5px 5px -5px #000;
    z-index: 1;
}
.featureBanner:after {
    content: "";
    position: absolute;
    top: 35px;
    left: -8px;
    border: 4px solid #89540c;
    border-left-color: transparent;
    border-bottom-color: transparent;
}
复制代码

49、限制单行文本超出显示省略号

div{
    width: 65px;
    height: 30px;
    line-height: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
}

复制代码

50、限制多行文本超出省略号

div{
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
复制代码

51、css三角形绘制

.sj {
    width: 0; 
    height: 0;
    border-width: 100px;
    border-style: solid;
}

.sj-left {
    border-color: transparent pink transparent transparent;
}

.sj-right {
    border-color: transparent transparent transparent pink;
}

.sj-top {
    border-color: transparent transparent pink transparent;
}

.sj-bottom {
    border-color: pink transparent transparent transparent;
}
复制代码

52、自适应文本框自动换行，限宽不限高

div{
    display: inline-block;
    min-height: 15px;
    max-width: 78%;
    padding: 12px 10px;
    text-align: left;
    font-family: Microsoft YaHei;
    word-wrap: break-word;
}
复制代码

53、 ~选择器：查找某一个元素后面的所有兄弟元素

例如     .test~.name{background:red}
复制代码

54、 +选择器：查找某一个元素后面紧邻的兄弟元素

例如     .test+.name{background:red}
复制代码

55、 用 font-size ：0 来清除边距

56、 利用padding实现等比例缩放的盒子

最外层容器{
    display:flex;
    display:flex-box;
    flex-wrap:warp;
}
最外层容器 > 子元素{
    flex-basis:25%;
}
最外层容器 > 子元素 > 父元素{
    width:100%;
    padding-top:75%;
    position:relative;
}
最外层容器 > 子元素 > 父元素 > 子元素{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
}
复制代码

57、利用pointer-events禁用事件光标变成default阻止hover和hover以及JavaScript 点击事件的触发

pointer-events:none;
复制代码

58、利用 max-width 防止图片撑破容器

img{
    max-width：100%；
    display：inline-block;
}
复制代码

59、伪类和伪元素的用法

// 伪类是用 : 来表示，伪元素是用 :: 来表示

    常见的伪类有：
    :hover
    :active
    :focus
    :visited
    :link
    :lang
    :first-child
    :last-child
    :not
    :nth-child
           
// 伪元素就是不存在DOM文档树中的虚拟元素，它们和HTML元素一样，但是你又无法使用javascript去获取

常见伪元素
    ::before
    ::after
    ::first-letter
    ::first-line 
           
           
用 :valid  和 :invalid 来做表单验证

    html5 提供了类似required Email tel 等表单属性
    :required // 指定具有required属性的表单元素
    :valid // 指定一个通过匹配正确的所要求的表单元素
    :invalid // 指定一个不匹配指定要求的表单元素

<input type="text" required />   
    input:vaild{    如果输入文字则变成绿色
        border:1px solid green;
        box-shadow:inset 10px 0 0 green;
    }
    input:invaild{   如果没有输入则是红色
        border:1px solid red;
        box-shadow:inset 10px 0 0 red;
    }
            
            
用:target来实现折叠面板


用:not来排除其他选择器
  :not([readonly]):not([.disabled]):not([text])  等
  
用:nth-child 来实现各行变色
  :nth-child(2n+1){background:red;}
  :nth-child(2n){backgorund:blue;}
  

用::selection 来美化选中文本
    p::selection{
        background:red;
        color:green;
    }

用::placeholder 美化输入框占位符样式
    ::placeholder{
        color:Red;
    }
   
用::first-letter 来实现段落首字下沉
    p::first-letter{
        font-size:30px;
        color:Red;
        padding:20px;
    }

用::first-line 来标记段落的第一行
    p::first-line{
        color:red;
    }
复制代码

60、footer永远在页面底部

<style>
body {
  position:absolute;
  width:100%;
  min-height:100%; 
}
#app {
  padding-bottom: 200px;
  height: 100%; 
  font-family: "Microsoft Yahei", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #333;
  min-width: 1190px;
}
</style>
footer {
  clear: both;
  position: absolute;
  bottom: 0px;
  width: 100%;
  background: #000;
  color: #fff;
  min-width: 1200px;
  height: 200px;
}
复制代码

61、两个子元素 一个有内容自动撑开，另一个为空如何跟随高度。

.f{
    display: flex;
    align-items: stretch;
}
复制代码

62、消除transition闪屏

.css {
    transform: translate3d(0,0,0);
}
复制代码