Better looking CSS custom styles (title h1 h2 h3)

Better looking CSS custom styles (title h1 h2 h3)

Rendering

Commonly used styles in Blog Garden

/*Title h1 h2 h3 style*/
#content {
    color: black;
    font: 0.875em/1.5em"Microsoft YaHei", "PTSans", "Arial", sans-serif;
    font-size: 16px;
}
#content h1 {
    background: #2B6695;
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
    color: #FFFFFF;
    font-family:"Microsoft YaHei", "Songti", "HeiTi", Arial;
    font-size: 18px;
    font-weight: bold;
    height: 25px;
    line-height: 25px;
    margin: 18px 0 !important;
    padding: 8px 0 5px 5px;
    text-shadow: 2px 2px 3px #222222;
}
#content h2 {
    background: #2B6600;
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
    color: #FFFFFF;
    font-family:"Microsoft YaHei", "Songti", "HeiTi", Arial;
    font-size: 15px;
    font-weight: bold;
    height: 24px;
    line-height: 23px;
    margin: 12px 0 !important;
    padding: 5px 0 5px 10px;
    text-shadow: 2px 2px 3px #222222;
}
#content h3 {
    background: #5B9600;
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
    color: #FFFFFF;
    font-family:"Microsoft YaHei", "Songti", "HeiTi", Arial;
    font-size: 13px;
    font-weight: bold;
    height: 24px;
    line-height: 20px;
    margin: 12px 0 !important;
    padding: 5px 0 5px 10px;
    text-shadow: 2px 2px 3px #222222;
}

Button Style

CSS

/*Recommend/Dislike button*/
#div_digg {
    position:fixed;
    bottom:10px;
    width:140px;
    right:390px;
    border:2px solid #6FA833;
    padding:10px;
    background-color:#fff;
    border-radius:5px 5px 5px 5px !important;
    box-shadow:0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
}

The above is the details of the more beautiful CSS custom styles (title h1 h2 h3). For more information about CSS custom h2 h3 styles, please pay attention to other related articles on 123WORDPRESS.COM!

<<:  A brief discussion on several situations where adding indexes to MySQL does not take effect

>>:  html a link tag title attribute line break mouse hover prompt content line break effect

Recommend

Vue large screen data display example

In order to efficiently meet requirements and avo...

MySQL Series 8 MySQL Server Variables

Tutorial Series MySQL series: Basic concepts of M...

Modification of time zone problem of MySQL container in Docker

Preface When Ahhang was developing the Springboot...

Solution to Nginx SSL certificate configuration error

1. Introduction When a web project is published o...

A detailed analysis of the murder caused by a misplaced double quote in MySQL

1. Introduction Recently, I often encounter devel...

Solution to nginx hiding version number and WEB server information

Nginx can not only hide version information, but ...

What are the new CSS :where and :is pseudo-class functions?

What are :is and :where? :is() and :where() are p...

Design of image preview in content webpage

<br />I have written two articles before, &q...

Pull-down refresh and pull-up loading components based on Vue encapsulation

Based on Vue and native javascript encapsulation,...

How to recover accidentally deleted messages files in Linux

If there are files that are being used by a proce...

MySQL stored procedure method example of returning multiple values

This article uses an example to describe how to r...