css之border | 易学教程

针对border进行一些分析总结，如下：

一、css1中：

border　　　　边框（可以写复合样式）

border-style　　边框样式

border-width　　边框宽度

border-color　　边框颜色

如：div{border:2px solid green;}

其中值得注意的是:

　　在border-width中除了普通的数值，还可以对应thin(1px),medium(3px),thick(4px).

　　在border-style中默认的样式是none,所以一般要设置，常用的参数有：solid,dotted,dashed,double(双线边框，可做一下按钮)

　　在border-color中也是有默认值的，在不设置的时候，它会使用当前元素的颜色做边框的颜色

二、css3中：

1.border-radius属性是一个最多可指定四个border-*-radius属性的复合属性

　　后面可以接数值：

　　20px（四个角一样20px）

　　20px 30px (左上和右下为20px,右上和左下为30px )

　　20px 30px 40px(左上：20px 右上：30px 右下：40px 左下：30px)

　　20px 30px 40px 50px （四个角顺时针）

　　也可以用border-top/bottom-left/right-radius　　定义某个角的边框形状　　这样来进行每个角不同的设置,

　　还有border-radius后面可以写成如下形式：20px/30px。这样的话里面的圆为椭圆。

范例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
       .box1{
            width: 200px;
            height: 200px;
            background: chartreuse;
            /* border-radius: 50%; */
            border-top-left-radius: 100px;
            border-top-right-radius: 100px;
            border-bottom-left-radius: 100px;
            border-bottom-right-radius: 100px;           
        }
        .box2{
            width: 200px;
            height: 200px;
            background: chocolate;
            border-top-left-radius: 200px;
        }
        .box3{
            width:200px;
            height: 200px;
            background:cornflowerblue;
            border-radius: 100px 100px 0 0;
            height: 100px;   
        }
        .box4{
            width: 200px;
            height: 100px;
            background: crimson;
            /* border-radius: 100px/50px;   */
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <!-- 画一个圆 -->
    <div class="box1"></div>
    <br>
    <!-- 画一个四分之一圆 -->
    <div class="box2"></div>
    <br>
    <!-- 画一个半圆 -->
    <div class="box3"></div>
    <br>
    <!-- 画一个椭圆 -->
    <div class="box4"></div>
</body>
</html>

2.border-image　　边框图片

　　border-image-outset　　设置边框图片向外

　　border-image-width　　　设置边框图像所占边框宽度

　　border-image-slice　　　切割背景图片

　　border-image-repeat　　背景的填充方式（stretch,rpeat,round,space）

　　border-image-source　　引入边框图片或者是创建渐变色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background: pink;
            border:30px solid;
            margin:0 auto;
            border-image: url(../MYPROJECT/img/borderbg.jpg) 30 30 repeat;  
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

来源：https://www.cnblogs.com/davina123/p/11692726.html

标签

border

border-radius

css

css样式