zoukankan      html  css  js  c++  java
  • html页面边框的另一种写法

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="UTF-8">
     5         <title>边框</title>
     6         <style type="text/css">
     7             div{
     8                 width: 300px;
     9                 height: 300px;
    10                 /*border: 1px solid red; 复合样式*/
    11                 
    12                 /*单一样式*/
    13                 border-width: 1px 2px 3px 4px;
    14                 border-style: solid dashed dotted solid;
    15                 border-color: red blue black pink;
    16                 /*四个值依次分别对上、右、下、左赋值*/
    17                 /*当只有两个值时一次分别对上/下、左/右赋值*/
    18                 /*当放三个值时依次分别对上、左/右、下赋值*/
    19                 border-top: 10px solid yellow;
    20                 /*单独对上边框进行赋值,
    21                  border-bottom为下边框
    22                  border-left为左边框
    23                  border-right为右边框
    24                  * */
    25                 border-bottom-color: hotpink;
    26                 /*单独对下边框颜色进行复制*/
    27             }
    28         </style>
    29     </head>
    30     <body>
    31         <div>
    32             
    33             
    34         </div>
    35         
    36         
    37     </body>
    38 </html>


    注意:边框其实不是一个矩形,当你把上边变得颜色设置的不同时你会发现变得是一个梯形,而如果你把div的宽和高设置为0的话,这个有变得不是梯形,他的上低也会变为0,成为一个三角形,这个在面试前端工作时,面试官有可能会问到

  • 相关阅读:
    java并发容器
    五种单例模式的写法
    Java中Volatile关键字
    Future模式实例
    mysql笔记
    亚马逊EC2服务器登录方法
    RSA加密方法java工具类
    Base64Util工具类
    maven命令创建项目
    关于spring事务注解
  • 原文地址:https://www.cnblogs.com/swust-wangyf/p/6768492.html
Copyright © 2011-2022 走看看