实用的css代码

转载 2018年04月17日 16:55:09

1,基于文件格式使用不同的样式

a[href^="http://"]{
	padding-right: 20px;
	background: red;
}
a[href$=pdf]{
	padding-right: 20px;
	background: green;
}
<a href="http://www.baidu.com">这里是百度</a>
	<a href="sd.pdf">pdf文件</a>

2 , 背景渐变动画

button {
    background-image: linear-gradient(#5187c4, #1c2f45);
    background-size: auto 200%;
    background-position: 0 100%;
    transition: background-position 0.5s;
}    
button:hover {
    background-position: 0 0;
}

3 , CSS:表格列宽自适用

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

td {
    white-space: nowrap;
}

4 , 只在一边或两边显示盒子阴影

如果你要一个盒阴影,试试这个技巧,能为任一边添加阴影。为了实现这个,首先定义一个有具体宽高的盒子,然后正确定位:after伪类。实现底边阴影的代码如下

.box-shadow {
    background-color: #FF8020;
    width: 160px;
    height: 90px;
    margin-top: -45px;
    margin-left: -80px;
    position: absolute;
    top: 50%;
    left: 50%;
}
.box-shadow:after {
    content: "";
    width: 150px;
    height: 1px;
    margin-top: 88px;
    margin-left: -75px;
    display: block;
    position: absolute;
    left: 50%;
    z-index: -1;
    -webkit-box-shadow: 0px 0px 8px 2px #000000;
       -moz-box-shadow: 0px 0px 8px 2px #000000;
            box-shadow: 0px 0px 8px 2px #000000;
}

5、制造模糊文本

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

.blurry-text {
   color: transparent;
   text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

6、CSS3:全屏背景

html { 
    background: url('images/bg.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

7三角形列表项目符号

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

8CSS3 鲜艳的输入

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

9、网页顶部盒阴影

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

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

11、头像无限旋转

        /*头像旋转*/
        @keyframes spin {
          0% {
            transform: rotate(0deg);
          }
          100% {
            transform: rotate(359deg);
          }
        }
        .hdimg img:hover {
            animation: spin 2s infinite linear;
        }

总结:.这里的内容是有删减的,有些实测增加了效果图。

还是有很多有趣的地方,不一定全部用得上,看一下前辈的文章,打开了一种做项目时其他的思考思路吧

N个实用的css代码

60个有用的css代码[转]原文地址:http://meowv.com/712.htm1、垂直对齐如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?...
  • GoDevelop
  • GoDevelop
  • 2017-01-16 17:46:11
  • 453

超实用css代码段笔记

文本居中: text-align:center;模块居中: margin:0 auto;行高: line-height:20px;//配合文本居中使用文本缩进: text-indent:15p...
  • zengyonglan
  • zengyonglan
  • 2016-11-17 22:03:10
  • 739

Web开发者的福利:30段超实用CSS代码

Web开发者的福利:30段超实用CSS代码2015年5月26日- 星期二 随手笔记 0条 173 1.花式连字符(&) 这个类应该在span元素里使用,并且里面包括&字符。它使用经典的ser...
  • qq_30164225
  • qq_30164225
  • 2016-12-16 14:51:35
  • 156

2008cssplay实用css代码精选-实用二级导航条

  • 2008年11月14日 13:56
  • 145B
  • 下载

百度CSS代码百度CSS代码

  • 2010年01月16日 13:34
  • 23KB
  • 下载

HTML、CSS和JavaScript学习二(Css样式选择器及各选择器的优先级)

在HTML中使用CSS 地Css的选择器大概了解之后就可以使用CSS对页面进行全方位的控制了。下面介绍的是在HTML代码中怎么使用CSS样式。具体有行内式、内嵌式、链接式、导入式等。 1.行内式 行内...
  • rainmeterlinux
  • rainmeterlinux
  • 2012-12-13 21:12:34
  • 609

超实用CSS代码

1.花式连字符(&) 这个类应该在span元素里使用,并且里面包括&字符。它使用经典的serif字体和斜体来增强&符号。 ? 1 2 3 4 5 6 7 8 9 ...
  • u013214705
  • u013214705
  • 2014-03-01 14:07:55
  • 471

24款实用的翻页页码css代码.

  • 2009年06月23日 17:38
  • 8KB
  • 下载

超实用css代码集合

  • 2017年08月07日 12:06
  • 52.74MB
  • 下载

Web 网页翻页css代码

  • 2014年07月11日 11:46
  • 9KB
  • 下载
收藏助手
不良信息举报
您举报文章:实用的css代码
举报原因:
原因补充:

(最多只允许输入30个字)