CSS

語言：

CSSSCSS

確定

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap');

:root {

--color-bg: #FEFDFB;

--color-title: #0E1C4E;

--color-summary-1: #FFF6EE;

--color-summary-1-highlight: #FFC48B;

--color-summary-2: #FAFAFF;

--color-summary-2-highlight: #B4B3FF;

--color-summary-3: #FFF0F3;

--color-summary-3-highlight: #FFB3C0;

--font-ibm-plex-sans: 'IBM Plex Sans', sans-serif;

}

html,

body {

overflow: auto;

height: 100vh;

width: 100%;

background: var(--color-bg);

display: flex;

align-items: center;

justify-content: center;

}

.card {

background: white;

padding: 38px 36px;

margin-top: 40px;

margin-bottom: 40px;

border-radius: 4px;

box-shadow: 0 8px 10px rgba(0, 0, 0, .1);

max-width: 400px;

width: 100%;

h1 {

font-family: var(--font-ibm-plex-sans);

font-style: normal;

font-weight: bold;

font-size: 18px;

line-height: 1.2;

color: var(--color-title);

margin-bottom: 20px;

}

details {

border-radius: 4px;

overflow: hidden;

padding: 20px;

background: rgba(0, 0, 0, .05);

border-left: 5px solid gray;

&:not(:last-of-type) {

margin-bottom: 15px;

}

&.warning {

background: var(--color-summary-1);

border-left: 5px solid var(--color-summary-1-highlight);

}

&.info {

background: var(--color-summary-2);

border-left: 5px solid var(--color-summary-2-highlight);

}

&.alert {

background: var(--color-summary-3);

border-left: 5px solid var(--color-summary-3-highlight);

}

summary,

p {

font-family: var(--font-ibm-plex-sans);

font-style: normal;

font-weight: normal;

font-size: 14px;

line-height: 1.4;

color: var(--color-title);

&:not(:last-of-type) {

margin-bottom: 10px;

}

}

p {

padding-left: 30px;

}

summary {

cursor: pointer;

margin-bottom: 0;

list-style-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.6066 12H1.3934' stroke='%23202842' stroke-width='1.875' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 1.39343V22.6066' stroke='%23202842' stroke-width='1.875' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");

&::-webkit-details-marker {

background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.6066 12H1.3934' stroke='%23202842' stroke-width='1.875' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 1.39343V22.6066' stroke='%23202842' stroke-width='1.875' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");

color: transparent;

background-size: 100% 100%;

margin-right: 18px;

width: 16px;

height: 16px;

transform: translateY(2px);

}

}

&[open] {

summary {

margin-bottom: 10px;

list-style-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.5 16.5L1.5 1.5' stroke='%23202842' stroke-width='1.875' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16.5 1.5L1.5 16.5' stroke='%23202842' stroke-width='1.875' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");

font-weight: 700;

&::-webkit-details-marker {

background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.5 16.5L1.5 1.5' stroke='%23202842' stroke-width='1.875' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16.5 1.5L1.5 16.5' stroke='%23202842' stroke-width='1.875' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");

color: transparent;

background-size: 100% 100%;

margin-right: 20px;

width: 12px;

height: 12px;

transform: translateY(1px);

}

}

p {

padding-left: 32px;

}

}

}

}

總結

以上是生活随笔為你收集整理的html原生标签,原生html详情标签（details）用法示例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。