web前端开发html5+css3（入门学习笔记）（day9）

最新推荐文章于 2024-09-22 06:10:36 发布

涛008

最新推荐文章于 2024-09-22 06:10:36 发布

阅读量63

点赞数

文章标签： css3 前端 html5

本文链接：https://blog.csdn.net/weixin_44647089/article/details/128310049

版权

盒子的大小

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子的大小</title>
    <style>
        .box1{
            width: 100px;
            height: 100px;
            background-color: #bfa;
            padding: 10px;
            border: 10px red solid;
            /* 默认情况下，盒子可见框的大小由内容区、内边距、和边框共同决定 
                    box-sizing用来设置盒子尺寸的计算方式（设置width和height的作用）
                        可选值：
                            content-box默认值，宽度和高度用来设置内容区的大小
                            border-box宽度和高度用来设置整个盒子可见框的大小
                                width和weight指的是内容区和内边距和边框的总大小
            */
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮廓阴影和圆角</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
            /* box-shadow用来设置元素的阴影效果，阴影效果不会影响页面布局
                第一个值：水平偏移量，正值向右偏移，负值反之
                第二个值：竖直偏移量，正值向下偏移，负值反之
                第三个值：阴影的模糊半径
                第四个值：阴影的颜色（）
            */
            box-shadow: 10px 10px 20px rgba(0, 0, 3, .5);
            /* outline用来设置元素的轮廓线，用法和border一样
                轮廓和边框不同之处：轮廓不会影响可见框的大小
            */
        }
        .box1:hover{
            outline: 10px red solid ;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: blue;
            /* border-radius 用来设置圆角，
            四个值：左下  右上  右下  左上
            三个值：左上  右上/左下  右下
            两个值：左上/右下  右上/左下
                border-top-left-radius
                border-top-right-radius
                border-bottom-left-radius
                border-bottom-right-radius
                数值：第一个数与第一个数相等，圆角半径大小
                 第一个数与第二个数
            */
            border-top-left-radius:30px ;

            border-radius:20px 100px;
            /* border-radius:20px/50px; */
            /* 设置圆形 */
            /* border-radius: 50%; */
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <span>hello!</span>
    <div class="box2"></div>
</body>
</html>