css边框属性

最新推荐文章于 2021-12-31 12:56:06 发布

小鱼的池塘

最新推荐文章于 2021-12-31 12:56:06 发布

阅读量348

点赞数

分类专栏：前端基础语言从学习文章标签： css

本文链接：https://blog.csdn.net/haha_hello/article/details/56279179

版权

前端基础语言从学习专栏收录该内容

27 篇文章 1 订阅

订阅专栏

边框属性

这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>44-边框属性上.html</title>
    <style>
        .box1{
            width:100px;
            height: 100px;
            background-color: red;
            /*border: 5px solid green;*/

            /* dashed 短续线*/
            border-top: 5px dashed yellow;
            /* double 双实线*/
            border-bottom: 10px double green;
            /* dotted 小圆点*/
            border-left: 5px dotted purple;
            /* solid 单实线*/
            border-right: 5px solid cyan;
        }
        .box2{
            width: 300px;
            height: 300px;
            background-color: red;
            border-width:5px 10px 5px 10px;
            border-style: solid dashed dotted double;
            border-color: yellow green cyan purple;
        }
    </style>
</head>
<body>

<!--
    1,什么是边框
    边框就是环绕在标签宽度和高度周围的线条
    2,边框属性的格式
    (1),连写(四个边都设置)
    border: 宽度 样式 颜色;
    快捷键:
    bd+ table键
    注意点:
    1,连写格式中颜色可以省略,默认是黑色
    2,连写格式中样式是不可以省略的
    3,连写格式中宽度是可以省略的,默认是1px
    (2),连写(设置某一个边)
    border-top: 宽度 样式 颜色;
    border-bottom: 宽度 样式 颜色;
    border-left: 宽度 样式 颜色;
    border-right: 宽度 样式 颜色;
    快捷键:
    bdt+ table键
   （3），连写方式
    border-width:上 右 下 左;
    border-style:上 右 下 左;
    border-color:上 右 下 左;
    2,注意点
    (1),这三个属性的取值是按照上右下左的顺序取值的
    (2),
-->
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>

小鱼的池塘

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css边框属性

边框属性<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>44-边框属性上.html</title> <style> .box1{ width:100px; height: 100px; backgr
复制链接

扫一扫