CSS3之border属性

最新推荐文章于 2024-01-06 23:50:02 发布

Programmer.杨

最新推荐文章于 2024-01-06 23:50:02 发布

阅读量2.1k

点赞数 1

分类专栏：前端技术-CSS 文章标签： border box-shadow CSS 属性

本文链接：https://blog.csdn.net/YWB88888888/article/details/102700672

版权

前端技术-CSS 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

border相关属性需要大量练习，方可运用自如！
文字下方有Demo！！！

border:

作用：
设置在一个声明中包含所有的边框属性
说明：
可以设置的属性分别 （按顺序）：border: border-width border-style border-color; 值缺少一个没有关系，例如border：＃FF0000;是允许的

border-属性(width, style, color):

作用：
          设置一个元素的四个边框的宽度、风格、颜色，这三个属性分别可以有一到四个值，
说明：
          如果只提供一个，将用于全部的四条边
          如果提供两个，第一个用于上和下，第二个用于左和右
          如果提供三个，第一个用于上，第二个用于左和右，第三个用于下
          如果提供四个，则作用顺序为：上，右，下，左
          要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute
常用值：
          width: (NUMBER px), (NUMBER %)
          style: (solid), (none), (hidden):用于解决表格中边框冲突
          color： (transparent)：默认值，透明
                      (普通颜色值)：四种写法

border-方向（top, right, bottom, left）:

作用：
设置在一个声明中包含指定方向边框的所有属性
说明：
可以按顺序设置如下属性： border-方向: border-方向-width border-方向-style border-方向-color; 值缺少一个没有关系，例如border-方向：＃FF0000;是允许的

border-方向(top, right, bottom, left)-属性（width, style, color）:

作用：
规定元素的指定方向边框上的指定样式
说明：
始终把 border-style 属性声明到 border-方向-属性之前。被选元素必须在您改变其宽度等属性之前获得边框

代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS3之border属性</title>
    
    <style type="text/css">
        .showdiv {
            display: inline-block;
            width: 200px;
            height: 200px;
            margin: 10px;
        }
        #showDiv1 {
            border: 1px solid gray;
            /*
            border-width: 1px;
            border-style: solid;
            border-color: dimgray;
            */
        }
        #showDiv2 {
            /* 其他三个方向的边框设置同理 */
            border-top: 3px double mediumpurple;
            /*
            border-top-width: 3px;
            border-top-style: double;
            border-top-color: mediumpurple;
            */
        }
        #showDiv3 {
            border: 2px solid #af0000;
            /* 四个方向上都是10px */
            /*border-radius: 10px;*/
            
            /* 分别设置，方向是 左上 右上 右下 左下 */
            border-radius: 0 0 0 5px;
            
            /*
            border-top-left-radius: 2px;
            border-top-right-radius: 4px;
            border-bottom-left-radius: 6px;
            border-bottom-right-radius: 8px;
            */
        }
        /* 方向顺序，上方开始 顺时针*/
        #showDiv14 {
            width: 100px;
            height: 100px;
            border-width: 25px 50px 75px 100px;
            border-style: solid double solid dotted;
            border-color: red green blue yellow;
        }

        /* 正方形 */
        #showDiv15 {
            width: 0;
            height: 0;
            border-width: 100px 100px 100px 100px;
            border-style: solid solid solid solid;
            border-color: red green blue yellow;
        }
        /* 三角形1 */
        #showDiv16 {
            width: 0;
            height: 0;
            border-width: 100px 100px 100px 100px;
            border-style: solid solid solid solid;
            border-color: red transparent transparent transparent;
        }
        /* 三角形2 */
        #showDiv17 {
            width: 0;
            height: 0;
            border-width: 100px 60px 100px 60px;
            border-style: solid solid solid solid;
            border-color: transparent transparent transparent yellow;
        }
    </style>
