css复习----边框border day1

最新推荐文章于 2024-05-06 16:56:47 发布

wangyuanti

最新推荐文章于 2024-05-06 16:56:47 发布

阅读量320

点赞数

文章标签： css 学习日记

本文链接：https://blog.csdn.net/wangyuanti/article/details/77925652

版权

从今天开始复习假期的学习，不然在下次学习的时候就把之前的忘得一干二净了。

0627

css是什么？
（凡是写在标签名后面的，都是标签的属性）
style=”” 属性名称 = “属性值”
height: 100px; 样式名：样式值
比如:

<div id="box" style="width: 100px; height: 100px; border: 1px solid #f00;"></div>

css出现的位置：
1、标签的后面：

<div id="box" style="width: 100px;"></div>

2、style里面：

 <style>
        div{
            width:300px;
            height:200px;
            border:1px solid #d9cf31;
        }
 </style>

3、link里面：

   <link href="XX.css" rel="stylesheet">

css样式——边框
border :10px dotted rgb(32,111,150);
边框：
边框的粗细（宽度）
边框的样式（solid实线 dotted点斜 dashed虚线）
边框的颜色（英文单词、十六进制、rgb（，，）rgba（，，，）a是透明度 0-1）
边框的形状：非矩形
边框斜角出现的情况：相邻的两条边，并且颜色不一样
border-color 边框颜色
border-style 边框样式
birder-width 边框宽度
birder- top 顶部
birder- right 右边
birder- bottom 下边
birder-left 左边
小三角的制作：

<style>
        div{
            width:0;
            height:0px;
            border:30px solid white;
            border-bottom-color:#000;
        }
</style>

练习

这里写图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style type="text/css">
        .box{
            width: 300px;
            height: 417px;
            border-top: 2px solid #206f96;
        }
        .border{
            border-bottom: 1px solid #cfcfcf;
            border-left: 1px solid #cfcfcf;
            border-right: 1px solid #cfcfcf;
            width: 298px;
        }
        .box1{          
            height: 29px;           
        }
        .box2{
            height: 56px;           
        }
        .box3{
            height: 125px;          
        }
        .box4{
            height: 75px;           
        }
        .box5{
            height: 127px;          
        }
    </style>
    <body>
        <div class="box">
            <div class="box1 border"></div>
            <div class="box2 border"></div>
            <div class="box3 border"></div>
            <div class="box4 border"></div>
            <div class="box5 border"></div>
        </div>
    </body>
</html>

wangyuanti

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css复习----边框border day1

从今天开始复习假期的学习，不然在下次学习的时候就把之前的忘得一干二净了。0627css是什么？（凡是写在标签名后面的，都是标签的属性） style=”” 属性名称 = “属性值” height: 100px; 样式名：样式值比如:<div id="box" style="width: 100px; height: 100px; border: 1px solid #
复制链接

扫一扫