zoukankan      html  css  js  c++  java
  • border和boder-radius

    前提,如果存在多边框的情况下,边框是斜切的,梯形!。

    .test1{
                height: 100px;
                width: 100px;
                background-color: #eee;
                border-top: 50px solid red;
                border-right: 50px solid blue;
                border-bottom: 50px solid green;
                border-left: 50px solid yellow;
            }

    如果只有一侧的边框,那么只是边框而已。

    边框交界处,才会斜切 

    如果元素大小为0,那么只有出现两个以上的边框,边框才会出现

    4个都在,皆大欢喜

    .test1{
                height: 0px;
                width: 0px;
                background-color: #eee;
                border-top: 50px solid red;
                border-right: 50px solid blue;
                border-bottom: 50px solid green;
                border-left: 50px solid yellow;
            }

    所以,画三角形的话,其他边框的颜色设置为透明即可,不能没有其他标签哦!

     我的元素有背景色,背景色是带border的!

    .test1{
                height: 0px;
                width: 0px;
                background-color: #eee;
                border-top: 50px solid red;
                border-right: 50px solid transparent;
                border-bottom: 50px solid transparent;
                border-left: 50px solid transparent;
            }

    画梯形

    元素要有宽高,全部设置为透明即可

    .test1{
                height: 100px;
                width: 100px;
                background-color: transparent;
                border-top: 50px solid red;
                border-right: 50px solid transparent;
                border-bottom: 50px solid transparent;
                border-left: 50px solid transparent;
            }

    画扇形,radius的某一侧设置为100%

    .test1{
                height: 100px;
                width: 100px;
                background-color: #333;
                /*border-top: 50px solid red;
                border-right: 50px solid transparent;
                border-bottom: 50px solid transparent;
                border-left: 50px solid blue;*/
    
                border-top-left-radius: 100%;
            }

    画圆,50%和100%都行

    .test1{
                height: 100px;
                width: 100px;
                background-color: #333;
                /*border-top: 50px solid red;
                border-right: 50px solid transparent;
                border-bottom: 50px solid transparent;
                border-left: 50px solid blue;*/
    
                border-radius: 100%;
            }

     画半圆

    上左边和上右边的为50%即可

    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    
    
    或者
    
    /*上右下左。顺时针*/
    /*border-radius: 50% 50% 0 0;*/

  • 相关阅读:
    python爬取图片
    IDEA创建SpringBoot项目报错,不能连接https://start.spring.io/
    ES模块化的理解
    Web标准(网站标准)理解
    Mongodb安装
    Linux Ntp时间同步服务
    SentinelResource 注解
    Sentinel的流量控制
    Sentinel简介
    nacos安装
  • 原文地址:https://www.cnblogs.com/weizhibin1996/p/9655167.html
Copyright © 2011-2022 走看看