css--盒子边框 border

最新推荐文章于 2024-10-27 17:51:09 发布

Zoe Din

最新推荐文章于 2024-10-27 17:51:09 发布

阅读量426

点赞数

分类专栏： Web前段学习笔记

本文链接：https://blog.youkuaiyun.com/naturly/article/details/104175445

版权

Web前段学习笔记专栏收录该内容

10 篇文章

订阅专栏

1、CSS 边框属性

border-width

border-style

border-color

1.1 边框样式 border-style :

border-style 值:

none: 默认无边框

dotted: 定义一个点线边框

dashed: 定义一个虚线边框

solid: 定义实线边框

1.2边框颜色 border-color

name - 指定颜色的名称，如 "red"
RGB - 指定 RGB 值, 如 "rgb(255,0,0)"
Hex - 指定16进制值, 如 "#ff0000"

1.3边框-简写属性

border: 边框粗细边框样式边框颜色

border:5px solid red;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*div{*/
        /*    width: 200px;*/
        /*    height: 200px;*/
        /*    border-width: 5px;*/
        /*    !*border-style: solid;*!*/
        /*    !*border-style: dashed;*!*/
        /*    !*border-style: dotted;*!*/
        /*    !*border-color: orange;*!*/
        /*    !*border:5px solid red;*!*/

        /*}*/
        div{
            width: 200px;
            height: 200px;
            border-top: 5px solid red;
            border-left: 4px dashed green;
            border-right:  6px dotted blue;
            border-bottom: 7px solid orange;
        }
        /*input{*/
        /*    border-top: none;*/
        /*    border-bottom: 2px dashed orange;*/
        /*    border-right: none;*/
        /*    border-left: none;*/

        /*}*/
        input{
            border: none;
            border-bottom: 2px double orange;
        }
    </style>
</head>
<body>
<div></div>
用户名：<input type="text"/> <br>
密码：<input type="password"/>
</body>
</html>

1.4边框-单独设置各边

border-top: 5px solid red; 上边框

border-left: 4px dashed green; 左边框博客搬家

border-right: 6px dotted blue;

border-bottom: 7px solid orange;