---
url: /host/theme/6gd1ec16/index.md
description: Handsome 博客主题自定义 CSS 样式，使用新拟物设计风格改造博客外观。
---
用于记录使用 [handsome博客](https://www.ihewro.com) 博客的 CSS 样式改造

## handsome博客自定义css

使用新拟物设计风格（ps：假装），效果图：

![handsome-css.png](./handsome-css.webp)

```css :collapsed-lines
/*background-color: #FF683C;*/
/*======*/


:not(.theme-dark) #aside {
    background: #E0E0E0;
    color: #000000;
    font-weight: bold;
}

:not(.theme-dark) #rightAside {
    background: #E0E0E0;
}

:not(.theme-dark)#header {
    box-shadow: 2px 2px 30px #afafaf, -10px -10px 38px #fff
}

:not(.theme-dark)#header_left {
    background: #E0E0E0;
}

:not(.theme-dark)#header_right {
    color: #000000;
    background: #E0E0E0;
}

:not(.theme-dark)#alllayout {
    color: #000000;
    background: #E0E0E0;
    box-shadow: 19px 19px 38px #afafaf, -10px -10px 38px #fff;
}

.bg-light .lter, .bg-light.lter {
    border-radius: 12px 12px 12px 12px;
    background: #E0E0E0;
    box-shadow: inset 5px 5px 10px #a8a8a8,
    inset -5px -5px 10px #ffffff;
}

:not(.theme-dark)#post-panel {
    border-radius: 12px 12px 12px 12px;
    background: #E0E0E0;
    box-shadow: inset 5px 5px 10px #a8a8a8,
    inset -5px -5px 10px #ffffff;
}

/*:not(.theme-dark).skt-loading{*/
/*    border-radius: 12px 12px 12px 12px;*/
/*    background: #E0E0E0;*/
/*    box-shadow: inset 5px 5px 10px #a8a8a8,*/
/*    inset -5px -5px 10px #ffffff;*/
/*}*/


:not(.theme-dark).list-group-item {
    background: #E0E0E0;
}

:not(.theme-dark) li.box-shadow-wrap-normal {
    border-radius: 10px;
    background: #E0E0E0;
    box-shadow: inset 5px 5px 10px #d0d0d0,
    inset -5px -5px 10px #f0f0f0;
}

.badge {
    background-color: #254e77;
    color: #fff;
    font-weight: bold;
}


#tag_cloud-2 > div > a {
    background-color: #254e77;
    color: #fff;
    font-weight: bold;
}

:not(.theme-dark).input-group {
    border-radius: 16px;
    background: #E0E0E0;
    box-shadow: inset 11px 11px 24px #d5d5d5,
    inset -11px -11px 24px #ebebeb;
}


:not(.theme-dark).single-post {
    color: #4c4948;
    background: #f2f2f2;
    font-weight: bold;
    box-shadow: 19px 19px 38px #afafaf, -10px -10px 38px #fff;

}

:not(.theme-dark).single-post:hover {
    box-shadow: 0 3px 8px 6px rgba(7, 17, 27, .15)
}


:not(.theme-dark).index-post-title {
    margin-bottom: 0.3rem;
    color: #1f2d3d;
    font-size: 1.72em;
    font-weight: bolder;
    line-height: 1.4;
}

:not(.theme-dark).summary {
    color: #4c4948;
}

:not(.theme-dark).meta-value {
    color: #858585;
    font-weight: bolder;
}

:not(.theme-dark).text {
    color: #858585;
}

:not(.theme-dark).text-muted {
    color: #858585;
    font-weight: bolder;
}

:not(.theme-dark).indexWords {
    color: #858585;
}

:not(.theme-dark)#comment {
    border-radius: 12px 12px 12px 12px;
    background: #E0E0E0;
    color: #000 !important;
    font-weight: bolder !important;
    box-shadow: inset 5px 5px 10px #a8a8a8,
    inset -5px -5px 10px #ffffff;
}

.secret_comment_textarea {
    border-color: #999 !important;
    color: #000 !important;
    font-weight: bolder !important;
    background: #E0E0E0 !important;
}

:not(.theme-dark).OwO-logo {
    color: #2e2e2e;
    font-weight: bolder;
    background: #E0E0E0;
}

:not(.theme-dark).breadcrumb {
    box-shadow: 19px 19px 38px #afafaf;
    background: linear-gradient(145deg, #cacaca, #fff);
}

.breadcrumb > li + li:before {
    padding: 0 5px;
    color: #232222;
    content: "/\00a0";
}

p {
    color: #4c4948;
    font-weight: bold;
}

#text::marker {
    color: #4c4948;
    font-weight: bold;
}


:not(.theme-dark).entry-title {
    font-weight: bolder;
}


.vditor-copy svg {
    color: #fff;
    width: 20px !important;
    height: 20px !important;
}

/*.small-scroll-bar::-webkit-scrollbar {*/
/*}*/

.small-scroll-bar::-webkit-scrollbar-thumb {
    background-color: #254e77;
}

.small-scroll-bar::-webkit-scrollbar-track-piece {
    background: #e2e2e2;
}

#post-content blockquote {
    background: rgba(73, 177, 245, 0.1);
    border-left: 3px solid #254e77 !important;
}

#support_author {
    background: #f47466;
    color: white;
    font-weight: bold;
}

:not(.theme-dark)#author {
    border-radius: 12px 12px 12px 12px;
    background: #E0E0E0;
    color: #000 !important;
    font-weight: bolder !important;
    box-shadow: inset 5px 5px 10px #a8a8a8,
    inset -5px -5px 10px #ffffff;
}

:not(.theme-dark)#mail {
    border-radius: 12px 12px 12px 12px;
    background: #E0E0E0;
    color: #000 !important;
    font-weight: bolder !important;
    box-shadow: inset 5px 5px 10px #a8a8a8,
    inset -5px -5px 10px #ffffff;
}

:not(.theme-dark)#url {
    border-radius: 12px 12px 12px 12px;
    background: #E0E0E0;
    color: #000 !important;
    font-weight: bolder !important;
    box-shadow: inset 5px 5px 10px #a8a8a8,
    inset -5px -5px 10px #ffffff;
}

#post-content h1, #post-content h2 {
    background: linear-gradient(to bottom, transparent 60%, rgba(37, 78, 119, 0.27) 35%) no-repeat;
    width: auto;
    display: inline;
}

/*#post-content pre code {*/
/*    display: block;*/
/*    overflow-x: auto;*/
/*    position: relative;*/
/*    margin: 0;*/
/*    padding-left: 50px;*/
/*}*/

/*pre code {*/
/*    position: relative;*/
/*    display: block;*/
/*    overflow-x: auto;*/
/*    margin: 4.4px 0 4px 1px;*/
/*    padding: 0;*/
/*    max-height: 500px;*/
/*    padding-left: 3.5em*/
/*}*/


p code {
    color: #f47466 !important;
    background: rgba(27, 31, 35, 0.05) !important;
    font-weight: bolder !important;
}

.mac_dark code {
    background: #212121 !important;
    color: #eeeeee;
    font-weight: bolder;
}

.tip.share {
    border-left-color: #f66;
    background: #ffe6e6;
    color: #f66;
}

.tip.share:before {
    background: #f66;
    content: "\0040";
}
```