css3 深刻认识border-color和border-radius的属性

最新推荐文章于 2024-07-10 16:05:14 发布

迩菜flysun

最新推荐文章于 2024-07-10 16:05:14 发布

阅读量2.5k

点赞数

分类专栏： CSS3 文章标签： css3

本文链接：https://blog.csdn.net/lny1126/article/details/80527718

版权

CSS3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.border-radius 属性:

我们先看看下面的图片：

这是一张不规则的图片的

如果你们看到这个图片该怎么写的？先思考一下

代码如下：

.box{
        width: 200px; 
        height: 200px; 
        display: block;
        background: #f00;
        border-top-left-radius:100px;
        border-top-right-radius:200px; 
        border-bottom-left-radius:150px; 
        border-bottom-right-radius:80px;  
     }
<div class="Outer">
        <div class="box"></div>
    </div>

我这边分别写的定义4个边的角度的，

这里你们要注意的：

只有一个值，那么 top-left、top-right、bottom-right、bottom-left 四个值相等；
只有一个值，那么 top-left、top-right、bottom-right、bottom-left 四个值相等；
有两个值，那么 top-left 等于 bottom-right，并且取第一个值；top-right 等于 bottom-left，并且取第二个值；
有三个值，其中第一个值是设置top-left;而第二个值是 top-right 和 bottom-left 并且他们会相等,第三个值是设置 bottom-right；
有四个值，其中第一个值是设置 top-left 而第二个值是 top-right 第三个值 bottom-right 第四个值是设置 bottom-left。

2.border-color 属性:

大家看看下面的图：
这里写图片描述
代码如下：

.box4 {
        width: 50px; 
        height: 50px; 
        display: block;
        background: #f00;
        border: 100px solid transparent;
        border-top-color:#edde78;
        border-bottom-color:#f01084; 
        border-left-color:#3de039; 
        border-right-color:#1418c7;  
     }
<div class="box4"></div>

这里写图片描述

我这边分别定义的4个边框的颜色的，
假设我在这代码中我写三角形，该怎么写了，
你们先看看下面的图：
这里写图片描述

你们想想如果这样图你们该怎么写，思考一下！！！
假设我们先把左边框的颜色的颜色改成白色，然后在改底部的，上边的，然后得到这个样图

这里写图片描述

然后我再把

    width: 50px; 
    height: 50px; 
    改成
    width: 0; 
    height: 0;

就得到这样子的：

这里写图片描述
整体代码如下：


    width: 0;
    height: 0;
    display: block;
    background: #f00;
    border: 100px solid transparent;
    border-top-color: #fff;
    border-bottom-color: #fff;
    border-left-color: #fff;
    border-right-color: #1418c7;