zoukankan      html  css  js  c++  java
  • CSS之border

    1.border-width 不支持百分比

    属性:thin:1px medium:3px(默认) thick:5px

    2.border-style:double双线
    实现三条横线分开
    {
    120px;height:120px;
    border-top:60px double;
    border-bottom:20px solid;
    }

    3.border-color与color
    两者一样,
    .add{
    color:#ccc'
    transition:color .25s;
    border:1px solid
    }
    .add:hover{
    color:#06c
    }
    只在父元素上设置color就可以实现全部元素hover变色

    4.border与background定位
    (1)background-position默认相对左上方定位的
    (2)利用border实现相对右边定位
    {
    border-right:50px solid transparent
    background-position:100% 40px;
    }

    5.border与三角灯图形构建

    .a{
    100px;
    height: 100px;
    border: 100px solid;
    border-color: red green blue orange;
    }

    改变宽度和高度和border-color,可以实现不同形状的改变。

    6.实现梯形

    .a{
    600px;
    border:100px solid;
    border-color: transparent transparent #c00;
    }

  • 相关阅读:
    redis--列表
    redis ——字符串
    redis 第一节 redis安装、PHP扩展 、主从
    Python--day7
    Python--day6
    Python爬虫
    JSON基础
    Python--day5
    Python—day3
    Windows10 安装QT问题
  • 原文地址:https://www.cnblogs.com/chaofei/p/7688931.html
Copyright © 2011-2022 走看看