</head>
<body>
    <div id="showDiv1" class="showdiv"></div>
    <div id="showDiv2" class="showdiv"></div>
    <div id="showDiv3" class="showdiv"></div>
    <div id="showDiv14" class="showdiv"></div>
    <div id="showDiv15" class="showdiv"></div>
    <div id="showDiv16" class="showdiv"></div>
    <div id="showDiv17" class="showdiv"></div>
</body>
</html>

showDiv1~3:
在这里插入图片描述
showDiv14~17:

border-radius:

作用：
          为元素添加圆角边框
说明：
          该属性是一个最多可指定四个 border-方向-radius 属性的复合属性，四个方向分别设置，方向是左上、右上、右下、左下，也可以分别指定 水平半径 和 垂直半径
四个方向分别设置： eg): border-radius: 0 0 0 5px;
分别指定水平半径和垂直半径：
          语法： border-radius: 1-4 length|% / 1-4 length|%;
          eg): border-radius: 320px 320px 0 0/240px 240px 0 0;

border-上下(top, bottom)-左右(left, right)-radius:

作用：
          定义指定方向上的边框的形状
说明：
          可以分别指定水平半径和垂直半径
语法：
          border-radius: 1-4 length|% / 1-4 length|%;
eg):
          border-radius: 320px/240px;

代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS3之border属性</title>
    
    <style type="text/css">
        .showdiv {
            display: inline-block;
            width: 200px;
            height: 200px;
            margin: 10px;
        }
        /* 圆形 */
        #showDiv4 {
            border-radius: 100px;
            background-color: pink;
        }
        /* 半圆形 */
        #showDiv5 {
            width: 100px;
            height: 200px;
            border-radius: 0 100px 100px 0;
            background-color: pink;
        }
        /* 四分之一圆形 */
        #showDiv6 {
            width: 200px;
            height: 200px;
            border-radius: 200px 0 0 0;
            background-color: pink;
        }
        /* 椭圆形 */
        #showDiv7 {
            width: 150px;
            height: 200px;
            border-radius: 75px/100px;
            background-color: pink;
        }
        /* 鸡蛋形 */
        #showDiv8 {
            width: 150px;
            height: 200px;
            background: pink;
            border-radius: 75px 75px 75px 75px/120px 120px 80px 80px
        }
        /* 花瓣形 */
        #showDiv9 {
            width: 200px;
            height: 200px;
            background: pink;
            border-radius: 100px 100px 0 100px;
        }
        /* 胶囊形 */
        #showDiv10 {
            width: 200px;
            height: 80px;
            background: pink;
            border-radius: 40px;
        }
    </style>
</head>
<body>
    <div id="showDiv4" class="showdiv"></div>
    <div id="showDiv5" class="showdiv"></div>
    <div id="showDiv6" class="showdiv"></div>
    <div id="showDiv7" class="showdiv"></div>
    <div id="showDiv8" class="showdiv"></div>
    <div id="showDiv9" class="showdiv"></div>
    <div id="showDiv10" class="showdiv"></div>
</body>
</html>

在这里插入图片描述

box-shadow:

作用：
          设置一个或多个下拉阴影的框
说明：
          boxShadow属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由2-4个长度值、一个可选的颜色值和一个可选的inset关键字来规定。省略长度的值是0
语法：
          box-shadow: h-shadow v-shadow blur spread color inset;
常用值：
          (h-shadow)：必需，水平阴影的位置。允许负值
          (v-shadow)：必需，垂直阴影的位置。允许负值
          (blur)：可选，模糊距离
          (spread)：可选，阴影的大小
          (color)：可选，阴影的颜色。在CSS颜色值寻找颜色值的完整列表
          (inset)：可选，从外层的阴影 （开始时） 改变阴影内侧阴影
eg)：
          box-shadow: 0 0 5px 10px yellow,inset,
                                0 0 5px 10px yellow,
                                0 0 15px 25px red,
                                0 0 25px 50px green,
                                0 0 35px 80px blue;

