CSS圆角边框-盒子阴影-文字阴影

最新推荐文章于 2022-12-07 19:37:15 发布

胖就别吃

最新推荐文章于 2022-12-07 19:37:15 发布

阅读量323

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/qq_50647672/article/details/127851185

版权

圆角边框

border-radius: 10px;

radius半径原理：（椭）圆与边框的交集形成圆角效果。

参数值可以是数值或百分比形式；
如果是正方形，想要设置一个圆，把数值改为高度或宽度的一半，或者写50%；
如果是个矩形，设置为高度的一半就可以；
该属性是一个简写属性，可以跟四个角，分别代表左上角，右上角，右下角，左下角；
分开写：border-top-left-radius, border-top-right-radious。

<style>
        .yuanxing {
            width: 200px;
            height: 200px;
            background-color: aqua;
            /* border-radius: 100px; */
            /* 50%就是宽度和高度的一半 等价于100px */
            border-radius: 50%;
        }
        .juxing {
            width: 300px;
            height: 100px;
            background-color: aquamarine;
            /* 圆角矩形设置为高度的一半 */
            border-radius: 50px;
        }
        .radius {
            width: 200px;
            height: 200px;
            /* border-radius: 10px 20px 30px 40px; */
            /* border-radius: 10px   40px; */
            background-color: bisque;
            border-top-left-radius: 50px;
        }
    </style>
</head>
<body>
    1.圆形的做法：
    <div class="yuanxing"></div>
    2.圆角矩形的做法：
    <div class="juxing"></div>
    3.可以设置不同的圆角：
    <div class="radius"></div>
</body>

盒子阴影

box-shadow：h-shadow v-shadow blur spread color inset;

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊距离。
spread	可选。阴影的尺寸。
color	可选。阴影的颜色。
insert	可选。将外部阴影（outset）改为内部阴影

注意：

默认的是外阴影（outset），但是不可以写这个单词，否则导致阴影无效；
盒子阴影不占用空间，不会影响其他盒子排列。

文字阴影

text-shadow：h-shadow v-shadow blur color；

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊距离。
color	可选。阴影的颜色。