本文首發於個人博客：故事膠片，可在底部查看原文前往博客，轉載請署名。
Git地址：
https://github.com/jiaopianjun/JsCode 厚臉求 star
.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);
}