3段h1标题CSS美化代码

一段简单的CSS美化h1,h2,h3,h4,h5,h6代码，很简单css美化功能。

使用的是比较简单的CSS样式美化的

h1{padding: 0px 20px;border-left: 10px solid #ed515191;background-color: rgba(208, 208, 208, 0);font-size: 19px;line-height: 30px;color: cornflowerblue;font-weight: bold;margin: 5px 0;}
h2{padding:0px 20px;border-left: 10px solid #BF51ED91;background-color: rgba(208, 208, 208, 0);font-size:18px;line-height: 30px;color:cornflowerblue;font-weight:bold;margin: 5px 0;}
h3{padding:0px 20px;border-left: 10px solid #6495ed91;background-color: rgba(208, 208, 208, 0);font-size:17px;line-height: 27px;color:cornflowerblue;font-weight:bold;margin: 5px 0;}
h4{padding:0px 20px;border-left: 10px solid #e2aa2b91;background-color: rgba(208, 208, 208, 0);font-size:16px;line-height: 24px;color:cornflowerblue;font-weight:bold;margin: 5px 0;}
h5{padding:0 20px;border-left: 10px solid #64c1c191;background-color: rgba(208, 208, 208, 0);font-size:15px;line-height: 21px;color:cornflowerblue;font-weight:bold;margin: 5px 0;}

使用的是before这种伪元素进行美化的，由于该样式富含机械性，下面只举例一个，孟坤博客效果

h3:before{
font-weight: 600;
position: absolute;
top: 0;
left: -15px;
content: '#';
color: #eb5055;
}
h3{position: relative;}

大前端模版香效果

这个样式对块化的界面显示会好看很多

h3{
margin: 15px 0 15px -20px;
padding: 0 25px;
border-left: 5px solid #51aded;
background-color: #f7f7f7;
font-size: 18px;
line-height: 40px;
}

相关专题

css

2021-09-24 79

css是前端开发中的样式语言,学好CSS可以帮助开发出漂亮的模板,css专题为您整理本站所有css相关信息,包含css模板下载,css使用教程分享和css示例代码....

• css3海浪波浪动态效果代码 [2021-10-25]
• css样式内加载其他CSS文件方法 [2021-09-27]
• HTML5+CSS3前端开发基础入门视频教程 [2021-09-16]
• HTML+CSS物业后台管理系统模板 [2021-08-15]
• HTML5/CSS3响应式Synthetica团队介绍模板 [2021-04-06]