html水平分隔线样式,CSS生成漂亮的水平分隔线(horizontal rule)设计效果
HTML代码中,我们常常使用
标签来生成水平分隔线,下面分享几款不同样式的水平分隔线
相关CSS代码
/* 渐变 color1 - color2 - color1 */
hr.style-one {
border: 0;
height: 1px;
background: #333;
background-image: linear-gradient(to right, #ccc, #333, #ccc);
}
/* 透明渐变 - color - transparent */
hr.style-two {
border: 0;
height: 1px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
/* 双线 */
hr.style-three {
border: 0;
border-bottom: 1px dashed #ccc;
background: #999;
}
/* 单线阴影 */
hr.style-four {
height: 12px;
border: 0;
box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5);
}
/* 云朵状 */
hr.style-five {
border: 0;
height: 0; /* Firefox... */
box-shadow: 0 0 10px 1px black;
}
hr.style-five:after { /* Not really supposed to work, but does */
content: "\00a0"; /* Prevent margin collapse */
}
/* 内嵌 */
hr.style-six {
border: 0;
height: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
/* 晕状 */
hr.style-seven {
height: 30px;
border-style: solid;
border-color: black;
border-width: 1px 0 0 0;
border-radius: 20px;
}
hr.style-seven:before {
display: block;
content: "";
height: 30px;
margin-top: -31px;
border-style: solid;
border-color: black;
border-width: 0 0 1px 0;
border-radius: 20px;
}
/* 文字插入式 */
hr.style-eight {
padding: 0;
border: none;
border-top: medium double #333;
color: #333;
text-align: center;
}
hr.style-eight:after {
content: "gb";
display: inline-block;
position: relative;
top: -0.7em;
font-size: 1.5em;
padding: 0 0.25em;
background: white;
}
/* 分隔线统一样式 */
hr{
margin: 40px 0;
}
在线演示和调试地址
html水平分隔线样式,CSS生成漂亮的水平分隔线(horizontal rule)设计效果相关推荐
- HTML如何实现多级水平导航栏,jQuery+css实现的蓝色水平二级导航菜单效果代码
本文实例讲述了jQuery+css实现的蓝色水平二级导航菜单效果.分享给大家供大家参考.具体如下: 这是一款蓝色经典的jQuery+CSS实现水平二级导航菜单,相信你会喜欢的,蓝色,超级经典的一种风格 ...
- CAD多线样式怎么设置?
CAD多线常用于绘制墙体.道路等图形,是由1至16条平行线组成的,绘制多线时,除了可以使用默认样式以外,也可以指定一个自己创建的样式.那么,CAD多线样式怎么设置呢?下面,小编就来给大家讲解一下浩辰C ...
- 制作导航栏并使用CSS美化,CSS3样式创建一个漂亮简洁的导航栏
本教程旨在教大家结合CSS3样式创建一个漂亮,简洁的导航栏.而在过去,我们只能借助图片,JavaScript和div层进行创作. 注意:下面所有的示例都是在Mozilla Firefox,Safari ...
- JAVA自动生成雪碧图sprites和样式CSS文件(包含原始图标CSS、雪碧图CSS)
在项目的开发过程中,如果一个页面有很多的小图标展现.浏览器展示页面时会向后台服务器发送很多的请求获取对应的图片,这样既浪费资源,也使得页面的加载变得很慢,影响客户的体验.此时我们可以采用将这些小图标放 ...
- html分割线颜色怎么在css中写,html水平分割线 html 分割线颜色怎么变浅
深入理解es6和es6标准入门哪本好 Dubbo的分布式系统架构实战需要哪些步骤完成 HTML如何添加水平分割线: HTML提供了修饰段落的水平分割线,在很多的网页布局中都可以轻松使用,而不需要另外作 ...
- java样式是什么_java css样式 css样式的种类 选择器 文本相关样式 背景相关样式 边框 盒子模式...
今日内容: ? CSS样式 ? CSS样式的种类 ? 选择器 ? 文本相关样式 ? 背景相关样式 ? 边框 ? 盒子模式 select标签 下拉列表标签,常用于单选和多选,是一个组合标签,需要和子标签 ...
- 打印样式CSS的技巧和要点
不经过任何处理而直接打印网站上的页面会得到一个不理想的效果.我们WEB开发人员可以简单的采用几个要点来使之达到较为合适的效果: 使用响应式布局设置打印的效果 打印背景图片和颜色,在合适的时候 添加显示 ...
- ExtentReport生成漂亮的测试报告
接口自动化测试,生成一份简洁漂亮的测试报告,不仅可以让阅读者心情大好,而且可以提高阅读效率. TestNG有自带的测试报告.网上也有使用ReportNG插件生成testng报告,但是效果差强人意,这里 ...
- html制作好看展开列表框,css实现漂亮的下拉菜单,简单方便实用
本文介绍用css实现的下拉菜单,简单.方便.实用. 为什么推荐用css实现的下拉菜单?因为html默认的 select 控件生成的下拉菜单样式不好控制,不够美观,还有一个致命的缺点,是在IE里 sel ...
最新文章
- 文件包含漏洞不能包含php,ThinkPHP5漏洞分析之文件包含
- 二叉树的基本特性和二叉树的几种基本操作的机制_深入理解二叉树01 二叉树基础
- mysql 终端模拟_mysql客户端模拟脏读、幻读和可重复读
- 移动设备测试 6 free mobile device emulators for testing your site
- 腾讯音乐娱乐集团Q3财报亮眼,营收与付费用户规模增速领跑全球
- 【Java】字符串substring方法在jkd6,7,8中的差异
- android 读取俄文csv乱码,android导出CSV,中文乱码问题
- OpenGL和D3D11中的深度模版测试
- winform上传文件解决方案
- fcntl函数的SET用法
- 网页简单轮播图的实现
- 蓄电池浮充电和均充电
- Java版本微信授权登录(升级版)
- java兔子字符画,兔子的字符画
- Android FFmpegMediaMetadataRetriever获取歌曲的作者
- Widget中的一些基本概念
- 从零开始搭建一个HTTPS网站
- java中一个系统如何注册账户名和密码
- IOS的Iphone短信导入安卓手机
- 百度地图计算两坐标点之间距离计算
热门文章
- lua 求table长度和判断空
- 解决github图片不显示问题【完美解决】
- Scala _09样例类(case classes)隐式转换
- leetcode 373. Find K Pairs with Smallest Sums | 373. 查找和最小的K对数字(小根堆)
- 数据结构与算法(二):堆,大根堆,小根堆,堆排序,比较器详解
- 如何在eclipse中查看源码
- 理解分布式一致性:拜占庭容错与PBFT
- CentOS 6 安装Hadoop 2.6 (一)准备工作
- cas 单点登录_47 使用cas完成单点登录-02 搭建cas client完成单点登录
- 局部钩子能防全局钩子吗_阿特的钩子成为队友的噩梦,毫无游戏体验感,小夏:当场哭了出来...