精华内容
下载资源
问答
  • border 虚线边框

    2020-09-11 15:21:00
    border 虚线边框 border:1px dashed; 就是这么简单了

    border 虚线边框

    border:1px dashed;
    

    就是这么简单了

    展开全文
  • 主要介绍了CSS border虚线边框属性教程,教大家如何使用css制作网页中的虚线,巩固CSS border属性使用方法,感兴趣的小伙伴们可以参考一下
  • 我们知道,CSS支持将元素的border属性设为虚线,例如:<h1>君喻学堂h1>h1{border:dashed1px;}但是,CSS的虚线样式是固定的,如果我们希望改变虚线的间隔,或者显示虚线滚动的动画效果,那么在CSS属性中是没...

    我们知道,CSS支持将元素的border属性设为虚线,例如:

    <h1>君喻学堂h1>

    h1 {

      border: dashed 1px;

    }

    0de22a8fec6bb07ee789c5d10b4c6276.png

    但是,CSS的虚线样式是固定的,如果我们希望改变虚线的间隔,或者显示虚线滚动的动画效果,那么在CSS属性中是没办法做到的。

    一个办法是使用SVG来模拟外框:

    <div>

      <h1>君喻学堂

      <svg xmlns="http://www.w3.org/2000/svg" version="1.1">

        <rect x="2" y="2" width="200px" height="46px">rect>

      svg>

      h1>

    div>

    h1 {

      position: relative;

      width: 200px;

      text-align: center;

      margin-top: 20px;

      margin-left: 20px;

      /* border: dashed 1px; */

    }

    h1 svg {

      position: absolute;

      left: -2px;

      top: -2px;

      fill: transparent;

      stroke: black;

      stroke-width: 2;

      stroke-dasharray: 55;

      stroke-dashoffset: 3;

      animation: dashmove .5s linear infinite;

    }

    @keyframes dashmove {

      0% {

        stroke-dashoffset: 0;

      }

      100% {

        stroke-dashoffset: 10;

      }

    }

    因为svg元素支持stroke-dasharraystroke-dashoffset属性,所以我们可以设置stroke-dasharray来改变虚线间隔,并通过改变stroke-dashoffset来实现滚动动画。最终实现的效果如下:

    8ba79c1d4c63cc84115c933608445e1a.gif

    这么实现能够达到效果,但是这么实现也有明显的缺点:

    1. 改变了HTML结构,在h1中增加了svg标签。

    2. 还要根据h1的大小、border的宽度计算svg中rect标签的x、y、width、height

    要解决这些问题,一个改进的办法是可以把SVG单独抽出来作为元素背景图片。

    我们创建一个border.svg文件:

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">

      <rect x="2"

        y="2"

        width="200"

        height="46"

        fill="transparent"

        stroke="black"

        stroke-width="2"

        stroke-dasharray="5,5"

        stroke-dashoffset="3">

        <animate attributeName="stroke-dashoffset"

          from="0"

          to="10"

          begin="0s"

          dur=".5s"

          repeatCount="indefinite" />

      rect>

    svg>

    在这里,我们把前面SVG的CSS属性改用SVG的属性实现,将css动画用SVG的SMIL动画实现。

    然后我们的HTML、CSS就可以简化:

    <h1>君喻学堂h1>

    h1 {

      position: relative;

      width: 200px;

      padding: 2px;

      text-align: center;

      margin-top: 20px;

      margin-left: 20px;

      background-image: url(https://s0.ssl.qhres.com/static/29d07f74b85903c0.svg);

      background-repeat: no-repeat;

    }

    上面只要注意一个细节,因为我们的虚线框度为2px,所以我们要给h1元素设置一个padding:2px,将border需要的空间给腾出来。

    这样我们就实现了同样的效果,而且HTML、CSS代码简单了。

    但是这么做也有一个明显的问题,那就是,如果我们要修改虚线的样式或者动画,我们就要修改并更新SVG图片,这也让我们的代码维护起来比较麻烦。

    那么有没有更好的办法解决这个问题呢?

    如果你有任何想法,欢迎留言讨论。后续我们会专门开个CSS的专栏来深入讨论这类问题。

    更多内容,尽在君喻学堂:《前端进阶十日谈》

    312d118e2c5f65e758898f4d4119b7ab.png

    展开全文
  • 普通的设置border是不能调整间距的,比如: ...这样是不能调整虚线之间的间距, 我们可以使用背景图片的方式: .test-border-line{ height: 1px; background-image: linear-gradient(to right, #E7C73...

    普通的设置border是不能调整间距的,比如:
    .test-border-line{
    border: 1px dashed red;
    margin-top: 20px;
    }
    这样是不能调整虚线之间的间距,
    我们可以使用背景图片的方式:
    .test-border-line{
    height: 1px;
    background-image: linear-gradient(to right, #E7C737 0%, #28B35B 50%, transparent 0%);
    background-size: 14px 1px;
    background-repeat: repeat-x;
    }
    background-size的数值越大,间距越大

    记录问题,希望和大家一起学习!

    以上为作者原创,转载必须附上来源!

    展开全文
  • dashed: 定义一个虚线边框。 solid: 定义实线边框。 double: 定义两个边框。 groove: 定义3D沟槽边框。效果取决于边框的颜色值。 ridge: 定义3D脊边框。效果取决于边框的颜色值。 inset:定义一个3D的嵌入边框。...

    点击上方蓝字“ITbear”一起玩耍

    上一次汇总了一下HTML中的标签(传送门-HTML常用标签汇总),想着CSS总是和HTML一起出现,干脆就将常用的CSS属性也汇总一下,这样查阅的时候也许能更方便一点。

    CSS叫层叠样式表,可以定义HTML中的标签显示样式,使页面样式更美观,常用的选择器有id选择器(以“#”开头)和class选择器(以“.”开头)。可以通过外部链接插入,也可以通过


    下面汇总常用的css属性。


    CSS 背景属性


    • background-color  背景颜色。

    • background-image 背景图片。

    • background-repeat 设置背景图像是否重复及如何重复。

    • background-attachment :背景图像是否固定或者随着页面的其余部分滚动。

      fixed:固定。

      scroll:滚动。

    • background-position :设置背景图像的起始位置。left:水平。

      top:垂直。


    CSS 文本格式


    • color 设置文本颜色。

    • direction 设置文本方向。

    • letter-spacing 设置字符间距。

    • line-height 设置行高。

    • text-align 对齐元素中的文本。

    • text-decoration :向文本添加修饰。

      underline:下划线。

      overline:上划线。

      line-through:删除线。

      blink:闪烁。

    • text-indent 缩进元素中文本的首行。

    • text-shadow 设置文本阴影。

    • text-transform :控制元素中的字母大小写,capitalize:首字母大写

      uppercase:大写

      lowercase:小写

      none:无

    • unicode-bidi 设置或返回文本是否被重写。

    • vertical-align 设置元素的垂直对齐。

    • white-space 设置元素中空白的处理方式。

    • word-spacing 设置字间距。


    CSS字体


    • font-family 指定文本的字体系列。

    • font-size 指定文本的字体大小。

    • font-style 指定文本的字体样式。

    • font-variant 以小型大写字体或者正常字体显示文本。

    • font-weight 指定字体的粗细。


    CSS 链接


    • a:link 正常,未访问过的链接。

    • a:visited  用户已访问过的链接。

    • a:hover 当用户鼠标放在链接上时。

    • a:active 链接被点击的那一刻。


    CSS 列表


    • list-style : 简写属性。用于把所有用于列表的属性设置于一个声明中。

    • list-style-image 将图像设置为列表项标志。

    • list-style-position : 设置列表中列表项标志的位置。

    • list-style-type 设置列表项标志的类型。


    CSS 表格


    • border 指定CSS表格边框。

    • border-collapse 设置表格的边框是否被折叠成一个单一的边框或隔开。

    • width 定义表格的宽度。

    • height 定义表格的高度。

    • text-align 设置水平对齐方式,向左,右,或中心。


    CSS 边框


    • border-style 用于设置元素所有边框的样式,或者单独的为各边设置边框样式。

        dotted: 定义一个点线边框。

        dashed: 定义一个虚线边框。

        solid: 定义实线边框。

        double: 定义两个边框。 

        groove: 定义3D沟槽边框。效果取决于边框的颜色值。

        ridge: 定义3D脊边框。效果取决于边框的颜色值。

        inset:定义一个3D的嵌入边框。效果取决于边框的颜色值。

        outset: 定义一个3D突出边框。效果取决于边框的颜色值。

        

    • border-width :简写属性,用于为元素的所有边框设置宽度,或者单独的为各边边框设置宽度。

    • border-color 简写属性,设置元素的所有边框中可见部分的颜色,或为 4 个边分别设置颜色。

    • border-bottom 简写属性,用于把下边框的所有属性设置到一个声明中。

    • border-bottom-color :设置元素的下边框的颜色。

    • border-bottom-style :设置元素的下边框的样式。

    • border-bottom-width :设置元素的下边框的宽度。

    • border-left :简写属性,用于把左边框的所有属性设置到一个声明中。

    • border-left-color :设置元素的左边框的颜色。

    • border-left-style :设置元素的左边框的样式。

    • border-left-width :设置元素的左边框的宽度。

    • border-right :简写属性,用于把右边框的所有属性设置到一个声明中。

    • border-right-color :设置元素的右边框的颜色。

    • border-right-style :设置元素的右边框的样式。

    • border-right-width :设置元素的右边框的宽度。

    • border-top :简写属性,用于把上边框的所有属性设置到一个声明中。

    • border-top-color :设置元素的上边框的颜色。

    • border-top-style :设置元素的上边框的样式。

    • border-top-width :设置元素的上边框的宽度。


    CSS 外边距


    • margin :简写属性。在一个声明中设置所有外边距属性。

    • margin-bottom :设置元素的下外边距。

    • margin-left :设置元素的左外边距。

    • margin-right :设置元素的右外边距。

    • margin-top :设置元素的上外边距。


    CSS 内边距


    • padding :使用简写属性设置在一个声明中的所有填充属性。

    • padding-bottom :设置元素的底部填充。

    • padding-left :设置元素的左部填充。

    • padding-right :设置元素的右部填充。

    • padding-top :设置元素的顶部填充。


    CSS 定位


    • Position : 指定元素的定位类型。

      absolute:绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于。

      fixed:元素的位置相对于浏览器窗口是固定的。

      relative:相对定位元素的定位是相对其正常位置。

      static:HTML 元素的默认值,即没有定位,遵循正常的文档流对象。

    • overflow : 设置当元素的内容溢出其区域时发生的事情。

      auto:如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。

      hidden:内容会被修剪,并且其余内容是不可见的。

      scroll:内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。

      visible:默认值。内容不会被修剪,会呈现在元素框之外。

      inherit:规定应该从父元素继承 overflow 属性的值。

    • clip : 剪辑一个绝对定位的元素。

      shape:设置元素的形状。

      auto:默认值。

      inherit:规定应该从父元素继承 clip 属性的值。


    CSS 浮动


    • float 指定一个盒子(元素)是否可以浮动。 left ; right ; none;

    • clear 指定元素两侧不能出现浮动元素。







    本篇参照菜鸟教程-CSS教程汇总,传送门-https://www.runoob.com/css/css-tutorial.html


    以上,由于内容太多,这里就不演示效果了,大家在用到其中属性的时候自然会看到效果,如果有更详细更全面的CSS常用属性,往后也会往这篇文章中补充,希望有所帮助。

    End


    每天进步一点点!

    公众号:ITbear

    长按关注loading.gif



    展开全文
  • 我们只要将三个值分别填入属性内就可以做出定义,如果想要单独设置一个列表底部的分割虚线: div { border-bottom:1px dashed #333333;}3.4.3 padding属性 padding 作为内间距,定义起来和 margin 是完全一样的,...
  • 例如:border:5px solid #ff0000 边框宽度:border-width: 边框颜色:border-color: 边框样式:border-style:solid(实线)/dashed(虚线)dotted(点划线)double(双线)none(去掉边框); 可单独设置一方向边框, border-...
  • 下面总结了一些常用又有趣的css技巧,希望大家收藏,以减少查资料的时间。三角形最常见的一种形状了。切图,不存在的。/** 正三角 */.triangle { width: 0;... border-color: transparent transparent rgb(...
  • 语法: 边框属性——设置边框样式( border-stye) 边框样式用于定义页面中边框的风格,常用属性值如下: none:没有边框即忽略所有边框的宽度(默认值) solid:边框为单实线(最为常用的) dashed:边框为虚线 ...
  • (虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset; border-width:; 边框宽度 border-color:#; 简写方法 border:width style color; 列表属性:(List-style) 类型 list-style-type:...
  • 通过色标的百分比位置值来微调虚线的虚实比例,还可以通过background-size来改变虚线的疏密。 codepen试一试 四、自适应内部元素 如果不给元素一个具体的height,它会自动适应其内容的高度。那width能不能设置成...
  • 比如说一个导航菜单,通过使用borders 来给每个链接Link创建分割符,然后再再加上一条规则 解除最后一个link的border .nav li { border-right: 1px solid #666; }.nav li:last-child { border-right: none; } 这是一...
  • a{outline: none;} _a{star:expression(this.onFocus=this.blur())}
  • /*设置边框弧的大小,值越大,弧度越大*/ /*也可以对border的某一个边进行设置属性*/ border-top: 2px solid red;} 看到这里你的心情可能是这样的 但是不要担心,如果你觉得很难懂的话,可以私聊我,我给你讲懂! ...
  • 在网页布局中,我们可以将 HTML 标签看成...width 和 height 分别指定了一个元素的宽高我们给 div 标签分别设置100px 的宽高,它在浏览器中的效果如下:(宽高均为 100px 的 div)border 指元素的边框border 是 borde...
  • 2、元素设置了点状、虚线或半透明的边框,但没有背景(或者当 background-clip 不是 border-box 时); 3、对话气泡,它的小尾巴通常是用伪元素生成的; 4、几乎所有的折角效果 5、通过 clip-path 生成的形状。 下面来...
  • 设置border虚线

    2016-03-08 17:28:00
    _border= [CAShapeLayerlayer]; _border.strokeColor=_borderColor.CGColor; _border.fillColor=nil; _border.path= [UIBezierPathbezierPathWithRect:_borderView.bounds].CGPath; _...
  • Border HorizontalAlignment="Center" VerticalAlignment="Center" Width="60" Height="30" CornerRadius="5" BorderBrush="Blue" BorderThickness="3"> <TextBlock Text="aaa" Horizo...
  • 定义虚线Border

    2013-12-04 13:59:37
    Border Width="200" BorderThickness="1" SnapsToDevicePixels="True" HorizontalAlignment="Left" Margin="36,176,0,56"&gt; &lt;Border.BorderBrush...
  • 这里边框属性的虚线边框border控制虚线。以下配置的css 高度(css height)和css 宽度(css width)为350像素。 一、四边为虚线边框 border:1px dashed #000; 黑色虚线边框 实例: CSS代码: .hackhome{border:1px ...
  • ![图片说明](https://img-ask.csdn.net/upload/201601/31/1454226173_759656.png) 就是那个红色圈起来的部分 我想要纯粹的虚线,不想它隔一段距离多一个横线 怎么办呢?
  • tr虚线border在火狐浏览器加载异常问题编写一个demo,动态添加一行tr,tr包含一个下划虚线border-bottom: 1px dashed #000; 为了让tr的border属性生效,我们在table中加入> border-collapse:collapse; 初始代码块<!...
  • 自定义 border(dashed)虚线的间距

    千次阅读 2019-10-08 14:40:19
    我看了一眼,想了几秒钟,这玩意不就是 border-bottom:dashed 嘛,然后我就咔咔咔上代码,就变成下面这样了。 敲完后我就感觉自己有很蠢,肯定不是这样实现的。然后我就想了一下,因为右边的按钮是需要用到渐变的...
  • width: 100%; height: 1px; background-image: linear-gradient(to right, #ccc 0%, #ccc 50%, transparent 50%); background-size: 8px 1px; background-repeat: repeat-x;
  • width: 100%; height: 1px; background-image: linear-gradient(to right, #ccc 0%, #ccc 50%, transparent 50%); background-size: 8px 1px; background-repeat: repeat-x; ...QQ交流群:260548659

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,179
精华内容 471
关键字:

border虚线