css:修改盒子样式

时间：2024-11-15 20:23:45

圆角边框

在css3中新增了圆角边框样式，这样我们的盒子就可以长得奇形怪状了

像****上的发布就是圆角边框

还有这些

 .x,
        .y {
            background-color: cornflowerblue;
            width: 200px;
            height: 200px;
            margin: 0 auto;
            text-align: center;
            border-radius: 10px;

        }

10px是什么意思？

在四角画一个半径为10px的圆和矩形相切，切下来的结果就是外边框圆角

调整半径：

  .x,
        .y {
            background-color: cornflowerblue;
            width: 200px;
            height: 200px;
            margin: 0 auto;
            text-align: center;
            border-radius: 100px;//是方形边长的一半

        }

我们也可以用百分比的方式来设置：

border-radius: 50%;

50%的意思是宽度和高度的一半，等价于50%

如果想要椭圆就设置为50%

（孟德斯鸠（bushi））

想要两边为圆角就设置为高的一半

 .x,
        .y {
            /* background-color: cornflowerblue; */
            background-image: url(微信图片_20241113202301.jpg);
            background-repeat: no-repeat;
            background-size: cover;
            width: 300px;
            height: 200px;
            margin: 0 auto;
            text-align: center;
            border-radius: 150px;

        }

给四个角设置不同的圆角也可以用到类似padding的写法：

border-radius: 50px 100px 150px 200px;

盒子阴影

像这种有种浮起的感觉，就是盒子阴影的效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #222222
        }

        .box {
            margin: 100px auto;
            width: 300px;
            height: 450px;
            /* text-align: center; */
            background-color: #f5f5f5;
            border-radius: 10px;
        }

        .box .review {
            font-size: 14px;
            color: rgb(39, 34, 34);
            padding: 0 20px;
            margin-top: 10px;

        }

        .box img {
            width: 100%;
            border-radius: 10px;
        }

        .box .appraise {
            font-size: 10px;
            color: darkgray;
            margin: 20px 20px;
        }

        .box div h3 {
            display: inline-block;
            font-size: 20px;
            width: 200px;
            margin: 10px 0px 0px 20px;
            margin-top: 10px;
            font-weight: 400;

        }

        .box div h3 a {
            text-decoration: none;
            color: black;

        }

        .box div span {
            margin-top: 10px;
            color: #ff6700;
            margin-right: 20px;
        }

        .box div .dre {
            margin-top: 10px;
            color: darkgray;
            font-style: normal;
            /* margin: 0px 0px 0px 3px; */
        }

        .box:hover {
            box-shadow: 0px 0px 10px 1px rgba(255, 204, 34, 0.5);//设置盒子阴影效果

            border: 1px solid #ffcc22;
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="微信图片_20241113155824.jpg" alt="菠萝吹雪">
        <p class="review">这是一只死到临头还在犯贱的菠萝吹雪,也可能是一个补不完deadline的励志轩,也是一个知道周末要考概率论的荷叶饭</p>
        <p class="appraise">来自XUPT的评价</p>
        <div>
            <h3><a href="#">荷叶饭尸块秒杀价...</a></h3>
            <em class="dre">|</em>
            <span>9.9元</span>
        </div>
    </div>
</body>

</html>

下面这行从左到右分别表示的是：

h-shadow：水平阴影的位置，允许负值（必须值）

v-shadow：垂直阴影的位置，允许负值（必须值）

blur：模糊距离（可选）

spread：阴影的尺寸（可选）

color：阴影的颜色（可选）

inset：将外部阴影(outset)改为内部阴影（可选）

盒子阴影不占用盒子的空间

  box-shadow: 0px 0px 100px 10px rgba(255, 204, 34, 0.5) inset;//设置盒子阴影在内部的效果

泛黄的菠萝吹雪，阴影向内

outset是默认的，不能这么写

文字阴影

和盒子阴影差不多

h-shadow：水平阴影的位置，允许负值（必须值）

v-shadow：垂直阴影的位置，允许负值（必须值）

blur：模糊距离（可选）

color：阴影的颜色（可选）

text-shadow: 10px 10px 10px black;

好恶心。。。

相关文章