.box300-250 { width: 25rem; height: 14rem; } .blog-title{ font-size: 30px; line-height: 1.5; font-weight: bold; text-align: left; padding-bottom: 9px; border-bottom-width: 4px; border-bottom-style: solid; border-bottom-color: rgba(255,82,82,1); display: block; width: 100%; position: relative; } .date { text-align: right; } .blog-info{ line-height: 1.8; color: #9d9d9d; font-size: 15px; } /*标签内部垂直居中*/ /*https://blog.csdn.net/DreamFJ/article/details/68921957*/ .blog-info .label, .blog-info img { } .blog-info .label{ opacity: 0.8; } .blog-content{ padding-top: 15px; font-size: 15px; line-height: 1.5; } .blog-content img{ margin: 15px auto; } .blog-content a{ padding: 0 2px; color: #42b983; font-weight: 500; text-decoration: none; word-wrap: break-word; } .blog-content p{ margin: 2px 2px 10px; font-size: 1.05rem; line-height: 1.85rem; } .blog-content img { height: auto!important; max-width: 100%!important; margin: 10px 0; } .blog-content .btn { padding: 0 2px; margin: 5px 3px; color: #ffffff; font-weight: 400; text-decoration: none; word-wrap: break-word; } .blog-content .btn-outline-info { color: #00bda8; border-color: #00bda8; } .blog-content figcaption{ display: flex; justify-content: center; align-items: center; } .rating { position: relative; width: 160px; background: transparent; display: flex; justify-content: left; align-items: center; gap: .3em; padding: 5px 0px; overflow: hidden; } .rating__result { position: absolute; top: 0; left: 0; transform: translateY(-10px) translateX(-5px); z-index: -9; font: 3em Arial, Helvetica, sans-serif; color: #ffb900; pointer-events: none; } .rating__star { font-size: 1.3em; cursor: pointer; color: #ffb900; transition: filter linear .3s; } .rating__star:hover { filter: drop-shadow(1px 1px 4px gold); } .clear-block{ display: inline !important; } .star{ display: flex; justify-content: left; align-items: center; } .rating__star { cursor: pointer; color: #ffb900; } .text-right { text-align: right!important; }