代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS3之border属性</title>
    
    <style type="text/css">
        .showdiv {
            display: inline-block;
            width: 200px;
            height: 200px;
            margin: 10px;
        }
        /* 内阴影1 */
        #showDiv11 {
            border: 1px solid;
            box-shadow: 0 0 10px 5px dimgray inset;
        }
        /* 内阴影2 */
        #showDiv12 {
            border: 1px solid;
            box-shadow: 10px 0 10px 5px red inset,
                        0 10px 10px 5px orange inset,
                        -10px 0 10px 5px blue inset,
                        0 -10px 10px 5px green inset;
        }
        /* 外阴影 */
        #showDiv13 {
            border: 1px solid;
            box-shadow: -10px 0 5px 0 red, 
			            0 -10px 5px 0 orange, 
			            10px 0 5px 0 blue, 
			            0 10px 5px 0 green;
        }
    </style>
</head>
<body>
    <div id="showDiv11" class="showdiv"></div>
    <div id="showDiv12" class="showdiv"></div>
    <div id="showDiv13" class="showdiv"></div>
</body>
</html>

在这里插入图片描述

outline:

作用：
在一个声明中设置所有的轮廓属性
说明：
可以设置的属性分别是 （按顺序）：outline-color, outline-style, outline-width

outline-color:

作用：
设置或检索对象外的线条轮廓的颜色
详见： https://www.runoob.com/cssref/pr-outline-color.html

outline-style:

作用：
设置或检索对象外的线条轮廓的样式
详见： https://www.runoob.com/cssref/pr-outline-style.html

outline-width:

作用：
设置或检索对象外的线条轮廓的宽度
详见： https://www.runoob.com/cssref/pr-outline-width.html

代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS3之border属性</title>    
    <style type="text/css">
        #showInput1 {
            outline: #FF4E50 dotted 1px;
            /*
            outline-color: #FF4E50;
            outline-style: double;
            outline-width: 1px;
            */
        }
    </style>
</head>
<body>
    <input type="text" id="showInput1" class="showinput" />
</body>
</html>

综合示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS3之border属性</title>
    
    <style type="text/css">
        .showdiv {
            display: inline-block;
            width: 200px;
            height: 200px;
            margin: 10px;
        }
        /* 彩环 */
        #showDiv18 {
            margin-left: 50px;
            margin-top: 200px;
            width: 70px;
            height: 70px;
            border-radius: 130px;
            border-width: 30px 30px 30px 30px;
            border-style: solid solid solid solid;
            border-color: red green blue yellow;
        }       
        /* 发光的彩环 */
        #showDiv19 {
            margin-left: 200px;
            margin-top: 200px;
            width: 70px;
            height: 70px;
            border-radius: 130px;
            border-width: 30px 30px 30px 30px;
            border-style: solid solid solid solid;
            border-color: red green blue yellow;
            box-shadow: 0 0 5px 10px yellow,
                        0 0 15px 25px red,
                        0 0 25px 50px green,
                        0 0 35px 80px blue;
        }       
        /* 彩虹 */
        #showDiv20 {
            width: 600px;
            height: 180px;
            margin-left: 400px;
            margin-top: 200px;
            border-style: solid;
            border-width: 20px 20px 20px 20px;
            border-color: transparent;
            border-radius: 320px 320px 0 0/240px 240px 0 0;
            box-shadow: 0 -7px 5px 2px purple,
                        0 -15px 4px 4px blue,
                        0 -24px 5px 4px cyan,
                        0 -34px 6px 4px green,
                        0 -45px 7px 4px yellow,
                        0 -57px 8px 4px orange,
                        0 -69px 9px 4px red;
        }
    </style>
</head>
<body>
    <div id="showDiv18" class="showdiv"></div>
    <div id="showDiv19" class="showdiv"></div>
    <div id="showDiv20" class="showdiv"></div>
</body>
</html>