css 实现矩形四个边角加粗的方法

互联网   发布时间:2017-10-11 15:13:53   作者:不要和我名字一样   我要评论

这篇文章主要介绍了css 实现矩形四个边角加粗的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

1、工具/原料

  • html
  • css

2、具体实现

效果图

html代码

<body>
    <h1 style="color: red">css实现矩形边角加粗</h1>
    <div class="main">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</body>

css代码

        body{
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
        }
        .main{
            position: relative;
            width: 400px;
            height: 200px;
            border: 1px solid red;
        }
        .main span:nth-child(1){
            position: absolute;
            left: -5px;
            top: -5px;
            padding: 15px;
            border-style: solid;
            border-color: rebeccapurple;
            border-width: 5px 0 0 5px;
        }
        .main span:nth-child(2){
            position: absolute;
            right: -5px;
            top: -5px;
            padding: 15px;
            border-style: solid;
            border-color: rebeccapurple;
            border-width: 5px 5px 0 0;
        }
        .main span:nth-child(3){
            position: absolute;
            right: -5px;
            bottom: -5px;
            padding: 15px;
            border-style: solid;
            border-color: rebeccapurple;
            border-width: 0 5px 5px 0;
        }
        .main span:nth-child(4){
            position: absolute;
            left: -5px;
            bottom: -5px;
            padding: 15px;
            border-style: solid;
            border-color: rebeccapurple;
            border-width: 0 0 5px 5px;
        }

原理很简单, 只要弄清position:relative,border和left,top之间的关系就可以了

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • HTML5+CSS3绘制锯齿状的矩形

    这篇文章主要教大家如何利用HTML5 CSS3绘制出锯齿状的矩形,绘制图形时可以用canvas标签,感兴趣的小伙伴们可以参考一下
    2016-03-01
  • 使用Div+CSS纯图片实现圆角矩形的方法小结

    这篇文章主要介绍了使用Div+CSS纯图片实现圆角矩形的方法小结,CSS3中用代码绘制圆角矩形非常方便,而本文要介绍的则是利用图片来实现兼容性更强的方法,需要的朋友可以参考下
    2016-02-22
  • CSS3绘制圆角矩形的简单示例

    这篇文章主要介绍了CSS3绘制圆角矩形的简单示例,注意一下各浏览器对CSS3的兼容性,需要的朋友可以参考下
    2015-09-28
  • css添加一条属性能够绘制一个矩形框

    添加一条属性,它能够绘制一个矩形框,可以指定矩形边的颜色,边的宽度,边的样式等等,具体的实现步骤如下,感兴趣的朋友不要错过
    2014-02-11
  • div+css制作圆角矩形的原理示例解读

    圆角矩形的制作想必大家都会吧,但真正的实现原理想必并没有几个人知道,在本文有个不错的示例或许能帮助大家更好的理解其中的原理,感兴趣的朋友可以参考下
    2013-10-05
  • div+css用边框实现圆角矩形(多样式)

    css圆角卷起了一阵风波,只用css来做圆角矩形的技术很早就有了,但是在网页的设计过程中,我们通常用图片实现圆角矩形效果。现在网上很多关于无图片实现css圆角矩形的方法,虽
    2013-03-25
  • 纯CSS画的基本图形(矩形、圆形、三角形、多边形、爱心、八卦等)

    今天在css-tricks上看到一篇文章,那篇文章让我不禁心头一震,强大的CSS啊,居然能画出这么多基本的图形
    2012-01-21
  • 圆角矩形的html+css实现代码

    闲来无事,突然又想起了圆角矩形的实现。不过这个话题大家已经谈了太长时间了。各种各样的实现方案在网上都可以看到。这里仅仅是记录一下个人认为比较好的一个。这个方案不
    2009-04-13
  • CSS高级技巧:圆角矩形-CSS教程-网页制作-网页教学网

    所谓的CSS高级技巧...其实是一些对基本技巧的创意组合, 任何手段和技巧都是解决问题的方法. 只要学会这种思考问题的方法, 你也能拥有属于自己的CSS秘籍. CSS2 还没有办
    2008-10-17

最新评论