zoukankan      html  css  js  c++  java
  • 今日例子border

    border这个属性在页面上的使用率还是很高,例如我们需要理解的盒模型就需要对border有个

    比较深的理解,如果你会盒模型,但对border没有深的理解,那只能说你只是知道盒模型,而

    不是懂得盒模型,因为学习盒模型的过程中必须懂border。

    那么border有什么属性呢?

    Border-width

    Border-style

    Border-color

    上面的是四个边的,还可以再分细到每个边。

    border-left

    border-right

    border-top

    border-botttom

    而它们下面也是有上面的属性。

    下面来个例子:

    这个例子可以让我们更懂得一些边框的东西。

    先来个实现过程图片

    我们最后是做个三角形。

    而这个三角形可以使用到那里呢?

    可以使用下拉框的右边的一个小图标。至于别的实用地方,需要自己仔细观察浏览过的网站。

    实现代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>border</title>
        <style>
            div{
                width: 0;
                height: 0;
                border: 10px solid #000;
                border-bottom: none;
                border-left-color:transparent;
                border-right-color: transparent; 
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
    </html>

    从代码看思路,然后自己扩展。

  • 相关阅读:
    javaSE基础知识点
    java自定义注解
    java自定义线程池
    java写投票脚本自动化初探
    java线程安全初窥探
    锁的深入理解
    java守护线程与非守护线程
    java设计模式初探
    java内存模型初窥探
    uniapp中组件之间跳转遇到的问题
  • 原文地址:https://www.cnblogs.com/zhangzhicheng/p/5759344.html
Copyright © 2011-2022 走看看