学习笔记 学习笔记
🐱 首页
    • 🚅 JAVA
    • 🚆 Python
    • 🧭 VUE
    • 🌐 JavaScript
    • 🗺 CSS
  • 🎃 MySQL
  • 🛶 Redis
  • 🛳 Nginx
  • ⚽ Dokcer
  • 🏓 Elasticsearch
  • 🏙 Windows
  • 🗽 Centos
  • ⚓ Gitlab
  • 🙈 分类
  • 🙉 标签
  • 🙊 归档
    • 👣 随笔
    • 🌹 关于
GitHub (opens new window)

爱做梦的奋斗青年

曾梦想仗剑走天涯,后来bug太多就没去
🐱 首页
    • 🚅 JAVA
    • 🚆 Python
    • 🧭 VUE
    • 🌐 JavaScript
    • 🗺 CSS
  • 🎃 MySQL
  • 🛶 Redis
  • 🛳 Nginx
  • ⚽ Dokcer
  • 🏓 Elasticsearch
  • 🏙 Windows
  • 🗽 Centos
  • ⚓ Gitlab
  • 🙈 分类
  • 🙉 标签
  • 🙊 归档
    • 👣 随笔
    • 🌹 关于
GitHub (opens new window)
  • 后端技术

  • web技术

    • JavaScript技术栈

    • CSS技术栈

      • CSS代码技巧
        • 浏览器的兼容性
        • 垂直对齐
        • 内容垂直居中
        • 背景渐变动画
        • 用CSS动画实现省略号动画
        • 跨浏览器的透明
        • 图片边框偏光
        • CSS3:全屏背景
        • 缝合CSS3元素
        • 大字段落
        • 内部CSS3 盒阴影
        • 三角形列表项目符号
        • CSS3 圆点图案/方格图案
        • 论文页面的卷曲效果
        • 带CSS3特色的横幅显示
        • 持久的列表排序
        • 深灰色的圆形按钮
        • CSS引用模板
        • 自定义文本选择
        • 锚链接伪类
        • CSS3 列文本
        • IE6的PNG透明修复40、跨浏览器设置最小高度41、CSS3 鲜艳的输入
        • 强制换行
        • 网页顶部盒阴影
        • CSS3对话气泡
        • 纯CSS背景噪音
        • CSS悬浮提示文本
        • 在可打印的网页中显示URLs
        • 禁用移动Webkit的选择高亮
        • CSS font属性缩写
        • 鲜艳的锚链接
      • 一行CSS分别实现10种现代布局?
      • 让人眼前一亮的hover效果
    • VUE技术栈

    • vuepress

  • 数据结构

  • 加密技术

  • 编程技术
  • web技术
  • CSS技术栈
爱做梦的奋斗青年
2020-08-20
目录

CSS代码技巧

# 浏览器的兼容性

  • 网络上已经有成熟的css代码库为我们解决浏览器不一致问题,例如normalize.css、minireset和ress,你可以在你的项目中引用它们。
  • 如果你不想使用第三方代码库,你可以使用下面的样式来进行一个非常基本的css reset:
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
1
2
3
4
5

上面的代码看起来有些霸道,将所有元素的内外边距都设置为0了,而正是没有了这些默认内外边距的影响,使得我们后面的css设置会更加的容易。 同时box-sizing: border-box也是一个很棒的设置,我们紧接着就会介绍它。

# 所有元素设置为Border-box

大多数初学者都不知道box-sizing这个属性,但实际上它非常重要。box-sizing属性有两个值:

  • content-box(默认) - 当我们设置一个元素的宽度或高度时,就是设置它的内容的大小。所有的padding和边框值都不包含。

例如,一个div的宽度设置为100,padding为10,于是这个元素将占用120像素(100+2*10)。

  • border-box - padding与边框包含在元素的宽度或高度中,一个设置为width: 100px和box-sizing:border-box的div元素,他的总宽度就是100px,无论它的内边距和边框有多少。

# 垂直对齐

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

<html>
<div class="div">
    <div>垂直居中</div>
</div>
</html>
<style>
.div{ width: 200px;height: 160px;border: 1px solid; }
.div>div{ width: 80px;height: 50px;border: 1px solid;}
/*垂直居中*/
.div>div{position: relative; top: 50%; -webkit-transform: translateY(-50%);-o-transform: translateY(-50%);transform: translateY(-50%);}
</style>
1
2
3
4
5
6
7
8
9
10
11

使用这个技巧,从单行文本、段落到box,都会垂直对齐。目前浏览器对Transform的支持是需要关注的.

Chrome 4, Opera 10, Safari 3, Firefox 3, and Internet Explorer 9均支持该属性。

# 内容垂直居中

