Эта статья была впервые опубликована в публичном аккаунте:контекст выполнения, синхронно обновить личный блог:сюжетный фильм, пожалуйста, подпишите при перепечатке. Код постоянно обновляется! !
Демо-превью здесь! ! ! !
Демонстрация предварительного просмотра кода
Пополнить
Если у вас есть какие-либо часто используемые, вы также можете поделиться ими! ! !
помещение
Я поделюсь с вами кодами 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. Разные ссылки с тегами используют разные стили
// 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. Отображение URL-адресов ссылки
@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
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. Используйте события-указатели, чтобы отключить курсор событий по умолчанию, чтобы предотвратить наведение и наведение, а также запуск событий кликов 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. Нижний колонтитул всегда внизу страницы
<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. Удалите заставку перехода
.css {
transform: translate3d(0,0,0);
}