实用的CSS片段（转）

最新推荐文章于 2024-11-16 13:45:27 发布

JesusAllen30

最新推荐文章于 2024-11-16 13:45:27 发布

阅读量562

点赞数

分类专栏： CSS 文章标签： css

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1、垂直对齐

如果你用 CSS，则你会有困惑：我该怎么垂直对齐容器中的元素？现在，利用 CSS3 的 Transform，可以很优雅的解决这个困惑：

.verticalcenter{
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

使用这个技巧，从单行文本、段落到box，都会垂直对齐。目前浏览器对 Transform 的支持是需要关注的，
Chrome 4 , Opera 10 , Safari 3 , Firefox 3 , and Internet Explorer 9均支持该属性

2、背景渐变动画

button{
        padding: 10px 20px;
        top: 50px;
        left: 50px;
        border: none;
        border-radius: 4px;
        color: #fff;
        font: 16px sans-serif;

        background-image: linear-gradient(#36d279, #1d854a);
        background-size: auto 200%;
        background-position: 0 100%;
        transition: background-position .5s;
        cursor: pointer;
    }
button:hover{
        /*改变渐变色显示位置*/
        background-position: 0 0;
    }

3、CSS：表格列宽自适用

对于表格，当谈到调整列宽时，是比较痛苦的。然后，这里有一个可以使用的技巧：给 td 元素添加 white-space: nowrap; 能让文本正确的换行

td {
    white-space: nowrap;
}

4、制造模糊文本

想要让文本模糊？可以使用color透明和text-shadow实现

.blurry-text {
   font-size: 28px;
   font-family: arial;
   font-weight:bold;
   color: transparent;
   text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

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

这个片段将帮助你制造一个 ellipsis 的动画，对于简单的加载状态是很有用的，而不用去使用 gif .

<div class="loading">Loading</div>

.loading:after {
    overflow: hidden;
    display: inline-block;
    vertical-align: bottom;
    -webkit-animation: ellipsis 2s infinite;
    -moz-animation: ellipsis 2s infinite;
    animation: ellipsis 2s infinite;
    content: "\2026"; 
}
@-moz-keyframes ellipsis {
    from {
        width: 2px;
    }
    to {
        width: 15px;
    }
}
@-moz-keyframes ellipsis {
  from {
    width: 2px;
  }
  to {
    width: 15px;
  }
}

@-webkit-keyframes ellipsis {
  from {
    width: 2px;
  }
  to {
    width: 15px;
  }
}

6、样式重置

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; }

7、CSS清除浮动

.clearfix:before, .container:after { content: ""; display: table; }
.clearfix:after { clear: both; }
/* IE 6/7 */
.clearfix { zoom: 1; }

8、通用媒体查询

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) and (max-device-width : 480px) {
  /* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
  /* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
  /* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
  /* Styles */
}
/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
  /* Styles */
}
/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
  /* Styles */
}
/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
  /* Styles */
}
/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
  /* Styles */
}
/* iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {
  /* Styles */
}

9、CSS3 盒阴影

-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.52);
        -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.52);
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.52);

10、CSS3 鲜艳的输入

input[type=text], textarea {
    -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    -o-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, textarea: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);
}

11、css3制作箭头

<span class="cool"></span>

.cool{
  padding-right: 13px;
  position: relative;
}
.cool:after{
  content:" ";
  display:inline-block;
  height:6px;
  width:6px;
  border-width: 2px 0 0 2px;//左箭头
  //border-width:2px 2px 0 0;//右箭头
  //border-width:0 2px 2px 0;//下箭头
  //border-width: 0 0 2px 2px;//左箭头
  border-color:#C8C8CD;
  border-style:solid;
  -webkit-transform:matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
          transform:matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  position:relative;
  top:-2px;
  position:absolute;
  top:50%;
  margin-top:-4px;
  right:2px;
}

12、文字两端对齐，after 伪装多行，利用 text-align:justify

<!doctype html> 
    <html lang="en"> 
        <head>
            <meta charset="UTF-8">
            <meta name="Keywords" content="关键词">  
            <meta name="Description" content="描述">  
            <title>两端对齐</title>  
            <style>
            *{margin:0px;padding:0px;}/*去除默认外边距、内边距*/ 

            div{width:800px;height:100px;border:2px solid red;margin:auto;}  

            span{text-align:justify;width:100%;}  

            span:after{  
                content:"";  
                display:inline-block;  
                width:100%;  
                /*原理：after伪类是在被选元素的内容后面插入内容，此处当给p标签一个after给p标签添加一个宽度为p标签的宽度的100%后就自动压缩到下一行显示，前面的内容就自动两端拉伸，自动对齐，如果要看清after伪类后的显示情况就设定一个高度，否则高度不设定自动为零*/  

                /*height:20px;       
                background:red;*/  
            }  
            span{/*list-style:none;*/display:inline-block;}  
            </style>  
        </head>  
        <body>
            <div>  
                <p>  
                    <!-- <span>首页</span>  
                    <span>一号店</span>  
                    <span>手机</span>  -->
                    <span>这样就能两端对齐！</span>
                </p>  
            </div>  
        </body>  
    </html>

13、双飞燕布局

<template>
<header>header</header>
<section class="wrapper">
    <section class="col main">
        <section class="main-wrap">main</section>
    </section>
    <aside class="col left">left</aside>
    <aside class="col right">right</aside>
</section>
<footer>footer</footer>
</template>

<style>
/* 以下为简码，仅保留关键部分 */
header,footer {height: 50px;}
.wrapper {padding: 0; overflow:hidden;}
.col {float: left;}
.main {width: 100%;}
.main-wrap {margin: 0 100px 0 100px;height: 200px;}
.left {width: 100px; height: 200px; margin-left: -100%;}
.right {width: 100px; height: 200px; margin-left: -100px;}
</style>