<html>
<div class="container">内容垂直居中</div>
</html>
<style>
.container{width: 300px;height: 50px;border: 1px solid;}
.container {
    min-height: 6.5em;
    display: table-cell;
    vertical-align: middle;
}
</style>
1
2
3
4
5
6
7
8
9
10
11

# 背景渐变动画

CSS中最具诱惑的一个功能是能添加动画效果,除了渐变,你可以给背景色、透明度、元素大小添加动画。目前,你不能为渐变添加动画,但下面的代码可能有帮助。它通过改变背景位置,让它看起来有动画效果。

<html>
    <button class="button">背景渐变动画</button>
</html>
<style>
.button {cursor: pointer;}
.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;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 用CSS动画实现省略号动画

<html>
    <div class="loading">这个片段将帮助你制造一个ellipsis的动画,对于简单的加载状态是很有用的,而不用去使用gif图像</div>
</html>
<style>
.loading:after {
    overflow: hidden;
    display: inline-block;
    vertical-align: bottom;
    animation: ellipsis 2s infinite;
    content: "\2026"; /* ascii code for the ellipsis character */
}
@keyframes ellipsis {    
    from {
        width: 2px;
    }
    to {
        width: 15px;
    }
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 跨浏览器的透明

<html>
<div class="transparent">跨浏览器的透明</div>
</html>
<style>
.transparent{width: 300px;height: 50px;border: 1px solid}
.transparent {
    filter: alpha(opacity=50); /* internet explorer */
    -khtml-opacity: 0.5;      /* khtml, old safari */
    -moz-opacity: 0.5;       /* mozilla, netscape */
    opacity: 0.5;           /* fx, safari, opera */
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12

# 图片边框偏光

<html>
<img class="polaroid" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1597984936832&di=5f577cd7cf2f8d24630aec5d7bca7140&imgtype=0&src=http%3A%2F%2Ft8.baidu.com%2Fit%2Fu%3D1484500186%2C1503043093%26fm%3D79%26app%3D86%26f%3DJPEG%3Fw%3D1280%26h%3D853" alt="" width="100" height="100">
</html>
<style>
img.polaroid {
    background:#000; /*Change this to a background image or remove*/
    border:solid #fff;
    border-width:6px 6px 20px 6px;
    box-shadow:1px 1px 5px #333; /* Standard blur at 5px. Increase for more depth */
    -webkit-box-shadow:1px 1px 5px #333;
    -moz-box-shadow:1px 1px 5px #333;
    height:200px; /*Set to height of your image or desired div*/
    width:200px; /*Set to width of your image or desired div*/
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# CSS3:全屏背景

<html>
<div class="full_bg"><span>全屏背景</span></div>
</html>
<style>
div.full_bg {
    width: 300px;
    height: 300px;
}
div.full_bg {
    background: url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1597984936832&di=5f577cd7cf2f8d24630aec5d7bca7140&imgtype=0&src=http%3A%2F%2Ft8.baidu.com%2Fit%2Fu%3D1484500186%2C1503043093%26fm%3D79%26app%3D86%26f%3DJPEG%3Fw%3D1280%26h%3D853') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 缝合CSS3元素

<html>
<p class="fenghe"><a>缝合CSS3元素</a></p>
</html>
<style>
p.fenghe {
    position:relative;
    z-index:1;
    padding: 10px;
    margin: 10px;
    font-size: 21px;
    line-height: 1.3em;
    color: #fff;
    background: #ff0030;
    -webkit-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);
    -moz-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);
    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.fenghe:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 3px;
    bottom: 3px;
    left :3px;
    right: 3px;
    border: 2px dashed #fff;}
p.fenghe a {
    color: #fff;
    text-decoration:none;
}
p.fenghe a:hover, p a:focus, p a:active {
    text-decoration:underline;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

# 大字段落

<html>
<p class="big-p">大字段落</p>
</html>
<style>
p.big-p:first-letter{
    display: block;
    margin: 5px 0 0 5px;
    float: left;
    color: #ff3366;
    font-size: 5.4em;
    font-family: Georgia, Times New Roman, serif;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13

# 内部CSS3 盒阴影

<html>
<div class="mydiv"></div>
</html>
<style>
.mydiv {width: 50px;height: 50px;border: 1px solid}
.mydiv {
    -moz-box-shadow: inset 2px 0 4px #000;
    -webkit-box-shadow: inset 2px 0 4px #000;
    box-shadow: inset 2px 0 4px #000;
}
</style>
1
2
3
4
5
6
7
8
9
10
11

# 三角形列表项目符号

<html>
<ul class="triangle">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>
</html>
<style>
ul.triangle {
    margin: 0.75em 0;
    padding: 0 1em;
    list-style: none;
}
ul.triangle>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;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# CSS3 圆点图案/方格图案

<html>
<div class="pattern"></div>
</html>
<style>
div.pattern{width: 600px;height: 200px;border: 1px solid}
/*圆点图案*/
div.pattern {
    background: radial-gradient(circle, white 10%, transparent 10%),
    radial-gradient(circle, white 10%, black 10%) 50px 50px;
    background-size: 100px 100px;
}
/*方格图案
/*div.pattern {
    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;
}*/
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 论文页面的卷曲效果

<html>
<ul class="box">
  <li>论文页面的卷曲效果</li>
  <li>论文页面的卷曲效果</li>
</ul>
</html>
<style>
ul.box {
    position: relative;
    z-index: 1; /* prevent shadows falling behind containers with backgrounds */
    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);
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

# 带CSS3特色的横幅显示

<html>
<div class="featureBanner"></div>
</html>
<style>
.featureBanner {
    position: relative;
    margin: 20px;
    height: 20px;
}
.featureBanner:before {
    content: "带CSS3特色的横幅显示";
    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;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

# 持久的列表排序

<html>
<ol class="chapters">
<li>从12开始</li>
<li>依次累加</li>
</ol>
</html>
<style>
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.chapters {
    counter-reset: chapter;
}
ol.chapters {
    counter-reset: chapter 11;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

# 深灰色的圆形按钮

<html>
<button class="graybtn">深灰色的圆形按钮</button>
</html>
<style>
button.graybtn {
    -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
    -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
    box-shadow:inset 0px 1px 0px 0px #ffffff;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #d1d1d1) );
    background:-moz-linear-gradient( center top, #ffffff 5%, #d1d1d1 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#d1d1d1');
    background-color:#ffffff;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    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;
    cursor: pointer;
}
button.graybtn:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d1d1d1), color-stop(1, #ffffff) );
    background:-moz-linear-gradient( center top, #d1d1d1 5%, #ffffff 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d1d1d1', endColorstr='#ffffff');
    background-color:#d1d1d1;}
button.graybtn:active {
    position:relative;
    top:1px;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

# 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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 自定义文本选择

::selection { background: #e2eae2; }
::-moz-selection { background: #e2eae2; }
::-webkit-selection { background: #e2eae2; }
1
2
3

# 锚链接伪类

a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; }
a:active { color: yellow; }
1
2
3
4

# CSS3 列文本

#columns-3 {
    text-align: justify;
    -moz-column-count: 3;
    -moz-column-gap: 12px;
    -moz-column-rule: 1px solid #c4c8cc;
    -webkit-column-count: 3;
    -webkit-column-gap: 12px;
    -webkit-column-rule: 1px solid #c4c8cc;
}
1
2
3
4
5
6
7
8
9

# IE6的PNG透明修复40、跨浏览器设置最小高度41、CSS3 鲜艳的输入

.bg {
    width:200px;
    height:100px;
    background: url(/folder/yourimage.png) no-repeat;
    _background:none;
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/folder/yourimage.png',sizingMethod='crop');
}
/* 1px gif method */
img, .png {
    position: relative;
    behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
       this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
       this.src = "images/transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
       this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
       this.runtimeStyle.backgroundImage = "none")),this.pngSet=true));
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 强制换行

pre {
    white-space: pre-wrap;       /* css-3 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}
1
2
3
4
5
6
7

# 网页顶部盒阴影

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;
}
1
2
3
4
5
6
7
8
9
10
11
12

# CSS3对话气泡

.chat-bubble {
    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;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-box-shadow: 0 0 5px #888;
    -webkit-box-shadow: 0 0 5px #888;
    font-family: 'Bangers', arial, serif;
}
.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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

# 纯CSS背景噪音

body {
    background-image: url(data:image/png;base64,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);
    background-color: #0094d0;
}
1
2
3
4

# 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;}
/* Tooltip styling */
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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

# 在可打印的网页中显示URLs

@media print   {  
  a:after {  
    content: " [" attr(href) "] ";  
  }  
}
1
2
3
4
5

# 禁用移动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;
}
1
2
3
4
5
6
7
8
9

# CSS font属性缩写

p {
  font: italic small-caps bold 1.2em/1.0em Arial, Tahoma, Helvetica;
}
1
2
3

# 鲜艳的锚链接


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;
    -webkit-transition: all .3s ease-in-out;
}
a:hover, .glow {
    color: #ff0;
    text-shadow: 0 0 10px #ff0;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
编辑此页 (opens new window)
上次更新: 2021/01/31 08:17:00
表白
一行CSS分别实现10种现代布局?

← 表白 一行CSS分别实现10种现代布局?→

Theme by Vdoing
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式