php css下划线,如何自定义下划线的样式
下划线可以通过设置border-bottom以及background-image的值来自定义下划线的样式
下划线一般在文本中是一条黑色的直线,那么如何改变下划线的样式呢?接下来在文章中将为大家详细介绍如何自定义下划线的样式,具有一定的参考的价值,希望对大家有所帮助。
【推荐课程:CSS教程】
text-decoration 属性
规定添加到文本的修饰。
none :表示标准的文本,什么样式都没有
underline:表示文本的下划线
overline:表示文本上的一条线。
line-through:表示穿过文本上的一条线,一般表示删除线
blink:表示闪烁的文本。
例:
效果图:
text-decoration定义的下划线不能改变颜色,也不能设置它的粗细。因此我们可以通过别的方法来实现下划线的自定义
下划线的自定义:
(1)border-bottom方法
使用border-bottom来实现文本下划线时,可以改变下划线的颜色,粗细以及样式
但需要注意当元素为块级元素时,下划线不仅仅是文本内容的长度,它会占满一行,这时就需要通过display:inline将块级元素转化为行级元素。这样的话文本的长度就和下划线的长度一样了
例:让下划线变成粉色2px粗
PHP中文网
效果图:
(2)background-image方法
在 background-image方法中通过使用线性渐变的方法来设置下划线,在这里仍然要记住当元素为块级元素时注意将其改变为行级元素
例:h1{
display: inline;
background-image:linear-gradient(to right,pink 60%,transparent 10%);
background-position: 0 100%;
background-repeat: repeat-x;
background-size: 8px 3px;
padding-bottom: 10px;
}
效果图:
background-image方法还可以用图片代替下划线h1{
display: inline;
background-image:url("images/xing.jpg");
background-position: 0 100%;
background-repeat: repeat-x;
background-size:13px;
padding-bottom: 10px;
}
效果图:
总结:以上就是本篇文章的全部内容了,希望对大家有所帮助。
php css下划线,如何自定义下划线的样式相关推荐
- android自定义三级下拉,Android自定义下拉框的简单实现
安卓自带的Spinner不会用啊,换个图片都好麻烦,更别提做各种自定义的效果了 自己尝试着写了个能用的 实现思路: 给予一个控件点击事件,弹出PopupWindow,通过对PopupWindow内的控 ...
- CSS(列表+表格+链接+自定义鼠标光标)样式
1.CSS列表样式 1.1 list-style-type属性 (值可取none.circle.square.decimal.disc.lower-alpha) 有序列表:列表项目用数字或者字母来表示 ...
- 使用MJRefresh自定义下拉刷新,上拉加载动画
有时候我们需要自己设置下拉刷新,上拉加载动画的实现,这里主要是记录下使用MJRefresh自定义下拉刷新,上拉加载动画..... 下拉刷新我们只需要继承MJRefreshGifHeader即可: 实现 ...
- css中字体下划线样式,css下划线 浅谈css自定义下划线
使用css样式对一段文字或一段文字中其中几个文字设置虚线效果的下划线如何实现?我们知道css字体下划线使用text-decoration样式实现,而虚线下划线则不能使用此css样式属性.要实现通过下边 ...
- 浅谈CSS自定义下划线
问题描述: 使用:first-letter将首字母的font-size增大后,下划线text-underline也会变粗. eg: <!doctype html> <html> ...
- Amazing Css:自定义下划线样式的Input
Amazing Css:自定义下划线样式的Input 这篇文章将通过CSS的方式实现一个常见的Input样式,包括一些VUE的Tips 效果 相比于传统的方框Input同款样式,下划线的input输入 ...
- css3禅密花园叫什么名字_CSS秘密花园: 自定义下划线
<CSS Secrets>是@Lea Verou最新著作,这本书讲解了有关于CSS中一些小秘密.是一本CSSer值得一读的一本书,经过一段时间的阅读,我.@南北和@彦子一起将在W3cplu ...
- 【CSS】下划线与文字间距,下划线粗细以及下划线颜色的设置
最开始的时候了解下划线的属性是: text-decoration:underline; 但是,很遗憾的是,对于设计做的下划线用浏览器默认属性样式很难调整,使用这个属性并不能调整下划线与文字的间距,而且 ...
- CSS下划线与文字间距,下划线粗细以及下划线颜色的设置
最开始的时候了解下划线的属性是: text-decoration:underline; 1 但是,很遗憾的是,对于设计做的下划线用浏览器默认属性样式很难调整,使用这个属性并不能调整下划线与文字的间距, ...
最新文章
- PHP 打印调用堆栈信息
- CCNA学习笔记大全
- One question regarding your note Note 1731777 - Debugging background work items
- Oracle 修改数据库基本参数
- 微课|中学生可以这样学Python(1.3节):Python代码编写规范
- C# 获取动态类中所有的字段
- w ndows7如何清理垃圾,windows7系统下在关机时如何自动清理垃圾文件
- codeblocks解决网络方面错误undefined reference to `inet_ntoa@4'|
- 【PDF】PDF文件分页拆分(免费方法)
- 内部收益率计算公式用计算机,内部收益率的计算公式是什么
- 快手小程序预下单 tp6 demo
- ERROR: Cannot uninstall ‘PyYAML’. It is a distutils installed project and thus we cannot accurately
- 小程序发布线上接口请求失败,开发者工具请求正常,体验版和开发版要打开调试才可以正常请求解决办法
- php 生成迅雷地址,php实现把url转换迅雷thunder资源下载地址的方法,_PHP教程
- mac无法更新计算机的启动配置,MacOS 更新遇到的问题及重装系统
- T-Pot安装教程(保证能运行,附安装需要的所有东西清单)
- 线性规划单纯形法的matlab程序,线性规划单纯形法的MATLAB实现_数学专业.doc
- DVB-subtitle解析流程浅
- #打卡day1 ROS talker/listener
- 借助数商云房地产行业采购平台解决方案,实现简单、智能、合规的采购
热门文章
- python使用matplotlib可视化subplots绘制子图、自定义几行几列子图,如果M行N列,那么最终包含M*N个子图、在指定的子图中添加可视化结果
- R语言置换检验(permutation tests、响应变量是否独立于组、两个数值变量是独立的吗、两个分类变量是独立的吗)、置换检验的基本步骤、R语言自助法Bootstrapping计算置信区间
- pandas使用replace函数和正则表达式移除dataframe字符串数据列中尾部指定模式字符串(Removing trailing substring in dataframe)
- 如何获取数据库中标的所有字段和数据类型?
- R语言偏相关或者部分相关性系数计算实战:使用psych包计算(Partial Correlation)偏相关或者部分相关性系数并用建设检验检验相关性的显著性
- Python代码提取时间序列特征基于tsfeature
- java常用注解汇总_Spring常用注解汇总
- MMD_2a_FindSimilarSets
- Oracle表空间文件损坏后的排查及解决
- The power of single molecule real-time sequencing technology in the de novo assembly of a eukaryotic