精华内容
下载资源
问答
  • 主要介绍了使用Vue实现textarea固定输入行数与添加下划线样式的思路详解,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 本文实例讲述了PHP实现驼峰样式字符串(首字母大写)转换成下划线样式字符串的方法。分享给大家供大家参考,具体如下: 1、如何在php中把驼峰样式的字符串转换成下划线样式的字符串。例:输入是FooBar的话,输出则是...
  • CSS定义下划线样式

    2013-04-28 13:31:25
    CSS定义下划线样式_莱茵河的小鱼_新浪博客.mht
  • Web上的下划线样式

    千次阅读 2020-06-27 00:04:51
    对链接下方的下划线进行样式设置可能是一项棘手的工作,而我经常会视情况而忘记最佳方法。 不过,值得庆幸的是, 约翰·詹姆森 ( John Jameson)使我们加快了这篇宾客帖子的速度。 有多种不同的样式可以用来标记...

    对链接下方的下划线进行样式设置可能是一项棘手的工作,而我经常会视情况而忘记最佳方法。 不过,值得庆幸的是, 约翰·詹姆森John Jameson)使我们加快了这篇宾客帖子的速度。

    有多种不同的样式可以用来标记下划线。 也许您还记得这篇文章Crafting链接在Medium上强调 。 中型并没有做任何疯狂的事情; 他们只是想在其文字下方创建一个看起来很普通的线条。

    黑色细底线,下边框周围有空格
    细的黑色下划线,下级周围有空白-通过Marcin Wichary, “中型”Craft.io路线下划线

    这是一个非常基本的下划线,但是它的大小合适,并且也跳过了下划线。 绝对好于大多数浏览器的默认设置。 好吧,事实证明,要在网络上获得该样式,Medium必须经历很多麻烦。 两年后,要绘制漂亮的底线仍然很困难。

    目标

    仅使用text-decoration: underline什么问题? 如果我们在谈论理想情况,则下划线应该能够执行以下操作:

    • 将自身置于基线以下
    • 跳过后代
    • 更改颜色,厚度和样式
    • 重复换行文字
    • 在任何背景下工作

    我认为这些都是非常合理的要求,但是据我所知,没有直观的方法可以在CSS中实现所有这些。

    方法

    那么,我们可以在网络上加下划线的所有不同方式有哪些?

    这是我能想到的:

    • text-decoration
    • border-bottom
    • box-shadow
    • background-image
    • SVG过滤器
    • Underline.js(画布)
    • text-decoration-*

    让我们一一列出,并讨论每种方法的优缺点。

    文字装饰

    text-decoration是在文本下划线的最直接方法。 您只需应用一个属性,便可以使用它。 在较小的尺寸下,它看起来很不错,但是增加了字体大小,同一行开始显得笨拙。

    参见演示

    text-decoration的最大问题是缺乏可定制性。 它使用其所应用的任何文本的颜色和字体大小,并且没有跨浏览器的方式来更改样式。 以后再说。

    • 易于使用
    • 定位在基线以下
    • 在Safari和iOS中默认跳过后裔
    • 跨行包装
    • 适用于任何背景
    • 无法在其他浏览器中跳过后代
    • 无法更改颜色,厚度或样式

    底边

    border-bottom快速可自定义之间提供了良好的平衡。 这种方法使用了久经考验CSS边框,这意味着您可以轻松更改颜色,厚度和样式。

    这是inline元素上的border-bottom外观:

    参见演示

    最大的问题是,下划线与文本的距离有多远-完全位于下划线的下方 。 您可以通过将元素设置为inline-block并减小line-height ,但随后您将无法包装文本。 适用于单行,但别无其他。

    参见演示

    此外,您可以使用text-shadow来遮盖下移线附近的行的一部分,但是您必须使用与背景颜色相同的颜色来伪造它。 这意味着它仅适用于纯色背景,不适用于渐变或图像。

    参见演示

    此时,有四个属性为单个下划线设计样式。 这比text-decoration要多得多。

    • 可以使用text-shadow跳过后代
    • 可以更改颜色,厚度和样式
    • 可以过渡和动画化颜色和厚度
    • 默认包装,除非它是inline-block
    • 可以在任何背景下使用,除非使用text-shadow
    • 位置较远且难以重新定位
    • 许多无关的属性使其正确无误
    • 使用text-shadow时选择混乱的文本

    盒子阴影

    box-shadow绘制带有两个内嵌框阴影的下划线:一个用于创建矩形,另一个用于覆盖矩形。 这意味着您需要扎实的背景才能工作。

    请参阅CodePen上的John D. Jameson( @johndjameson撰写的Pen Underlines 5:box-shadow

    您可以使用相同的text-shadow技巧来伪造下划线和文本后代之间的间隙。 但是,如果线条的颜色与文本不同,或者甚至足够细,它实际上不会像text-decoration那样发生冲突。

    • 可以位于基线以下
    • 可以使用text-shadow跳过后代
    • 可以改变颜色和厚度
    • 跨行包装
    • 不能改变风格
    • 在任何背景下均无效

    背景图像

    background-image与我们想要的一切最接近,并且获取的麻烦最少。 想法是使用linear-gradientbackground-position来创建图像,该图像在文本行之间水平地重复。

    您将必须display: inline; 这种方法也是。

    参见演示

    这种方法也不必使用linear-gradient 。 您可以带来自己的背景图片以获得一些很酷的效果。

    参见演示

    • 可以位于基线以下
    • 可以使用text-shadow跳过后代
    • 可以更改颜色,厚度(允许半个像素)和样式
    • 使用自定义图像
    • 跨行包装
    • 可以在任何背景下使用,除非使用text-shadow
    • 图像在分辨率,浏览器和缩放级别上可以不同地调整大小

    SVG过滤器

    这是我一直在尝试的一种方法:SVG过滤器。 您可以创建一个内联SVG filter元素,该元素绘制一条线,然后展开文本以遮盖我们希望透明的部分线。 然后,您可以为filter指定一个id ,并在CSS中使用类似filter: url('#svg-underline')引用filter: url('#svg-underline')

    这样做的好处是,过滤器无需依赖text-shadow即可增加透明度。 这意味着您可以在任何背景(包括渐变和背景图像)的顶部跳过降序! 不过,此代码仅适用于一行文本,因此请单方面注意。

    参见演示

    这是在Chrome和Firefox中的外观:

    IE,Edge和Safari中的浏览器支持存在问题。 很难在CSS中测试SVG过滤器支持。 您可以将@supportsfilter @supports使用,但这只会测试引用是否有效,而不是所应用的过滤器本身。 我的方法最终会使浏览器略微嗅探,因此也要加倍小心。

    优点
    • 定位在基线以下
    • 跳过后代
    • 能够更改颜色,厚度和样式
    • 适用于任何背景
    缺点
    • 不跨越线
    • 在IE,Edge或Safari中不起作用,但是您可以使用text-decoration 。 Safari的底线看起来仍然不错。

    Underline.js(画布)

    Underline.js令人着迷。 我认为Wenwen Zhang用JavaScript能够做的事以及对细节的关注给人留下了深刻的印象。 如果您以前没有看过Underline.js 技术演示 ,请绝对停止阅读一分钟并进行检查。 关于它的工作原理 ,有一个长达九分钟的有趣的演讲,但我会给您一个简短的版本:它使用<canvas>元素画出下划线。 这是一种新颖的方法,效果惊人。

    尽管名称很吸引人,但是Underline.js只是一个技术演示 。 这意味着您必须先对其进行大量修改,才能将其放入任何项目中。

    值得在这里提出它作为概念证明。 <canvas>有可能创建漂亮的交互式下划线,但是您必须编写一些自定义JavaScript才能使它们起作用。

    text-decoration- *属性

    还记得“稍后再说”的部分吗? 好吧,我们到了。

    text-decoration本身可以很好地工作,但是您可以添加一些实验属性来自定义其外观:

    • text-decoration-color
    • text-decoration-skip
    • text-decoration-style

    只是不要太兴奋。 您知道, 浏览器支持

    文字装饰颜色

    text-decoration-color可以将下划线的颜色与其文本颜色分开更改。 该属性甚至具有比预期更好的浏览器支持-它可在Firefox中工作,并在Safari中作为前缀。 这里有个要注意的地方:如果您不清除后代,Safari会将行放在文本的顶部 。 🙃

    Firefox:

    苹果浏览器:

    文本装饰跳过

    text-decoration-skip切换在带下划线的文本中切换跳过的下降器。

    此属性是非标准属性,目前仅在Safari中-webkit- ,因此您需要-webkit-前缀才能使用它。 Safari默认情况下会启用此属性,这就是为什么即使在未指定下划线的网站上,下划线也会跳过下划线的原因。

    如果您使用的是Normalize,请知道最新版本会禁用该属性,以使浏览器之间的内容保持一致。 如果您想要这些梦幻般的下划线,则需要重新打开它。

    文字装饰风格

    text-decoration-style提供了与border-style相同的线条,但也添加了wavy线。

    您可以使用以下不同的值:

    • dashed
    • dotted
    • double
    • solid
    • wavy

    目前, text-decoration-style仅在Firefox中有效,因此以下是屏幕截图:

    各种纯色下划线样式

    看起来熟悉?

    少了什么东西?

    与使用其他CSS属性设置下划线样式相比, text-decoration-*属性要直观得多。 但是,如果我们再看一下我们先前的要求,则这些属性无法提供指定线宽或位置的方法。

    经过一些研究,我发现了以下两个属性:

    • text-underline-width
    • text-underline-position

    看起来好像他们是在CSS的早期草案中提出的,但是由于缺乏兴趣而从未实现。 嘿,别怪我。

    外卖

    那么在文本下划线的最佳方法是什么?

    这取决于。

    对于小文本,我建议使用text-decoration ,然后乐观地在顶部应用text-decoration-skip 。 在大多数浏览器中,它看起来有些乏味,但强调始终看起来像这样,人们似乎并不介意。 另外,总是有机会,如果您足够耐心,以后所有下划线都将变得很棒,而您无需进行任何更改。

    对于正文,可能使用background-image方法。 它可以工作,看起来很棒,并且有Sass mixins 。 如果下划线较细或颜色与文本不同,则可以省略text-shadow

    对于单行文本,请使用border-bottom以及您想使用的其他任何属性。

    而要跳过渐变或背景图像顶部的下降器,请尝试使用SVG滤镜。 或者只是避免完全使用下划线。

    将来,当浏览器支持更好时,答案一直是text-decoration-*


    另请参阅本杰明·伍德拉夫(Benjamin Woodruff)的文章CSS Underlines Suck ,它以类似的方式巧合地践踏了这一点。

    翻译自: https://css-tricks.com/styling-underlines-web/

    展开全文
  • 相信大家都知道,当使用AppCompatEditText(Edit Text)时,默认的下划线是跟随系统的#FF4081的颜色值的,通过改变这个值可以改变所有的颜色样式 有时候你想单独定义某一个界面的颜色样式,则可以这样做: 1.在你的...
  • 总有一些UI设计师觉得原生TabLayout的下划线样式不符合用户的审美,比如说,下划线的宽度要跟文本的宽度一样,下划线的样式要换成图片等等。TabLayout在这些需求面前显得那么无助,程序员被迫搬砖。 WeTabLayout继承...
  • app:tabIndicatorFullWidth=“false” 就可以设置下划线与文字等宽了

    app:tabIndicatorFullWidth=“false” 就可以设置下划线与文字等宽了

    展开全文
  • android EditText 下划线样式

    千次阅读 2018-08-28 11:29:05
    最近做新项目,项目中有个地方需要在EditText的地步加一条背景线,还要随着选中变色。 在 stackoverflow 上没找到答案,我自己研究了一下,画了出来。 这个做一个小笔记 &amp;lt;?xml version=&...

    最近做新项目,项目中有个地方需要在EditText的地步加一条背景线,还要随着选中变色。
    stackoverflow 上没找到答案,我自己研究了一下,画了出来。

    这个做一个小笔记

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_focused="true">
            <rotate android:fromDegrees="180" android:pivotX="50%" android:pivotY="75%" android:toDegrees="180">
                <shape android:shape="line">
                    <stroke android:width="2dp" android:color="#FF00FFFF" />
                    <size android:width="1dp" android:height="2dp" />
                </shape>
            </rotate>
        </item>
        <item android:state_focused="false">
            <rotate android:fromDegrees="180" android:pivotX="50%" android:pivotY="75%" android:toDegrees="180">
                <shape android:shape="line">
                    <stroke android:width="2dp" android:color="#FF00FF00" />
                    <size android:width="1dp" android:height="2dp" />
                </shape>
            </rotate>
        </item>
    </selector>

    方法就是先画一居中的横线,再在高度75%处进行中心旋转。

    完~

    展开全文
  • 在介绍如何对下划线进行样式设置之前,我们应该回答以下问题: 是否应该对下划线进行设置 ? 在图形设计中,下划线通常被认为并不复杂。 有更好的方法来强调,建立层次结构和划分标题。 巴特里克(Butterick)的...
    展开全文
  • element 菜单替换选中下划线样式和隐藏下划线

    千次阅读 热门讨论 2019-08-14 17:20:55
    <el-menu :default-active="activeIndex" class="el-menu-demo" text-color='#222222' close="" active-text-color='#1f84e0' mode="horizontal" @select="handleSelect"> <el-menu-item c...
  • 递归地将关键字符串从驼峰式大小写转换为下划线样式。 直接派生自的 例子 var snakeize = require ( 'snakeize' ) ; var obj = { feeFieFoe : 'fum' , beepBoop : [ { 'abcXyz' : 'mno' } , { 'FooBar' : 'baz'...
  • 微信 vant标签栏下划线样式修改

    千次阅读 2020-12-29 10:40:22
    想去掉选中下划线 换成横线 没有使用属性:直接找到miniprogram_npm/@vant/weapp/tabs/index.wcss文件 找到class样式注释: 加底部边框
  • --编辑框下划线样式--> <item name="colorControlNormal">@color/colorPrimary</item><!--焦点离开时的颜色--> <item name="colorControlActivated">@color/colorAccent</item><!--焦点所在时的颜色-->   ...
  • (输入框DIY)带下划线样式,带间距,带字数限制的明文输入框 需要demo请移步: https://github.com/baozoudiudiu/CWLineTextField
  • 实现:利用 深度作用选择器 也就是 ::v-deep,来进行样式穿透,进而对table的样式进行覆盖并且改成我们想要的样式 HTML <div class="table-wrapper"> <el-table :data="tableData" height=
  • 标题本来是设置下划线高度的,但是感觉有歧义,额,高度设置的话,在layout xml文件里tabIndicatorHeight=“xdp”就行了,本文后面讲的是设置该下划线距离底部的高度。为什么会有这种奇怪的需求呢?因为设计稿就是...
  • Atom-red-wavy-underline.zip,Atom package that changes the style of underline used by the spell-check package红色波浪下划线,atom是一个用web技术构建的开源文本编辑器。
  • 可自定义下划线的TabLayout,可以配合ViewPager使用,也可以单独使用,下划线可设置图片,可设置颜色,宽高等
  • C#下划线样式控件(TextBox,ComBox)第二版 由于第一版发布忘记解密。
  • 句法: 计数 = cprintf(样式,格式,...) 描述: CPRINTF 使用内置 SPRINTF 和 FPRINTF 函数接受的... 默认:蓝色下划线“黑色”、“青色”、“洋红色”、“蓝色”、“绿色”、“红色”、“黄色”、“白色” 以 '-' o
  • 在制作精美的移动web端的界面中,我们免不了要制作精美的特效,每个界面的导航按钮就是其中就重要的一个。
  • Amazing Css:自定义下划线样式的Input 这篇文章将通过CSS的方式实现一个常见的Input样式,包括一些VUE的Tips 效果 相比于传统的方框Input同款样式,下划线的input输入框占用版面更小,视觉效果比较灵活,通常可以...
  • 先上效果图###textarea下划线设置一张1*35//行高的图片 , 设置背景图即可.background: url('./img/linebg.png') repeat; border: none;outline: none;overflow: hidden; line-height: 35px;//注意行高要和背景图高度...
  • css a标签去掉下划线样式

    千次阅读 2015-09-30 09:56:00
    /*包含以下四种的链接*/ a { text-decoration: none; } /*正常的未被访问过的链接*/ a:link { text-decoration: none; } /*已经访问过的链接*/ a:visited { text-decoration: none;... ...
  • 假如有个需求是实现带下划线的文本显示(下划线),如果不使用自定义属性的话实现起来也不太难(起码我认为的实现方式是有许多种的),今天就讲解一下如何使用自定义属性来实现上述带下划线的文本框吧。还好Android...
  • 自定义tablayout,仿系统tablayout源码,下划线和tab全部自定义,tab多的时候可左右滑动
  • 下划线样式

    2012-09-04 09:58:09
    下划线样式: ;border-bottom:1px solid #000000;padding-bottom:1px;"> 下划线 </span>

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 72,006
精华内容 28,802
关键字:

下划线的样式