美文网首页
div只有四个角有边框实现

div只有四个角有边框实现

作者: 且须文雅 | 来源:发表于2019-03-09 15:50 被阅读0次
<div class="rect"></div>

.rect {
    position: absolute; 
    top: 20px;
    left: 20px; 
    width: 100px; 
    height: 100px; 
    background: linear-gradient(to left, #f00, #f00) left top no-repeat, 
                linear-gradient(to bottom, #f00, #f00) left top no-repeat, 
                linear-gradient(to left, #f00, #f00) right top no-repeat,
                linear-gradient(to bottom, #f00, #f00) right top no-repeat, 
                linear-gradient(to left, #f00, #f00) left bottom no-repeat,
                linear-gradient(to bottom, #f00, #f00) left bottom no-repeat,
                linear-gradient(to left, #f00, #f00) right bottom no-repeat,
                linear-gradient(to left, #f00, #f00) right bottom no-repeat;
    background-size: 1px 20px, 20px 1px, 1px 20px, 20px 1px;  
}

相关文章

  • div只有四个角有边框实现

  • CSS画一个三角形

    CSS画一个三角形出来 具体原理实现 一个加了边框的DIV DIV边框的划分规则1.CSS中的边框划分如图所示,只...

  • 用css实现箭头样式

    原理只设置div的上边框和右边框,并将div旋转45° 实现代码 html css

  • css实现三角形

    css实现三角形 具体实现思路 将div的宽高分别设置为02.由边框来控制三角形的大小3.将所有的边框的颜色都设置...

  • css 实现四角边框

    偶然间发现一个简单实现四角边框的方法 比如 一个div 套个 input框, 然后div给个背景色;里面的inpu...

  • CSS三角的写法(兼容IE6)

    目录 简介 优点 原理1. 先创建一个div2. 然后给div设定边框。3. 给div的四个边框都设置不同的颜色4...

  • HTML与CSS之用边框画三角形和圆

    一.边框的形状 设置边框的四个边不同颜色,同时加粗边框 div{width: 0px;height: 0px;bo...

  • css实战之三角形

    实不相瞒,三角形的实现是用边框来做的!一般情况下,我们经常给一些div设置边框,比如:border: 1px so...

  • 移动端一像素边框

    如何实现在移动端中显示一像素的边框 实现方案一:0.5像素 标准边框语法div{ border: 1px sol...

  • CSS面试题(二)

    一、用css实现div水平垂直居中。 方法一:设置div的宽度和高度,然后设置div为绝对定位,距离页面窗口左边框...

网友评论

      本文标题:div只有四个角有边框实现

      本文链接:https://www.haomeiwen.com/subject/xtaspqtx.html